|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Event</title> |
|
|
6 |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
|
7 |
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
|
8 |
<link rel="stylesheet" href="../assets/css/main.css"> |
|
|
9 |
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
|
10 |
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
|
11 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
12 |
|
|
|
13 |
</head> |
|
|
14 |
<body> |
|
|
15 |
<!-- |
|
|
16 |
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
|
17 |
--> |
|
|
18 |
<div id="doc"> |
|
|
19 |
<div id="hd"> |
|
|
20 |
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
|
21 |
</div> |
|
|
22 |
|
|
|
23 |
<a href="#toc" class="jump">Jump to Table of Contents</a> |
|
|
24 |
|
|
|
25 |
|
|
|
26 |
<h1>Event</h1> |
|
|
27 |
<div class="yui3-g"> |
|
|
28 |
<div class="yui3-u-3-4"> |
|
|
29 |
<div id="main"> |
|
|
30 |
<div class="content"><style scoped> |
|
|
31 |
.yui3-js-enabled .yui3-checkboxes-loading { display: none; } |
|
|
32 |
</style> |
|
|
33 |
|
|
|
34 |
<div class="intro"> |
|
|
35 |
<p> |
|
|
36 |
Using Progressive Enhancement to skin checkboxes with the help of the |
|
|
37 |
<a href="../../api/Loader.html">Loader</a>, |
|
|
38 |
<a href="../../api/module_classnamemanager.html">ClassNameManager |
|
|
39 |
Utility</a>, and the Event Utility's <code>focus</code> and |
|
|
40 |
<code>blur</code> events and the <code>delegate</code> method. |
|
|
41 |
</p> |
|
|
42 |
</div> |
|
|
43 |
|
|
|
44 |
<div class="example yui3-skin-sam"> |
|
|
45 |
<div id="checkboxes" class="yui3-checkboxes-loading"> |
|
|
46 |
<div> |
|
|
47 |
<label for="field-1">Field 1: </label> |
|
|
48 |
<span> |
|
|
49 |
<span> |
|
|
50 |
<input type="checkbox" id="field-1" name="field-1" value="1"> |
|
|
51 |
</span> |
|
|
52 |
</span> |
|
|
53 |
</div> |
|
|
54 |
<div> |
|
|
55 |
<label for="field-2">Field 2: </label> |
|
|
56 |
<span> |
|
|
57 |
<span> |
|
|
58 |
<input type="checkbox" id="field-2" name="field-2" value="2"> |
|
|
59 |
</span> |
|
|
60 |
</span> |
|
|
61 |
</div> |
|
|
62 |
<div> |
|
|
63 |
<label for="field-3">Field 3: </label> |
|
|
64 |
<span> |
|
|
65 |
<span> |
|
|
66 |
<input type="checkbox" id="field-3" name="field-3" value="3"> |
|
|
67 |
</span> |
|
|
68 |
</span> |
|
|
69 |
</div> |
|
|
70 |
</div> |
|
|
71 |
|
|
|
72 |
<script> |
|
|
73 |
YUI({ |
|
|
74 |
// Load the stylesheet for the skinned checkboxes via JavaScript, |
|
|
75 |
// since without JavaScript skinning of the checkboxes wouldn't |
|
|
76 |
// be possible. |
|
|
77 |
|
|
|
78 |
modules: { |
|
|
79 |
|
|
|
80 |
"checkboxcss": { |
|
|
81 |
type: "css", |
|
|
82 |
fullpath: "../assets/event/checkbox.css" |
|
|
83 |
}, |
|
|
84 |
|
|
|
85 |
"checkboxjs": { |
|
|
86 |
type: "js", |
|
|
87 |
fullpath: "../assets/event/checkbox.js", |
|
|
88 |
requires: ["classnamemanager", "event-focus", "node-event-delegate", "checkboxcss"] |
|
|
89 |
} |
|
|
90 |
|
|
|
91 |
} |
|
|
92 |
|
|
|
93 |
}).use("checkboxjs"); |
|
|
94 |
|
|
|
95 |
</script> |
|
|
96 |
|
|
|
97 |
</div> |
|
|
98 |
|
|
|
99 |
<h2 id="challenges">Challenges</h2> |
|
|
100 |
|
|
|
101 |
<p> |
|
|
102 |
There are a few challenges when trying to skin an HTML checkbox using CSS. To start, most of the |
|
|
103 |
<a href="http://developer.yahoo.com/yui/articles/gbs/#a-grade">A-grade browsers</a> don't provide |
|
|
104 |
support for CSS properties like <code>border</code> and <code>background</code> on the |
|
|
105 |
<code><input type="checkbox"></code> element. Additionally, IE 6 and IE 7 (Quirks Mode) |
|
|
106 |
lack support for attribute selectors — necessary to style the <code>checked</code> and |
|
|
107 |
<code>disabled</code> states. Additionally, IE 6 and 7 only support the <code>:focus</code> and |
|
|
108 |
<code>:active</code> pseudo classes on <code><a></code> elements, both of which are needed |
|
|
109 |
to style a checkbox when it is focused or depressed. |
|
|
110 |
</p> |
|
|
111 |
|
|
|
112 |
<h2 id="approach">Approach</h2> |
|
|
113 |
<p> |
|
|
114 |
Despite the shortcomings in CSS support, with a little extra markup and through the use of |
|
|
115 |
JavaScript it is possible to skin an <code><input type="checkbox"></code> element |
|
|
116 |
consistently well in all of the |
|
|
117 |
<a href="http://developer.yahoo.com/yui/articles/gbs/#a-grade">A-grade browsers</a>. |
|
|
118 |
</p> |
|
|
119 |
|
|
|
120 |
|
|
|
121 |
<h4 id="markup">Markup</h4> |
|
|
122 |
<p> |
|
|
123 |
Since CSS support for the <code><input type="checkbox"></code> element is lacking, wrap |
|
|
124 |
<code><input type="checkbox"></code> elements in one or more inline elements to provide the |
|
|
125 |
necessary hooks for styling. In this example, each <code><input type="checkbox"></code> |
|
|
126 |
element is wrapped by two <code><span></code>s. |
|
|
127 |
</p> |
|
|
128 |
|
|
|
129 |
<pre class="code prettyprint"><span> |
|
|
130 |
<span> |
|
|
131 |
<input type="checkbox"> |
|
|
132 |
</span> |
|
|
133 |
</span></pre> |
|
|
134 |
|
|
|
135 |
|
|
|
136 |
<h4 id="css">CSS</h4> |
|
|
137 |
<p> |
|
|
138 |
To style each checkbox, a class name of <code>yui3-checkbox</code> will be applied to the |
|
|
139 |
outtermost <code><span></code> wrapping each <code><input type="checkbox"></code> |
|
|
140 |
element. An additional class will be used to represent the various states of each checkbox. The |
|
|
141 |
class name for each state will follow a consistent pattern: <code>yui3-checkbox-[state]</code>. |
|
|
142 |
For this example, the following state-based class names will be used: |
|
|
143 |
</p> |
|
|
144 |
<dl> |
|
|
145 |
<dt><code>yui3-checkbox-focus</code></dt> |
|
|
146 |
<dd>The checkbox has focus</dd> |
|
|
147 |
<dt><code>yui3-checkbox-active</code></dt> |
|
|
148 |
<dd>The checkbox is active (pressed)</dd> |
|
|
149 |
<dt><code>yui3-checkbox-checked</code></dt> |
|
|
150 |
<dd>The checkbox is checked</dd> |
|
|
151 |
</dl> |
|
|
152 |
<p> |
|
|
153 |
The styles for each checkbox comes together as follows: |
|
|
154 |
</p> |
|
|
155 |
|
|
|
156 |
<pre class="code prettyprint">.yui3-checkbox { |
|
|
157 |
display: -moz-inline-stack; /* Gecko < 1.9, since it doesn't support "inline-block" */ |
|
|
158 |
display: inline-block; /* IE, Opera and Webkit, and Gecko 1.9 */ |
|
|
159 |
width: 10px; |
|
|
160 |
height: 10px; |
|
|
161 |
border: inset 2px #999; |
|
|
162 |
background-color: #fff; /* Need to set a background color or IE won't get mouse events */ |
|
|
163 |
|
|
|
164 |
/* |
|
|
165 |
Necessary for IE 6 (Quirks and Standards Mode) and IE 7 (Quirks Mode), since |
|
|
166 |
they don't support use of negative margins without relative positioning. |
|
|
167 |
*/ |
|
|
168 |
_position: relative; |
|
|
169 |
} |
|
|
170 |
|
|
|
171 |
.yui3-checkbox span { |
|
|
172 |
display: block; |
|
|
173 |
height: 14px; |
|
|
174 |
width: 12px; |
|
|
175 |
overflow: hidden; |
|
|
176 |
|
|
|
177 |
/* Position the checkmark for Gecko, Opera and Webkit and IE 7 (Strict Mode). */ |
|
|
178 |
margin: -5px 0 0 1px; |
|
|
179 |
|
|
|
180 |
/* Position the checkmark for IE 6 (Strict and Quirks Mode) and IE 7 (Quirks Mode).*/ |
|
|
181 |
_margin: 0; |
|
|
182 |
_position: absolute; |
|
|
183 |
_top: -5px; |
|
|
184 |
_left: 1px; |
|
|
185 |
|
|
|
186 |
} |
|
|
187 |
|
|
|
188 |
/* For Gecko < 1.9: Positions the checkbox on the same line as its corresponding label. */ |
|
|
189 |
.yui3-checkbox span:after { |
|
|
190 |
content: "."; |
|
|
191 |
visibility: hidden; |
|
|
192 |
line-height: 2; |
|
|
193 |
} |
|
|
194 |
|
|
|
195 |
/* |
|
|
196 |
Hide the actual checkbox offscreen so that it is out of view, but still accessible via |
|
|
197 |
the keyboard. |
|
|
198 |
*/ |
|
|
199 |
.yui3-checkbox input { |
|
|
200 |
position: absolute; |
|
|
201 |
left: -10000px; |
|
|
202 |
} |
|
|
203 |
|
|
|
204 |
.yui3-checkbox-focus { |
|
|
205 |
border-color: #39f; |
|
|
206 |
background-color: #9cf; |
|
|
207 |
} |
|
|
208 |
|
|
|
209 |
.yui3-checkbox-active { |
|
|
210 |
background-color: #ccc; |
|
|
211 |
} |
|
|
212 |
|
|
|
213 |
.yui3-checkbox-checked span { |
|
|
214 |
/* Draw a custom checkmark for the checked state using a background image. */ |
|
|
215 |
background: url(checkmark.png) no-repeat; |
|
|
216 |
}</pre> |
|
|
217 |
|
|
|
218 |
|
|
|
219 |
<h4 id="javascript">JavaScript</h4> |
|
|
220 |
|
|
|
221 |
<p> |
|
|
222 |
Application and removal of the state-based class names will be facilitated by JavaScript event |
|
|
223 |
handlers. Each event handler will track the state of the |
|
|
224 |
<code><input type="checkbox"></code> element, and apply and remove corresponding |
|
|
225 |
state-based class names from its outtermost <code><span></code> — |
|
|
226 |
making it easy to style each state. And since each JavaScript is required for state management, |
|
|
227 |
the stylesheet for the skinned checkboxes will only be added to the page when JavaScript is |
|
|
228 |
enabled. This will ensure that each checkbox works correctly with and without JavaScript enabled. |
|
|
229 |
</p> |
|
|
230 |
|
|
|
231 |
<p> |
|
|
232 |
Since there could easily be many instances of a skinned checkbox on the page, all event |
|
|
233 |
listeners will be attached to the containing element for all checkboxes. Each listener will |
|
|
234 |
listen for events as they bubble up from each checkbox. Relying on event bubbling will improve the |
|
|
235 |
overall performance of the page by reducing the number of event handlers. |
|
|
236 |
</p> |
|
|
237 |
|
|
|
238 |
<p> |
|
|
239 |
Since the DOM <code>focus</code> and <code>blur</code> events do not bubble, use the Event Utility's |
|
|
240 |
<a href="../../api/YUI.html#event_focus"><code>focus</code></a> and |
|
|
241 |
<a href="../../api/YUI.html#event_focus"><code>blur</code></a> custom events, as an alternative to |
|
|
242 |
attaching discrete focus and blur event handlers to the <code><input type="checkbox"></code> |
|
|
243 |
element of each skinned checkbox. The |
|
|
244 |
<a href="../../api/YUI.html#event_focus"><code>focus</code></a> and |
|
|
245 |
<a href="../../api/YUI.html#event_focus"><code>blur</code></a> custom events leverage |
|
|
246 |
capture-phase DOM event listeners, making it possible to attach a single focus and blur event |
|
|
247 |
listener on the containing element of each checkbox — thereby increasing the performance |
|
|
248 |
of the page. The complete script for the example comes together as follows: |
|
|
249 |
</p> |
|
|
250 |
|
|
|
251 |
<pre class="code prettyprint">YUI().use("*", function(Y) { |
|
|
252 |
|
|
|
253 |
var UA = Y.UA, |
|
|
254 |
getClassName = Y.ClassNameManager.getClassName, |
|
|
255 |
sCheckboxFocusClass = getClassName("checkbox", "focus"), // Create yui3-checkbox-focus |
|
|
256 |
sCheckboxCheckedClass = getClassName("checkbox", "checked"), // Create yui3-checkbox-checked |
|
|
257 |
sCheckboxActiveClass = getClassName("checkbox", "active"), // Create yui3-checkbox-active |
|
|
258 |
bKeyListenersInitialized = false, |
|
|
259 |
bMouseListenersInitialized = false, |
|
|
260 |
forAttr = (UA.ie && UA.ie < 8) ? "htmlFor" : "for", |
|
|
261 |
bBlockDocumentMouseUp = false, |
|
|
262 |
bBlockClearActive = false, |
|
|
263 |
bBlockBlur = false, |
|
|
264 |
oActiveCheckbox; |
|
|
265 |
|
|
|
266 |
|
|
|
267 |
var initKeyListeners = function () { |
|
|
268 |
|
|
|
269 |
this.delegate("keydown", onCheckboxKeyDown, ".yui3-checkbox"); |
|
|
270 |
this.delegate("click", onCheckboxClick, ".yui3-checkbox"); |
|
|
271 |
this.delegate("blur", onCheckboxBlur, "input[type=checkbox]"); |
|
|
272 |
|
|
|
273 |
bKeyListenersInitialized = true; |
|
|
274 |
|
|
|
275 |
}; |
|
|
276 |
|
|
|
277 |
|
|
|
278 |
var initMouseListeners = function () { |
|
|
279 |
|
|
|
280 |
this.delegate("mouseover", onCheckboxMouseOver, ".yui3-checkbox"); |
|
|
281 |
this.delegate("mouseout", onCheckboxMouseOut, ".yui3-checkbox-active"); |
|
|
282 |
this.get("ownerDocument").on("mouseup", onDocumentMouseUp); |
|
|
283 |
|
|
|
284 |
bMouseListenersInitialized = true; |
|
|
285 |
|
|
|
286 |
}; |
|
|
287 |
|
|
|
288 |
|
|
|
289 |
var getCheckbox = function (node) { |
|
|
290 |
|
|
|
291 |
return (node.hasClass("yui3-checkbox") ? node : node.ancestor(".yui3-checkbox")); |
|
|
292 |
|
|
|
293 |
}; |
|
|
294 |
|
|
|
295 |
|
|
|
296 |
var getCheckboxForLabel = function (label) { |
|
|
297 |
|
|
|
298 |
var sID = label.getAttribute(forAttr), |
|
|
299 |
oInput, |
|
|
300 |
oCheckbox; |
|
|
301 |
|
|
|
302 |
if (sID) { |
|
|
303 |
|
|
|
304 |
oInput = Y.one("#" + sID); |
|
|
305 |
|
|
|
306 |
if (oInput) { |
|
|
307 |
oCheckbox = getCheckbox(oInput); |
|
|
308 |
} |
|
|
309 |
|
|
|
310 |
} |
|
|
311 |
|
|
|
312 |
return oCheckbox; |
|
|
313 |
|
|
|
314 |
}; |
|
|
315 |
|
|
|
316 |
|
|
|
317 |
var updateCheckedState = function (input) { |
|
|
318 |
|
|
|
319 |
var oCheckbox = getCheckbox(input); |
|
|
320 |
|
|
|
321 |
if (input.get("checked")) { |
|
|
322 |
oCheckbox.addClass(sCheckboxCheckedClass); |
|
|
323 |
} |
|
|
324 |
else { |
|
|
325 |
oCheckbox.removeClass(sCheckboxCheckedClass); |
|
|
326 |
} |
|
|
327 |
|
|
|
328 |
}; |
|
|
329 |
|
|
|
330 |
|
|
|
331 |
var setActiveCheckbox = function (checkbox) { |
|
|
332 |
|
|
|
333 |
checkbox.addClass(sCheckboxActiveClass); |
|
|
334 |
oActiveCheckbox = checkbox; |
|
|
335 |
|
|
|
336 |
}; |
|
|
337 |
|
|
|
338 |
|
|
|
339 |
var clearActiveCheckbox = function () { |
|
|
340 |
|
|
|
341 |
if (oActiveCheckbox) { |
|
|
342 |
oActiveCheckbox.removeClass(sCheckboxActiveClass); |
|
|
343 |
oActiveCheckbox = null; |
|
|
344 |
} |
|
|
345 |
|
|
|
346 |
}; |
|
|
347 |
|
|
|
348 |
|
|
|
349 |
var onCheckboxMouseOver = function (event, matchedEl) { |
|
|
350 |
|
|
|
351 |
if (oActiveCheckbox && oActiveCheckbox.compareTo(this)) { |
|
|
352 |
oActiveCheckbox.addClass(sCheckboxActiveClass); |
|
|
353 |
} |
|
|
354 |
|
|
|
355 |
}; |
|
|
356 |
|
|
|
357 |
|
|
|
358 |
var onCheckboxMouseOut = function (event) { |
|
|
359 |
|
|
|
360 |
this.removeClass(sCheckboxActiveClass); |
|
|
361 |
|
|
|
362 |
}; |
|
|
363 |
|
|
|
364 |
|
|
|
365 |
var onDocumentMouseUp = function (event) { |
|
|
366 |
|
|
|
367 |
var oCheckbox; |
|
|
368 |
|
|
|
369 |
if (!bBlockDocumentMouseUp) { |
|
|
370 |
|
|
|
371 |
oCheckbox = getCheckbox(event.target); |
|
|
372 |
|
|
|
373 |
if ((oCheckbox && !oCheckbox.compareTo(oActiveCheckbox)) || !oCheckbox) { |
|
|
374 |
clearActiveCheckbox(); |
|
|
375 |
} |
|
|
376 |
|
|
|
377 |
} |
|
|
378 |
|
|
|
379 |
bBlockDocumentMouseUp = false; |
|
|
380 |
|
|
|
381 |
}; |
|
|
382 |
|
|
|
383 |
|
|
|
384 |
var onCheckboxFocus = function (event) { |
|
|
385 |
|
|
|
386 |
// Remove the focus style from any checkbox that might still have it |
|
|
387 |
|
|
|
388 |
var oCheckbox = Y.one("#checkboxes").one(".yui3-checkbox-focus"); |
|
|
389 |
|
|
|
390 |
if (oCheckbox) { |
|
|
391 |
oCheckbox.removeClass(sCheckboxFocusClass); |
|
|
392 |
} |
|
|
393 |
|
|
|
394 |
// Defer adding key-related and click event listeners until |
|
|
395 |
// one of the checkboxes is initially focused. |
|
|
396 |
|
|
|
397 |
if (!bKeyListenersInitialized) { |
|
|
398 |
initKeyListeners.call(event.container); |
|
|
399 |
} |
|
|
400 |
|
|
|
401 |
var oCheckbox = getCheckbox(this); |
|
|
402 |
|
|
|
403 |
oCheckbox.addClass(sCheckboxFocusClass); |
|
|
404 |
|
|
|
405 |
}; |
|
|
406 |
|
|
|
407 |
|
|
|
408 |
var onCheckboxBlur = function (event) { |
|
|
409 |
|
|
|
410 |
if (bBlockBlur) { |
|
|
411 |
bBlockBlur = false; |
|
|
412 |
return; |
|
|
413 |
} |
|
|
414 |
|
|
|
415 |
var oCheckbox = getCheckbox(this); |
|
|
416 |
|
|
|
417 |
oCheckbox.removeClass(sCheckboxFocusClass); |
|
|
418 |
|
|
|
419 |
if (!bBlockClearActive && oCheckbox.compareTo(oActiveCheckbox)) { |
|
|
420 |
clearActiveCheckbox(); |
|
|
421 |
} |
|
|
422 |
|
|
|
423 |
bBlockClearActive = false; |
|
|
424 |
|
|
|
425 |
}; |
|
|
426 |
|
|
|
427 |
|
|
|
428 |
var onCheckboxMouseDown = function (event) { |
|
|
429 |
|
|
|
430 |
// Defer adding mouse-related and click event listeners until |
|
|
431 |
// the user mouses down on one of the checkboxes. |
|
|
432 |
|
|
|
433 |
if (!bMouseListenersInitialized) { |
|
|
434 |
initMouseListeners.call(event.container); |
|
|
435 |
} |
|
|
436 |
|
|
|
437 |
var oCheckbox, |
|
|
438 |
oInput; |
|
|
439 |
|
|
|
440 |
|
|
|
441 |
if (this.get("nodeName").toLowerCase() === "label") { |
|
|
442 |
|
|
|
443 |
// If the target of the event was the checkbox's label element, the |
|
|
444 |
// label will dispatch a click event to the checkbox, meaning the |
|
|
445 |
// "onCheckboxClick" handler will be called twice. For that reason |
|
|
446 |
// it is necessary to block the "onDocumentMouseUp" handler from |
|
|
447 |
// clearing the active state, so that a reference to the active |
|
|
448 |
// checkbox still exists the second time the "onCheckboxClick" |
|
|
449 |
// handler is called. |
|
|
450 |
|
|
|
451 |
bBlockDocumentMouseUp = true; |
|
|
452 |
|
|
|
453 |
// When the user clicks the label instead of the checkbox itself, |
|
|
454 |
// the checkbox will be blurred if it has focus. Since the |
|
|
455 |
// "onCheckboxBlur" handler clears the active state it is |
|
|
456 |
// necessary to block the clearing of the active state when the |
|
|
457 |
// label is clicked instead of the checkbox itself. |
|
|
458 |
|
|
|
459 |
bBlockClearActive = true; |
|
|
460 |
|
|
|
461 |
oCheckbox = getCheckboxForLabel(this); |
|
|
462 |
|
|
|
463 |
} |
|
|
464 |
else { |
|
|
465 |
|
|
|
466 |
oCheckbox = this; |
|
|
467 |
|
|
|
468 |
} |
|
|
469 |
|
|
|
470 |
// Need to focus the input manually for two reasons: |
|
|
471 |
// 1) Mousing down on a label in Webkit doesn't focus its |
|
|
472 |
// associated checkbox |
|
|
473 |
// 2) By default checkboxes are focused when the user mouses |
|
|
474 |
// down on them. However, since the actually checkbox is |
|
|
475 |
// obscurred by the two span elements that are used to |
|
|
476 |
// style it, the checkbox wont' receive focus as it was |
|
|
477 |
// never the actual target of the mousedown event. |
|
|
478 |
|
|
|
479 |
oInput = oCheckbox.one("input"); |
|
|
480 |
|
|
|
481 |
|
|
|
482 |
// Calling Event.preventDefault won't block the blurring of the |
|
|
483 |
// currently focused element in IE, so we'll use the "bBlockBlur" |
|
|
484 |
// variable to stop the code in the blur event handler |
|
|
485 |
// from executing. |
|
|
486 |
|
|
|
487 |
bBlockBlur = (UA.ie && oInput.get("checked")); |
|
|
488 |
|
|
|
489 |
|
|
|
490 |
oInput.focus(); |
|
|
491 |
|
|
|
492 |
setActiveCheckbox(oCheckbox); |
|
|
493 |
|
|
|
494 |
// Need to call preventDefault because by default mousing down on |
|
|
495 |
// an element will blur the element in the document that currently |
|
|
496 |
// has focus--in this case, the input element that was |
|
|
497 |
// just focused. |
|
|
498 |
|
|
|
499 |
event.preventDefault(); |
|
|
500 |
|
|
|
501 |
}; |
|
|
502 |
|
|
|
503 |
|
|
|
504 |
var onCheckboxClick = function (event) { |
|
|
505 |
|
|
|
506 |
var oInput; |
|
|
507 |
|
|
|
508 |
if (this.compareTo(oActiveCheckbox)) { |
|
|
509 |
|
|
|
510 |
oInput = this.one("input"); |
|
|
511 |
|
|
|
512 |
if (!event.target.compareTo(oInput)) { |
|
|
513 |
|
|
|
514 |
// If the click event was fired via the mouse the checked |
|
|
515 |
// state will have to be manually updated since the input |
|
|
516 |
// is hidden offscreen and therefore couldn't be the |
|
|
517 |
// target of the click. |
|
|
518 |
|
|
|
519 |
oInput.set("checked", (!oInput.get("checked"))); |
|
|
520 |
|
|
|
521 |
} |
|
|
522 |
|
|
|
523 |
updateCheckedState(oInput); |
|
|
524 |
clearActiveCheckbox(); |
|
|
525 |
|
|
|
526 |
} |
|
|
527 |
|
|
|
528 |
}; |
|
|
529 |
|
|
|
530 |
|
|
|
531 |
var onCheckboxKeyDown = function (event) { |
|
|
532 |
|
|
|
533 |
// Style the checkbox as being active when the user presses the |
|
|
534 |
// space bar |
|
|
535 |
|
|
|
536 |
if (event.keyCode === 32) { |
|
|
537 |
setActiveCheckbox(this); |
|
|
538 |
} |
|
|
539 |
|
|
|
540 |
}; |
|
|
541 |
|
|
|
542 |
Y.all("#checkboxes>div>span").addClass("yui3-checkbox"); |
|
|
543 |
|
|
|
544 |
// Remove the "yui3-checkboxes-loading" class used to hide the |
|
|
545 |
// checkboxes now that the checkboxes have been skinned. |
|
|
546 |
|
|
|
547 |
Y.one("#checkboxes").removeClass("yui3-checkboxes-loading"); |
|
|
548 |
|
|
|
549 |
// Add the minimum number of event listeners needed to start, bind the |
|
|
550 |
// rest when needed |
|
|
551 |
|
|
|
552 |
Y.delegate("mousedown", onCheckboxMouseDown, "#checkboxes", ".yui3-checkbox,label"); |
|
|
553 |
Y.delegate("focus", onCheckboxFocus, "#checkboxes", "input[type=checkbox]"); |
|
|
554 |
|
|
|
555 |
});</pre> |
|
|
556 |
|
|
|
557 |
|
|
|
558 |
<h4 id="progressive-enhancement">Progressive Enhancement</h4> |
|
|
559 |
<p> |
|
|
560 |
To account for the scenario where the user has CSS enabled in their browser but JavaScript |
|
|
561 |
is disabled, the CSS used to style the checkboxes will be loaded via JavaScript |
|
|
562 |
using the YUI instance's <a href="http://developer.yahoo.com/yui/3/yui#loader">built-in Loader</a>. |
|
|
563 |
</p> |
|
|
564 |
<pre class="code prettyprint">YUI({ |
|
|
565 |
|
|
|
566 |
base: "${buildDirectory}", |
|
|
567 |
|
|
|
568 |
// Load the stylesheet for the skinned checkboxes via JavaScript, |
|
|
569 |
// since without JavaScript skinning of the checkboxes wouldn't |
|
|
570 |
// be possible. |
|
|
571 |
|
|
|
572 |
modules: { |
|
|
573 |
|
|
|
574 |
"checkboxcss": { |
|
|
575 |
type: "css", |
|
|
576 |
fullpath: "${assetsDirectory}checkbox.css" |
|
|
577 |
}, |
|
|
578 |
"checkboxjs": { |
|
|
579 |
type: "js", |
|
|
580 |
fullpath: "${assetsDirectory}checkbox.js", |
|
|
581 |
requires: ["classnamemanager", "event-focus", "node-event-delegate", "checkboxcss"] |
|
|
582 |
} |
|
|
583 |
|
|
|
584 |
} |
|
|
585 |
|
|
|
586 |
}).use("checkboxjs");</pre> |
|
|
587 |
|
|
|
588 |
|
|
|
589 |
<p> |
|
|
590 |
To prevent the user from seeing a flash unstyled content when JavaScript is enabled, |
|
|
591 |
a style rule is created using YUI's <code>yui3-js-enabled</code> class name that will temporarily |
|
|
592 |
hide the markup while the JavaScript and CSS are in the process of loading. For more on using the |
|
|
593 |
<code>yui3-js-enabled</code> class name, see the |
|
|
594 |
<a href="../../widget/#progressive">HIDING PROGRESSIVELY ENHANCED MARKUP</a> section of the |
|
|
595 |
<a href="../../widget/">YUI Widget landing page</a>. |
|
|
596 |
</p> |
|
|
597 |
<pre class="code prettyprint">.yui3-js-enabled .yui3-checkboxes-loading { |
|
|
598 |
display: none; |
|
|
599 |
}</pre> |
|
|
600 |
|
|
|
601 |
</div> |
|
|
602 |
</div> |
|
|
603 |
</div> |
|
|
604 |
|
|
|
605 |
<div class="yui3-u-1-4"> |
|
|
606 |
<div class="sidebar"> |
|
|
607 |
|
|
|
608 |
<div id="toc" class="sidebox"> |
|
|
609 |
<div class="hd"> |
|
|
610 |
<h2 class="no-toc">Table of Contents</h2> |
|
|
611 |
</div> |
|
|
612 |
|
|
|
613 |
<div class="bd"> |
|
|
614 |
<ul class="toc"> |
|
|
615 |
<li> |
|
|
616 |
<a href="#challenges">Challenges</a> |
|
|
617 |
</li> |
|
|
618 |
<li> |
|
|
619 |
<a href="#approach">Approach</a> |
|
|
620 |
<ul class="toc"> |
|
|
621 |
<li> |
|
|
622 |
<a href="#markup">Markup</a> |
|
|
623 |
</li> |
|
|
624 |
<li> |
|
|
625 |
<a href="#css">CSS</a> |
|
|
626 |
</li> |
|
|
627 |
<li> |
|
|
628 |
<a href="#javascript">JavaScript</a> |
|
|
629 |
</li> |
|
|
630 |
<li> |
|
|
631 |
<a href="#progressive-enhancement">Progressive Enhancement</a> |
|
|
632 |
</li> |
|
|
633 |
</ul> |
|
|
634 |
</li> |
|
|
635 |
</ul> |
|
|
636 |
</div> |
|
|
637 |
</div> |
|
|
638 |
|
|
|
639 |
|
|
|
640 |
|
|
|
641 |
<div class="sidebox"> |
|
|
642 |
<div class="hd"> |
|
|
643 |
<h2 class="no-toc">Examples</h2> |
|
|
644 |
</div> |
|
|
645 |
|
|
|
646 |
<div class="bd"> |
|
|
647 |
<ul class="examples"> |
|
|
648 |
|
|
|
649 |
|
|
|
650 |
<li data-description="Use the Event Utility to attach simple DOM event handlers."> |
|
|
651 |
<a href="basic-example.html">Simple DOM Events</a> |
|
|
652 |
</li> |
|
|
653 |
|
|
|
654 |
|
|
|
655 |
|
|
|
656 |
<li data-description="Using the synthetic event API to create a DOM event that fires in response to arrow keys being pressed."> |
|
|
657 |
<a href="synth-example.html">Creating an Arrow Event for DOM Subscription</a> |
|
|
658 |
</li> |
|
|
659 |
|
|
|
660 |
|
|
|
661 |
|
|
|
662 |
<li data-description="Supporting cross-device swipe gestures, using the event-move gesture events"> |
|
|
663 |
<a href="swipe-example.html">Supporting A Swipe Left Gesture</a> |
|
|
664 |
</li> |
|
|
665 |
|
|
|
666 |
|
|
|
667 |
|
|
|
668 |
|
|
|
669 |
|
|
|
670 |
|
|
|
671 |
|
|
|
672 |
|
|
|
673 |
|
|
|
674 |
|
|
|
675 |
|
|
|
676 |
|
|
|
677 |
</ul> |
|
|
678 |
</div> |
|
|
679 |
</div> |
|
|
680 |
|
|
|
681 |
|
|
|
682 |
|
|
|
683 |
<div class="sidebox"> |
|
|
684 |
<div class="hd"> |
|
|
685 |
<h2 class="no-toc">Examples That Use This Component</h2> |
|
|
686 |
</div> |
|
|
687 |
|
|
|
688 |
<div class="bd"> |
|
|
689 |
<ul class="examples"> |
|
|
690 |
|
|
|
691 |
|
|
|
692 |
|
|
|
693 |
|
|
|
694 |
|
|
|
695 |
|
|
|
696 |
|
|
|
697 |
|
|
|
698 |
<li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event's delegation support and mouseenter event, along with the Overlay widget and Node's support for the WAI-ARIA Roles and States."> |
|
|
699 |
<a href="../node-focusmanager/node-focusmanager-button.html">Accessible Menu Button</a> |
|
|
700 |
</li> |
|
|
701 |
|
|
|
702 |
|
|
|
703 |
|
|
|
704 |
<li data-description="Shows how to extend the base widget class, to create your own Widgets."> |
|
|
705 |
<a href="../widget/widget-extend.html">Extending the Base Widget Class</a> |
|
|
706 |
</li> |
|
|
707 |
|
|
|
708 |
|
|
|
709 |
|
|
|
710 |
<li data-description="Example Photo Browser application."> |
|
|
711 |
<a href="../dd/photo-browser.html">Photo Browser</a> |
|
|
712 |
</li> |
|
|
713 |
|
|
|
714 |
|
|
|
715 |
|
|
|
716 |
<li data-description="Portal style example using Drag & Drop Event Bubbling and Animation."> |
|
|
717 |
<a href="../dd/portal-drag.html">Portal Style Example</a> |
|
|
718 |
</li> |
|
|
719 |
|
|
|
720 |
|
|
|
721 |
|
|
|
722 |
<li data-description="Use IO to request data over HTTP."> |
|
|
723 |
<a href="../io/get.html">HTTP GET to request data</a> |
|
|
724 |
</li> |
|
|
725 |
|
|
|
726 |
|
|
|
727 |
</ul> |
|
|
728 |
</div> |
|
|
729 |
</div> |
|
|
730 |
|
|
|
731 |
</div> |
|
|
732 |
</div> |
|
|
733 |
</div> |
|
|
734 |
</div> |
|
|
735 |
|
|
|
736 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
737 |
<script>prettyPrint();</script> |
|
|
738 |
|
|
|
739 |
<script> |
|
|
740 |
YUI.Env.Tests = { |
|
|
741 |
examples: [], |
|
|
742 |
project: '../assets', |
|
|
743 |
assets: '../assets/event', |
|
|
744 |
name: 'event', |
|
|
745 |
title: 'Event', |
|
|
746 |
newWindow: '', |
|
|
747 |
auto: false |
|
|
748 |
}; |
|
|
749 |
YUI.Env.Tests.examples.push('basic-example'); |
|
|
750 |
YUI.Env.Tests.examples.push('synth-example'); |
|
|
751 |
YUI.Env.Tests.examples.push('swipe-example'); |
|
|
752 |
YUI.Env.Tests.examples.push('node-focusmanager-button'); |
|
|
753 |
YUI.Env.Tests.examples.push('widget-extend'); |
|
|
754 |
YUI.Env.Tests.examples.push('photo-browser'); |
|
|
755 |
YUI.Env.Tests.examples.push('portal-drag'); |
|
|
756 |
YUI.Env.Tests.examples.push('get'); |
|
|
757 |
|
|
|
758 |
</script> |
|
|
759 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
760 |
|
|
|
761 |
|
|
|
762 |
|
|
|
763 |
</body> |
|
|
764 |
</html> |