root/trac/hacks/marketplugin/0.9/slider/slider.html

Revision 56 (checked in by stevegt, 6 years ago)

import slider 1.02

Line 
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3
4 <html>
5 <head>
6 <title>Slider (WebFX)</title>
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8 <script type="text/javascript" src="local/webfxlayout.js"></script>
9
10 <script type="text/javascript" src="js/range.js"></script>
11 <script type="text/javascript" src="js/timer.js"></script>
12 <script type="text/javascript" src="js/slider.js"></script>
13 <link type="text/css" rel="StyleSheet" href="css/bluecurve/bluecurve.css" />
14
15 </head>
16 <body>
17 <!-- WebFX Layout Include -->
18 <script type="text/javascript">
19
20 var articleMenu= new WebFXMenu;
21 articleMenu.left  = 384;
22 articleMenu.top   = 86;
23 articleMenu.width = 140;
24 articleMenu.add(new WebFXMenuItem("Slider", "slider.html"));
25 articleMenu.add(new WebFXMenuItem("Implementation", "implementation.html"));
26 articleMenu.add(new WebFXMenuItem("API", "api.html"));
27 articleMenu.add(new WebFXMenuItem("Demo", "demo.html"));
28 articleMenu.add(new WebFXMenuSeparator);
29 articleMenu.add(new WebFXMenuItem("Download", "http://webfx.eae.net/download/slider102.zip"));
30 webfxMenuBar.add(new WebFXMenuButton("Article Menu", null, null, articleMenu));
31
32 webfxLayout.writeTitle("Slider");
33 webfxLayout.writeMenu();
34 webfxLayout.writeDesignedByEdger();
35
36 </script>
37 <div class="webfx-main-body">
38 <!-- end WebFX Layout Includes -->
39
40 <p>
41 <span class="date">2002-10-07</span>: First public version released
42 </p>
43
44 <h2>Introduction</h2>
45
46 <p>Sliders are useful controls for choosing a value in a range of values.
47 Common uses are volume controls, seekers for movie and sound files as well
48 as color pickers. A few people have asked for an update to the old
49 <a href="http://webfx.eae.net/dhtml/slidebar/slidebar.html">Slidebar</a>
50 component to make it work in Mozilla and work better in IE. But since the
51 original control was very basic and was not very usable I decided to
52 create a new one.</p>
53
54 <form onsubmit="return false;">
55 <div class="slider" id="slider-1" tabIndex="1" style="width: auto; margin: 10px;">
56         <input class="slider-input" id="slider-input-1"/>
57 </div>
58 </form>
59
60 <script type="text/javascript">
61
62 var sliderEl = document.getElementById ? document.getElementById("slider-1") : null;
63 var inputEl = document.forms[0]["slider-input-1"];
64 var s = new Slider(sliderEl, inputEl);
65 s.onchange = function () {
66         window.status = "Value: " + s.getValue();
67 };
68 s.setValue(50);
69
70 </script>
71
72 <p>When starting with the new slider a few main features where kept in mind:</p>
73
74 <ul>
75         <li>Degrade gracefully for browser without the needed DOM support. This is
76                 achieved by using a basic text input as the base for the control. In case
77                 the browser does not support the needed features then the input can be used
78                 in the normal way.</li>
79         <li>Full mouse support. Lots of slider controls does not support anything beyond dragging
80                 the handle. The goal was to allow the user to be able to both drag the handle
81                 and hold down the mouse anywhere on the slider to move the handle towards the
82                 mouse.</li>
83         <li>Full keyboard support. Once the slider is focused the arrow keys and Page Up /
84                 Page Down can be used to change the value.</li>
85         <li>Mouse wheel support where available.</li>
86         <li>Skinable using different CSS files.</li>
87 </ul>
88
89 <h2>Requirements</h2>
90
91 <p>The slider works in <strong>any</strong> browser but the GUI component works in
92 browsers with simple DOM level 1 support with one IE extended proprietary property.
93 That property is <code>offsetWidth</code> (and <code>offsetHeight</code>) and this is
94 known to be supported by IE5+, Mozilla 1.0+, Konqueror 3+ and it is assumed other future
95 browsers will support this as well because it has become a de facto standard.</p>
96
97 <h2>Usage</h2>
98
99 <p>To use the slider we have to include a few JS files and a CSS file.</p>
100
101 <pre>
102 &lt;script type="text/javascript" src="<a href="js/range.js">js/range.js</a>"&gt;&lt;/script&gt;
103 &lt;script type="text/javascript" src="<a href="js/timer.js">js/timer.js</a>"&gt;&lt;/script&gt;
104 &lt;script type="text/javascript" src="<a href="js/slider.js">js/slider.js</a>"&gt;&lt;/script&gt;
105 &lt;link type="text/css" rel="StyleSheet" href="<a href="css/winclassic.css">css/winclassic.css</a>" /&gt;
106 </pre>
107
108 <p>Then we need to define the HTML to use for the slider. Something like this:</p>
109
110 <pre>
111 &lt;div class="slider" id="slider-1" tabIndex="1"&gt;
112    &lt;input class="slider-input" id="slider-input-1"
113       name="slider-input-1"/&gt;
114 &lt;/div&gt;
115 </pre>
116
117 <p>After this we have to create the JS object that handles the logic. If we only
118 plan to use this in pages and applications that you know will support the dynamic
119 slider control we can use the following script block. This should be placed directly
120 after the slider div.</p>
121
122 <pre>
123 &lt;script type="text/javascript"&gt;
124
125 var s = new Slider(document.getElementById("slider-1"),
126                    document.getElementById("slider-input-1"));
127
128 &lt;/script&gt;
129 </pre>
130
131 <p>If we however cannot guarantee that all user uses browsers that support
132 <code>document.getElementById</code> we should use <code>document.forms</code>
133 to find the input and test whether <code>document.getElementById</code> is
134 defined.</p>
135
136 <pre>
137 &lt;script type="text/javascript"&gt;
138
139 var sliderEl = document.getElementById ?
140                   document.getElementById("slider-1") : null;
141 var inputEl = document.forms[0]["slider-input-1"];
142 var s = new Slider(sliderEl, inputEl);
143
144 &lt;/script&gt;
145 </pre>
146
147 <p>
148 <a href="slider.html">Slider</a><br />
149 <a href="implementation.html">Implementation</a><br />
150 <a href="api.html">API</a><br />
151 <a href="demo.html">Demo</a><br />
152 <a href="http://webfx.eae.net/download/slider102.zip">Download</a>
153 </p>
154
155 <p class="author">Author: Erik Arvidsson</p>
156
157 <!-- end webfx-main-body -->
158 </div>
159
160 </body>
161 </html>
Note: See TracBrowser for help on using the browser.