|
0
|
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 <h2>Implementation</h2>
|
|
|
41
|
|
|
42 <p>The slider implementation mostly consists of lots of event handlers that
|
|
|
43 sets the value depending on the event arguments.</p>
|
|
|
44
|
|
|
45 <h3>Range</h3>
|
|
|
46
|
|
|
47 <p>The data model is handled by a class called Range (also known as BoundedRangeModel).
|
|
|
48 This class has a few properties that fits perfectly with sliders, scrollbars and
|
|
|
49 progress bars. A range has a minimum value, a value, an extent and a maximum value.
|
|
|
50 The following is always true for a range object.</p>
|
|
|
51
|
|
|
52 <pre>
|
|
|
53 minimum < value < value + extent < maximum
|
|
|
54 </pre>
|
|
|
55
|
|
|
56 <p>In the case of a slider the extent is always zero. Using a range for the data
|
|
|
57 model allows the implementation of the slider to concentrate on other things than
|
|
|
58 ensuring that the data model is valid.</p>
|
|
|
59
|
|
|
60 <h3>Timer</h3>
|
|
|
61
|
|
|
62 <p>For this implementation of the slider I decided to use an object oriented
|
|
|
63 abstraction of <code>window.setTimeout</code>. A timer from the <code>Timer</code>
|
|
|
64 class can be started and stopped and it fires a pseudo event called <code>ontimer</code>
|
|
|
65 a certain amount of milliseconds after the timer is started.</p>
|
|
|
66
|
|
|
67 <pre>
|
|
|
68 Timer.prototype.start = function () {
|
|
|
69 if (this.isStarted())
|
|
|
70 this.stop();
|
|
|
71 var oThis = this;
|
|
|
72 this._timer = window.setTimeout(function () {
|
|
|
73 if (typeof oThis.ontimer == "function")
|
|
|
74 oThis.ontimer();
|
|
|
75 }, this._pauseTime);
|
|
|
76 this._isStarted = false;
|
|
|
77 };
|
|
|
78
|
|
|
79 Timer.prototype.stop = function () {
|
|
|
80 if (this._timer != null)
|
|
|
81 window.clearTimeout(this._timer);
|
|
|
82 this._isStarted = false;
|
|
|
83 };
|
|
|
84 </pre>
|
|
|
85
|
|
|
86 <h3>Slider</h3>
|
|
|
87
|
|
|
88 <p>The slider consists of a line element and a handle element. The line is only
|
|
|
89 there for the visual effect. The handle on the other hand can be dragged and
|
|
|
90 thereby changing the value. When dragging the handle the position of the mouse
|
|
|
91 is used to calculate a new value for the data model. Once the value is changed
|
|
|
92 the layout for the slider is recalculated.</p>
|
|
|
93
|
|
|
94 <p>When the user holds down the mouse on the slider, but not on the handle, a
|
|
|
95 timer is started and every time the timer triggers the <code>timer</code> event
|
|
|
96 the value is changed by the <code>blockIncrement</code> towards the mouse
|
|
|
97 pointer.</p>
|
|
|
98
|
|
|
99 <p>The slider also allows the user to use the keyboard to change the value. This
|
|
|
100 is done by listening to the <code>keydown</code> (and <code>keypress</code>)
|
|
|
101 events. In the <code>keydown</code> handler the key is checked and the value for
|
|
|
102 the data model is updated accordingly. The reason for the <code>keypress</code>
|
|
|
103 handler is to disable the default actions in the browser.</p>
|
|
|
104
|
|
|
105 <p>
|
|
|
106 <a href="slider.html">Slider</a><br />
|
|
|
107 <a href="implementation.html">Implementation</a><br />
|
|
|
108 <a href="api.html">API</a><br />
|
|
|
109 <a href="demo.html">Demo</a><br />
|
|
|
110 <a href="http://webfx.eae.net/download/slider102.zip">Download</a>
|
|
|
111 </p>
|
|
|
112
|
|
|
113 <p class="author">Author: Erik Arvidsson</p>
|
|
|
114
|
|
|
115 <!-- end webfx-main-body -->
|
|
|
116 </div>
|
|
|
117
|
|
|
118 </body>
|
|
|
119 </html>
|
