← Back to branch summary

~bac/juju-gui/trunkcopy

« back to all changes in this revision

Viewing changes to lib/yui/docs/event/focus-example.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

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