1 | ### Eclipse Workspace Patch 1.0 |
---|
2 | #P jQuery |
---|
3 | Index: demos/slider/multiple-handles.html |
---|
4 | =================================================================== |
---|
5 | --- demos/slider/multiple-handles.html (revision 0) |
---|
6 | +++ demos/slider/multiple-handles.html (revision 0) |
---|
7 | @@ -0,0 +1,51 @@ |
---|
8 | +<!doctype html> |
---|
9 | +<html lang="en"> |
---|
10 | +<head> |
---|
11 | + <title>jQuery UI Slider - Range slider</title> |
---|
12 | + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> |
---|
13 | + <script type="text/javascript" src="../../jquery-1.4.2.js"></script> |
---|
14 | + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> |
---|
15 | + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> |
---|
16 | + <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> |
---|
17 | + <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script> |
---|
18 | + <link type="text/css" href="../demos.css" rel="stylesheet" /> |
---|
19 | + <style type="text/css"> |
---|
20 | + #demo-frame > div.demo { padding: 10px !important; }; |
---|
21 | + </style> |
---|
22 | + <script type="text/javascript"> |
---|
23 | + $(function() { |
---|
24 | + $("#slider-range").slider({ |
---|
25 | + min: 0, |
---|
26 | + max: 500, |
---|
27 | + values: [20, 75, 300, 400], |
---|
28 | + unittext: "dollar", |
---|
29 | + labels: ["estimated costs", "actual costs", "budget", "recommended budget"], |
---|
30 | + slide: function(event, ui) { |
---|
31 | + $("#amount").val('$' + ui.values[0] + ' - $' + ui.values[1]); |
---|
32 | + } |
---|
33 | + }); |
---|
34 | + $("#amount").val('$' + $("#slider-range").slider("values", 0) + ' - $' + $("#slider-range").slider("values", 1)); |
---|
35 | + }); |
---|
36 | + </script> |
---|
37 | +</head> |
---|
38 | +<body> |
---|
39 | + |
---|
40 | +<div class="demo" role="application"> |
---|
41 | + |
---|
42 | +<p> |
---|
43 | +<label for="amount">Price range:</label> |
---|
44 | +<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> |
---|
45 | +</p> |
---|
46 | + |
---|
47 | +<div id="slider-range"></div> |
---|
48 | + |
---|
49 | +</div><!-- End demo --> |
---|
50 | + |
---|
51 | +<div class="demo-description"> |
---|
52 | + |
---|
53 | +<p>Set the <code>range</code> option to true to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected.</p> |
---|
54 | + |
---|
55 | +</div><!-- End demo-description --> |
---|
56 | + |
---|
57 | +</body> |
---|
58 | +</html> |
---|
59 | Index: tests/unit/slider/slider_options.js |
---|
60 | =================================================================== |
---|
61 | --- tests/unit/slider/slider_options.js (revision 3816) |
---|
62 | +++ tests/unit/slider/slider_options.js (working copy) |
---|
63 | @@ -89,7 +89,22 @@ |
---|
64 | }); |
---|
65 | |
---|
66 | test("range", function() { |
---|
67 | - ok(false, "missing test - untested code is broken code."); |
---|
68 | + el = $('<div></div>'); |
---|
69 | + |
---|
70 | + options = { |
---|
71 | + max: 100, |
---|
72 | + min: 0, |
---|
73 | + orientation: 'horizontal', |
---|
74 | + values: [10,50], |
---|
75 | + range:true |
---|
76 | + }; |
---|
77 | + |
---|
78 | + el.slider(options); |
---|
79 | + var handles = handle(); |
---|
80 | + ok(el.slider("option", "range") == options.range); |
---|
81 | + equals((options.values.length), 2, "range is set to true, length of values is"); |
---|
82 | + el.slider('destroy'); |
---|
83 | + |
---|
84 | }); |
---|
85 | |
---|
86 | test("step", function() { |
---|
87 | @@ -97,11 +112,52 @@ |
---|
88 | }); |
---|
89 | |
---|
90 | test("value", function() { |
---|
91 | - ok(false, "missing test - untested code is broken code."); |
---|
92 | + el = $('<div></div>'); |
---|
93 | + |
---|
94 | + options = { |
---|
95 | + max: 100, |
---|
96 | + min: 0, |
---|
97 | + orientation: 'horizontal', |
---|
98 | + value: 5 |
---|
99 | + }; |
---|
100 | + |
---|
101 | + el.slider(options); |
---|
102 | + var handles = handle(); |
---|
103 | + ok(el.slider("option", "value") == options.value); |
---|
104 | + equals(handles.attr("aria-valuenow"), 5, "the aria-valuenow is"); |
---|
105 | + el.slider('destroy'); |
---|
106 | + |
---|
107 | }); |
---|
108 | |
---|
109 | test("values", function() { |
---|
110 | - ok(false, "missing test - untested code is broken code."); |
---|
111 | + el = $('<div></div>'); |
---|
112 | + |
---|
113 | + options = { |
---|
114 | + max: 100, |
---|
115 | + min: 0, |
---|
116 | + orientation: 'horizontal', |
---|
117 | + step: 1, |
---|
118 | + values: [10,50], |
---|
119 | + range: true |
---|
120 | + }; |
---|
121 | + |
---|
122 | + el.slider(options, options.step); |
---|
123 | + var handles = handle(); |
---|
124 | + var firstHandle = handles.eq(0); |
---|
125 | + equals(firstHandle.attr("aria-valuenow"), 10, "The aria-valuenow of the first handle is"); |
---|
126 | + var secondHandle = handles.eq(1); |
---|
127 | + equals(secondHandle.attr("aria-valuenow"), 50, "The aria-valuenow of the second handle is"); |
---|
128 | + firstHandle.simulate("keydown", { keyCode: $.ui.keyCode.RIGHT }); |
---|
129 | + equals(firstHandle.attr("aria-valuenow"), 11, "The aria-valuenow of the first handle after keydown RIGHT is" ); |
---|
130 | + firstHandle.simulate("keydown", { keyCode: $.ui.keyCode.LEFT }); |
---|
131 | + equals(firstHandle.attr("aria-valuenow"), 10, "The aria-valuenow of the first handle after keydown LEFT is" ); |
---|
132 | + secondHandle.simulate("keydown", { keyCode: $.ui.keyCode.LEFT }); |
---|
133 | + equals(secondHandle.attr("aria-valuenow"), 49, "The aria-valuenow of the second handle after keydown LEFT is"); |
---|
134 | + secondHandle.simulate("keydown", { keyCode: $.ui.keyCode.RIGHT }); |
---|
135 | + equals(secondHandle.attr("aria-valuenow"), 50, "The aria-valuenow of the second handle after keydown RIGHT is"); |
---|
136 | + |
---|
137 | + el.slider('destroy'); |
---|
138 | + |
---|
139 | }); |
---|
140 | |
---|
141 | })(jQuery); |
---|
142 | Index: demos/slider/default.html |
---|
143 | =================================================================== |
---|
144 | --- demos/slider/default.html (revision 3816) |
---|
145 | +++ demos/slider/default.html (working copy) |
---|
146 | @@ -14,7 +14,7 @@ |
---|
147 | </style> |
---|
148 | <script type="text/javascript"> |
---|
149 | $(function() { |
---|
150 | - $("#slider").slider(); |
---|
151 | + $("#slider").slider({unittext : "MB", label : "file size"}); |
---|
152 | }); |
---|
153 | </script> |
---|
154 | </head> |
---|
155 | Index: ui/jquery.ui.slider.js |
---|
156 | =================================================================== |
---|
157 | --- ui/jquery.ui.slider.js (revision 3816) |
---|
158 | +++ ui/jquery.ui.slider.js (working copy) |
---|
159 | @@ -30,7 +30,9 @@ |
---|
160 | range: false, |
---|
161 | step: 1, |
---|
162 | value: 0, |
---|
163 | - values: null |
---|
164 | + values: null, |
---|
165 | + unittext: null, |
---|
166 | + name: null |
---|
167 | }, |
---|
168 | _create: function() { |
---|
169 | |
---|
170 | @@ -122,7 +124,9 @@ |
---|
171 | }); |
---|
172 | |
---|
173 | this.handles.each(function(i) { |
---|
174 | - $(this).data("index.ui-slider-handle", i); |
---|
175 | + $(this).data("index.ui-slider-handle", i).attr("aria-valuenow", o.values ? o.values[i] : o.value); |
---|
176 | + if (self.options.unittext) |
---|
177 | + $(this).data("index.ui-slider-handle", i).attr("aria-valuetext", (o.values ? o.values[i] : o.value) + " " + self.options.unittext); |
---|
178 | }); |
---|
179 | |
---|
180 | this.handles.keydown(function(event) { |
---|
181 | @@ -200,11 +204,37 @@ |
---|
182 | } |
---|
183 | |
---|
184 | }); |
---|
185 | - |
---|
186 | + var ariaDefaults = {role: 'slider', |
---|
187 | + "aria-valuemin": this.options.min, |
---|
188 | + "aria-valuemax": this.options.max, |
---|
189 | + }; |
---|
190 | + |
---|
191 | + if (this.options.value && this.options.label) |
---|
192 | + ariaDefaults.title = this.options.label; |
---|
193 | + else if (!this.options.labels && this.options.label) { |
---|
194 | + this.handles.each(function(i,e) { |
---|
195 | + |
---|
196 | + if (self.options.range && i < 2) { |
---|
197 | + $(this).attr('title', self.options.label + " " + (i == 0 ? "min" : "max")); |
---|
198 | + } |
---|
199 | + else |
---|
200 | + $(this).attr('title', self.options.label + " " + (i + 1)) |
---|
201 | + }); |
---|
202 | + } |
---|
203 | + else if (this.options.labels) { |
---|
204 | + this.handles.each(function(i,e) { |
---|
205 | + if (self.options.labels[i]) |
---|
206 | + $(this).attr("title", self.options.labels[i]); |
---|
207 | + }); |
---|
208 | + } |
---|
209 | + |
---|
210 | + this.handles.attr(ariaDefaults); |
---|
211 | this._refreshValue(); |
---|
212 | |
---|
213 | this._animateOff = false; |
---|
214 | - |
---|
215 | + this._updateAriaLimit("min"); |
---|
216 | + this._updateAriaLimit("max"); |
---|
217 | + |
---|
218 | }, |
---|
219 | |
---|
220 | destroy: function() { |
---|
221 | @@ -390,6 +420,9 @@ |
---|
222 | var otherVal = this.values(index ? 0 : 1); |
---|
223 | if (allowed !== false) { |
---|
224 | this.values(index, newVal, true); |
---|
225 | + $(handle).attr("aria-valuenow",newVal); |
---|
226 | + if (this.options.unittext) |
---|
227 | + $(handle).attr("aria-valuetext", newVal + " " + this.options.unittext); |
---|
228 | } |
---|
229 | } |
---|
230 | |
---|
231 | @@ -403,6 +436,9 @@ |
---|
232 | }); |
---|
233 | if (allowed !== false) { |
---|
234 | this.value(newVal); |
---|
235 | + $(handle).attr("aria-valuenow",newVal); |
---|
236 | + if (this.options.unittext) |
---|
237 | + $(handle).attr("aria-valuetext", newVal + " " + this.options.unittext); |
---|
238 | } |
---|
239 | |
---|
240 | } |
---|
241 | @@ -512,6 +548,10 @@ |
---|
242 | this._refreshValue(); |
---|
243 | this._animateOff = false; |
---|
244 | break; |
---|
245 | + case 'min': |
---|
246 | + case 'max': |
---|
247 | + this._updateAriaLimit(key); |
---|
248 | + break; |
---|
249 | } |
---|
250 | |
---|
251 | }, |
---|
252 | @@ -591,6 +631,12 @@ |
---|
253 | } |
---|
254 | } |
---|
255 | lastValPercent = valPercent; |
---|
256 | + |
---|
257 | + $(this).attr('aria-valuenow', self.values(i)); |
---|
258 | + //since ranged thumbs can't pass each other, update ARIA min/max boundary for opposite handle |
---|
259 | + if (self.options.range && i < 2) { |
---|
260 | + self.handles.eq(i == 0 ? 1 : 0).attr(i == 0 ? 'aria-valuemin' : 'aria-valuemax', self.values(i)); |
---|
261 | + } |
---|
262 | }); |
---|
263 | } else { |
---|
264 | var value = this.value(), |
---|
265 | @@ -606,8 +652,22 @@ |
---|
266 | (oRange == "max") && (this.orientation == "horizontal") && this.range[animate ? 'animate' : 'css']({ width: (100 - valPercent) + '%' }, { queue: false, duration: o.animate }); |
---|
267 | (oRange == "min") && (this.orientation == "vertical") && this.range.stop(1,1)[animate ? 'animate' : 'css']({ height: valPercent + '%' }, o.animate); |
---|
268 | (oRange == "max") && (this.orientation == "vertical") && this.range[animate ? 'animate' : 'css']({ height: (100 - valPercent) + '%' }, { queue: false, duration: o.animate }); |
---|
269 | + |
---|
270 | + this.handle.attr('aria-valuenow', value); |
---|
271 | } |
---|
272 | |
---|
273 | + }, |
---|
274 | + |
---|
275 | + _updateAriaLimit : function(key) { |
---|
276 | + var value = this.options[key]; |
---|
277 | + if (this.range && this.options.values && this.options.values.length == 2) { |
---|
278 | + this.handles.eq(key == "min" ? 0 : 1).attr(key == "min" ? 'aria-valuemin' : 'aria-valuemax', value); |
---|
279 | + } |
---|
280 | + else { |
---|
281 | + this.handles.each(function(i) { |
---|
282 | + $(this).attr(key == "min" ? 'aria-valuemin' : 'aria-valuemax', value); |
---|
283 | + }); |
---|
284 | + } |
---|
285 | } |
---|
286 | |
---|
287 | }); |
---|
288 | Index: tests/unit/slider/slider_defaults.js |
---|
289 | =================================================================== |
---|
290 | --- tests/unit/slider/slider_defaults.js (revision 3816) |
---|
291 | +++ tests/unit/slider/slider_defaults.js (working copy) |
---|
292 | @@ -14,7 +14,8 @@ |
---|
293 | range: false, |
---|
294 | step: 1, |
---|
295 | value: 0, |
---|
296 | - values: null |
---|
297 | + values: null, |
---|
298 | + unittext: null |
---|
299 | }; |
---|
300 | |
---|
301 | commonWidgetTests('slider', { defaults: slider_defaults }); |
---|
302 | Index: demos/slider/range.html |
---|
303 | =================================================================== |
---|
304 | --- demos/slider/range.html (revision 3816) |
---|
305 | +++ demos/slider/range.html (working copy) |
---|
306 | @@ -19,6 +19,8 @@ |
---|
307 | min: 0, |
---|
308 | max: 500, |
---|
309 | values: [75, 300], |
---|
310 | + unittext: "dollar", |
---|
311 | + label: "price range", |
---|
312 | slide: function(event, ui) { |
---|
313 | $("#amount").val('$' + ui.values[0] + ' - $' + ui.values[1]); |
---|
314 | } |
---|
315 | @@ -29,7 +31,7 @@ |
---|
316 | </head> |
---|
317 | <body> |
---|
318 | |
---|
319 | -<div class="demo"> |
---|
320 | +<div class="demo" role="application"> |
---|
321 | |
---|
322 | <p> |
---|
323 | <label for="amount">Price range:</label> |
---|
324 | Index: tests/unit/slider/slider_core.js |
---|
325 | =================================================================== |
---|
326 | --- tests/unit/slider/slider_core.js (revision 3816) |
---|
327 | +++ tests/unit/slider/slider_core.js (working copy) |
---|
328 | @@ -289,4 +289,83 @@ |
---|
329 | el.slider("destroy"); |
---|
330 | }); |
---|
331 | |
---|
332 | +test("ARIA Min and Max", function() { |
---|
333 | + el = $('<div></div>'); |
---|
334 | + |
---|
335 | + options = { |
---|
336 | + max: 54, |
---|
337 | + min: 3, |
---|
338 | + orientation: 'horizontal', |
---|
339 | + value:15 |
---|
340 | + }; |
---|
341 | + |
---|
342 | + el.slider(options); |
---|
343 | + var handles = handle(); |
---|
344 | + |
---|
345 | + equals(handles.attr("aria-valuemax"), 54, "The ARIA-valuemax should be 54" ); |
---|
346 | + equals(handles.attr("aria-valuemin"), 3, "The ARIA-valuemin should be 3" ); |
---|
347 | + equals(handles.attr("aria-valuenow"), 15, "The ARIA-valuenow should be 15" ); |
---|
348 | + el.slider('destroy'); |
---|
349 | +}); |
---|
350 | + |
---|
351 | +test("ARIA Min and Max with default options", function() { |
---|
352 | + el = $('<div></div>'); |
---|
353 | + |
---|
354 | + el.slider(); |
---|
355 | + var handles = handle(); |
---|
356 | + |
---|
357 | + equals(handles.attr("aria-valuemax"), 100, "The ARIA max should be 100" ); |
---|
358 | + equals(handles.attr("aria-valuemin"), 0, "The ARIA min should be 0" ); |
---|
359 | + equals(handles.attr("aria-valuenow"), 0, "The ARIA-valuenow should be 0" ); |
---|
360 | + el.slider('destroy'); |
---|
361 | +}); |
---|
362 | + |
---|
363 | +test("ARIA-valuenow after keydown LEFT", function(){ |
---|
364 | + el = $('<div></div>'); |
---|
365 | + options = { |
---|
366 | + max: 5, |
---|
367 | + min: -5, |
---|
368 | + orientation: 'horizontal', |
---|
369 | + step: 1, |
---|
370 | + value: 4 |
---|
371 | + }; |
---|
372 | + el.slider(options); |
---|
373 | + var handles = handle(); |
---|
374 | + |
---|
375 | + el.slider(options.value, options.min + options.step); |
---|
376 | + |
---|
377 | + handle().simulate("keydown", { keyCode: $.ui.keyCode.LEFT }); |
---|
378 | + equals(handles.attr("aria-valuenow"), 3, "The ARIA-valuenow should be 3" ); |
---|
379 | + |
---|
380 | + handle().simulate("keydown", { keyCode: $.ui.keyCode.LEFT }); |
---|
381 | + equals(handles.attr("aria-valuenow"), 2, "The ARIA-valuenow should be 2" ); |
---|
382 | + |
---|
383 | + el.slider("destroy"); |
---|
384 | + |
---|
385 | +}); |
---|
386 | + |
---|
387 | +test("ARIA-valuenow after keydown RIGHT", function(){ |
---|
388 | + el = $('<div></div>'); |
---|
389 | + options = { |
---|
390 | + max: 5, |
---|
391 | + min: -5, |
---|
392 | + orientation: 'horizontal', |
---|
393 | + step: 1, |
---|
394 | + value: 2 |
---|
395 | + }; |
---|
396 | + el.slider(options); |
---|
397 | + var handles = handle(); |
---|
398 | + |
---|
399 | + el.slider(options.value, options.min + options.step); |
---|
400 | + |
---|
401 | + handle().simulate("keydown", { keyCode: $.ui.keyCode.RIGHT }); |
---|
402 | + equals(handles.attr("aria-valuenow"), 3, "The ARIA-valuenow should be 3" ); |
---|
403 | + |
---|
404 | + handle().simulate("keydown", { keyCode: $.ui.keyCode.RIGHT }); |
---|
405 | + equals(handles.attr("aria-valuenow"), 4, "The ARIA-valuenow should be 4" ); |
---|
406 | + |
---|
407 | + el.slider("destroy"); |
---|
408 | + |
---|
409 | +}); |
---|
410 | + |
---|
411 | })(jQuery); |
---|