Ticket #1388: SLIDEREX.txt

File SLIDEREX.txt, 8.5 kB (added by anonymous, 6 months ago)
Line 
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html><head>
3 <title>JavaScript Bs_Slider example 1</title>
4
5 <style>
6   .sliderInput {
7         height:20;
8     width:40;
9         font-family : Arial, Helvetica, sans-serif;
10         font-size : 12px;
11   }
12   .smallTxt {
13     font-size: 12px;
14   }
15 </style>
16
17 <script type="text/javascript" src="/_bsJavascript/lib/LibCrossBrowser.js"></script>
18 <script type="text/javascript" src="/_bsJavascript/lib/EventHandler.js"></script>
19 <script type="text/javascript" src="/_bsJavascript/core/form/Bs_FormUtil.lib.js"></script>
20 <script type="text/javascript" src="/_bsJavascript/core/gfx/Bs_ColorUtil.lib.js"></script>
21 <script type="text/javascript" src="/_bsJavascript/components/slider/Bs_Slider.class.js"></script>
22
23 <script type="text/javascript"><!--
24 function init() {
25   // - Slider 1 -----------------------------------------
26   mySlider = new Bs_Slider();
27   mySlider.attachOnChange(bsSliderChange);
28   mySlider.width         = 121;
29   mySlider.height        = 26;
30   mySlider.minVal        = 0;
31   mySlider.maxVal        = 10;
32   mySlider.valueInterval = 1;
33   mySlider.arrowAmount   = 2;
34         mySlider.arrowKeepFiringTimeout = 500;
35   mySlider.valueDefault  = 4;
36   mySlider.imgDir   = '/_bsJavascript/components/slider/img/';
37   mySlider.setBackgroundImage('bob/background.gif', 'no-repeat');
38   mySlider.setSliderIcon('bob/slider.gif', 13, 18);
39   mySlider.setArrowIconLeft('img/arrowLeft.gif', 16, 16);
40   mySlider.setArrowIconRight('img/arrowRight.gif', 16, 16);
41   mySlider.useInputField = 2;
42   mySlider.styleValueFieldClass = 'sliderInput';
43   mySlider.colorbar = new Object();
44   mySlider.colorbar['color']           = 'blue';
45   mySlider.colorbar['height']          = 5;
46   mySlider.colorbar['widthDifference'] = -12;
47   mySlider.colorbar['offsetLeft']      = 5;
48   mySlider.colorbar['offsetTop']       = 9;
49   mySlider.drawInto('sliderDiv1');
50
51   // - Slider 2 -----------------------------------------
52   mySlider2 = new Bs_Slider();
53   mySlider2.attachOnChange(bsSliderChange);
54   mySlider2.width         = 121;
55   mySlider2.height        = 26;
56   mySlider2.minVal        = 10;
57   mySlider2.maxVal        = 25;
58   mySlider2.valueInterval = 0.5;
59   mySlider2.arrowAmount   = 0;
60   mySlider2.valueDefault  = 25; //15;
61   mySlider2.imgDir   = '/_bsJavascript/components/slider/img/';
62   mySlider2.setBackgroundImage('bob/background.gif', 'no-repeat');
63   mySlider2.setSliderIcon('bob/slider.gif', 13, 18);
64   mySlider2.setArrowIconLeft('img/arrowLeft.gif', 16, 16);
65   mySlider2.setArrowIconRight('img/arrowRight.gif', 16, 16);
66   mySlider2.useInputField = 3;
67   mySlider2.styleValueFieldClass = 'sliderInput';
68   mySlider2.colorbar = new Object();
69   mySlider2.colorbar['color']           = 'orange';
70   mySlider2.colorbar['height']          = 5;
71   mySlider2.colorbar['widthDifference'] = -2;
72   mySlider2.colorbar['offsetLeft']      = 5;
73   mySlider2.colorbar['offsetTop']       = 9;
74   mySlider2.drawInto('sliderDiv2');
75  
76   // - Slider 3 -----------------------------------------
77   mySlider3 = new Bs_Slider();
78   mySlider3.attachOnChange(bsSliderChange);
79   mySlider3.width         = 121;
80   mySlider3.height        = 26;
81   mySlider3.minVal        = 0;
82   mySlider3.maxVal        = 1;
83   mySlider3.valueInterval = 0.02;
84   mySlider3.arrowAmount   = 0.1;
85         mySlider3.arrowKeepFiringTimeout = 300;
86   mySlider3.valueDefault  = 0.56;
87   mySlider3.imgDir   = '/_bsJavascript/components/slider/img/';
88   mySlider3.setBackgroundImage('bob/background.gif', 'no-repeat');
89   mySlider3.setSliderIcon('bob/slider.gif', 13, 18);
90   mySlider3.setArrowIconLeft('img/arrowLeft.gif', 16, 16);
91   mySlider3.setArrowIconRight('img/arrowRight.gif', 16, 16);
92   mySlider3.useInputField = 3;
93   mySlider3.styleValueFieldClass = 'sliderInput';
94   mySlider3.colorbar = new Object();
95   mySlider3.colorbar['color']           = 'green';
96   mySlider3.colorbar['height']          = 5;
97   mySlider3.colorbar['widthDifference'] = -12;
98   mySlider3.colorbar['offsetLeft']      = 5;
99   mySlider3.colorbar['offsetTop']       = 9;
100   mySlider3.drawInto('sliderDiv3');
101        
102   // - Slider 4 -----------------------------------------
103   mySlider4 = new Bs_Slider();
104   //mySlider4.attachOnSlideStart(bsSliderStart);
105   mySlider4.attachOnChange(bsSliderChange);
106   mySlider4.attachOnSlideEnd(bsSliderEnd);
107   mySlider4.width         = 121;
108   mySlider4.height        = 26;
109   mySlider4.minVal        = 0;
110   mySlider4.maxVal        = 2;
111   mySlider4.valueInterval = 0.05;
112   mySlider4.arrowAmount   = 0.1;
113         mySlider4.arrowKeepFiringTimeout = 200;
114   mySlider4.valueDefault  = 0.25;
115   mySlider4.imgDir   = '/_bsJavascript/components/slider/img/';
116   mySlider4.setBackgroundImage('bob/background.gif', 'no-repeat');
117   mySlider4.setSliderIcon('bob/slider.gif', 13, 18);
118   mySlider4.setArrowIconLeft('img/arrowLeft.gif', 16, 16);
119   mySlider4.setArrowIconRight('img/arrowRight.gif', 16, 16);
120   mySlider4.useInputField = 3;
121   mySlider4.styleValueFieldClass = 'sliderInput';
122   mySlider4.colorbar = new Object();
123   mySlider4.colorbar['color']           = '#FF00FF'; //'magenta';
124   mySlider4.colorbar['color2']          = '#000000';
125   mySlider4.colorbar['height']          = 5;
126   mySlider4.colorbar['widthDifference'] = -12;
127   mySlider4.colorbar['offsetLeft']      = 5;
128   mySlider4.colorbar['offsetTop']       = 9;
129   mySlider4.drawInto('sliderDiv4');
130
131 }
132
133 /**
134 * @param object sliderObj
135 * @param int val (the value)
136 */
137 function bsSliderChange(sliderObj, val, newPos){
138   document.test.attachedFieldValue.value = val;
139 }
140 /**
141 * @param object sliderObj
142 * @param int val (the value)
143 */
144 function bsSliderStart(sliderObj, val, newPos){
145   alert('Started at '+ val +' (Pos:'+ newPos +')');
146 }
147 /**
148 * @param object sliderObj
149 * @param int val (the value)
150 */
151 function bsSliderEnd(sliderObj, val, newPos){
152   sliderObj.valueInterval = 0.25;
153   sliderObj.setValue(newPos);
154   sliderObj.valueInterval = 0.05;
155   document.test.attachedFieldValue.value = sliderObj.getValue();
156 }
157
158 // --></script>
159
160 </head>
161 <body bgcolor="#FFFFFF" text="#3366AA" link="#0000EE" vlink="#551A8B" alink="#FF0000" onLoad="init();">
162
163 <h1>JavaScript Bs_Slider example 1</h1>
164
165 This is an example of the <a href="http://www.blueshoes.org/en/javascript/slider/" target="_blank">Slidebar Control</a>.
166 <br><br>
167
168 <form  name="test" id="test" action="http://www.blueshoes.org/postDump.php" method="post">
169   All sliders below have an "onChange"-event attached that calls an user-defined function ('bsSliderChange()')
170   that updates this form field: <input type="text" name="attachedFieldValue" value="" size="6" style="background:yellow;">         
171         <br><br>
172         <input type="submit">
173 </form>
174
175 <table border="1" cellspacing="0" cellpadding="5">
176   <tr>
177     <th width="250" align="left">Sliders
178     </th>
179     <th align="left">Attributes
180     </th>
181   </tr>
182   <tr>
183     <td valign="top">
184       <div id="sliderDiv1"></div>
185     </td>
186     <td class="smallTxt" valign="top">
187       <ul>
188         <li>number range: from 0-10</li>
189         <li>default value: 2</li>
190         <li>step: 1 (so only full numbers allowed)</li>
191         <li>arrow-click: moves 2</li>
192         <li>input-field: always visible as such</li>
193       </ul>
194     </td>
195   </tr>
196   <tr>
197     <td valign="top">
198       <div id="sliderDiv2"></div>
199     </td>
200     <td class="smallTxt" valign="top">
201       <ul>
202         <li>number range: from 10-25</li>
203         <li>default value: 15</li>
204         <li>step: 0.5</li>
205         <li>arrow-click: no arrows displayed</li>
206         <li>input-field: visible as text, converts into input field onMouseOver</li>
207       </ul>
208     </td>
209   </tr>
210   <tr>
211     <td valign="top">
212       <div id="sliderDiv3"></div>
213     </td>
214     <td class="smallTxt" valign="top">
215       <ul>
216         <li>number range: from 0-1</li>
217         <li>default value: 0.56</li>
218         <li>step: 0.02</li>
219         <li>arrow-click: moves 0.1</li>
220         <li>input-field: visible as text, converts into input field onMouseOver</li>
221       </ul>
222     </td>
223   </tr>
224   <tr>
225     <td valign="top">
226       <div id="sliderDiv4"></div>
227     </td>
228     <td class="smallTxt" valign="top">
229       <ul>
230         <li>number range: from 0 - (+2)</li>
231         <li>default value: 0.25</li>
232         <li>step: 0.05</li>
233         <li>arrow-click: moves 0.1</li>
234         <li>input-field: visible as text, converts into input field onMouseOver</li>
235         <li>attached event: "attachOnSlideEnd()" that snaps to the next 0.25 step</li>
236                                 <li>color bar: fading color.</li>
237       </ul>
238     </td>
239   </tr>
240 </table>
241
242 <div id="debug"></div>
243
244 </body></html>