<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library Examples: Event: Skinning via Progressive Enhancement using the Event Utility and the Loader</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
/* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<style type="text/css">
.yui-checkboxes-loading #checkboxes {
display: none;
}
</style>
<script type="text/javascript">
// Hide the checkboxes if JavaScript is enabled to prevent
// the user from seeing a flash of unstyled content while
// the JavaScript for the checkboxes is being loaded.
document.documentElement.className = "yui-checkboxes-loading";
</script>
</head>
<body id="yahoo-com" class=" yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
<div id="ygunav">
<p>
<em>
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>
</em>
</p>
<form action="http://search.yahoo.com/search" id="sitesearchform">
<input name="vs" type="hidden" value="developer.yahoo.com">
<input name="vs" type="hidden" value="yuiblog.com">
<div id="sitesearch">
<label for="searchinput">Site Search (YDN & YUIBlog): </label>
<input type="text" id="searchinput" name="p">
<input type="submit" value="Search" id="searchsubmit" class="ygbt">
</div>
</form>
</div>
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div>
<div id="pagetitle"><h1>YUI Library Examples: Event: Skinning via Progressive Enhancement using the Event Utility and the Loader</h1></div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-ge">
<div class="yui-u first example" id="main">
<h2>Event: Skinning via Progressive Enhancement using the Event Utility and the Loader</h2>
<div id="example" class="promo">
<div class="example-intro">
<p>
Using Progressive Enhancement to skin checkboxes with the help of the
<a href="../../api/Loader.html">Loader</a>,
<a href="../../api/module_classnamemanager.html">ClassNameManager Utility</a>,
and the Event Utility's <code>focus</code> and <code>blur</code> events and the
<code>delegate</code> method.
</p> </div>
<div class="module example-container ">
<div class="hd exampleHd">
<p class="newWindowButton yui-skin-sam">
<a href="event-focus-blur_clean.html" target="_blank">View example in new window.</a>
</p>
</div> <div id="example-canvas" class="bd">
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="checkboxes">
<div>
<label for="field-1">Field 1: </label>
<span>
<span>
<input type="checkbox" id="field-1" name="field-1" value="1">
</span>
</span>
</div>
<div>
<label for="field-2">Field 2: </label>
<span>
<span>
<input type="checkbox" id="field-2" name="field-2" value="2">
</span>
</span>
</div>
<div>
<label for="field-3">Field 3: </label>
<span>
<span>
<input type="checkbox" id="field-3" name="field-3" value="3">
</span>
</span>
</div>
</div>
<script type="text/javascript">
YUI({
base: "../../build/",
// Load the stylesheet for the skinned checkboxes via JavaScript,
// since without JavaScript skinning of the checkboxes wouldn't
// be possible.
modules: {
"checkboxcss": {
type: "css",
fullpath: "assets/checkbox.css"
},
"checkboxjs": {
type: "js",
fullpath: "assets/checkbox.js",
requires: ["classnamemanager", "event-focus", "node-event-delegate", "checkboxcss"]
}
}
}).use("checkboxjs", function(Y, result) {
// The callback supplied to use() will be executed regardless of
// whether the operation was successful or not. The second parameter
// is a result object that has the status of the operation. We can
// use this to try to recover from failures or timeouts.
if (!result.success) {
Y.log("Load failure: " + result.msg, "warn", "Example");
// Show the checkboxes if the loader failed that way the original
// unskinned checkboxes will be visible so that the user can
// interact with them either way.
document.documentElement.className = "";
}
});
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</div>
</div>
</div>
<h3>Challenges</h3>
<p>
There are a few challenges when trying to skin an HTML checkbox using CSS. To start, most of the
<a href="http://developer.yahoo.com/yui/articles/gbs/#a-grade">A-grade browsers</a> don't provide
support for CSS properties like <code>border</code> and <code>background</code> on the
<code><input type="checkbox"></code> element. Additionally, IE 6 and IE 7 (Quirks Mode)
lack support for attribute selectors — necessary to style the <code>checked</code> and
<code>disabled</code> states. Additionally, IE 6 and 7 only support the <code>:focus</code> and
<code>:active</code> pseudo classes on <code><a></code> elements, both of which are needed
to style a checkbox when it is focused or depressed.
</p>
<h3>Approach</h3>
<p>
Despite the shortcomings in CSS support, with a little extra markup and through the use of
JavaScript it is possible to skin an <code><input type="checkbox"></code> element
consistently well in all of the
<a href="http://developer.yahoo.com/yui/articles/gbs/#a-grade">A-grade browsers</a>.
</p>
<h4>Markup</h4>
<p>
Since CSS support for the <code><input type="checkbox"></code> element is lacking, wrap
<code><input type="checkbox"></code> elements in one or more inline elements to provide the
necessary hooks for styling. In this example, each <code><input type="checkbox"></code>
element is wrapped by two <code><span></code>s.
</p>
<div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2"><<span class="kw2">span</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">span</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"checkbox"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>></span></div></li><li class="li2"><div class="de2"><span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>></span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2"><<span class="kw2">span</span>></span>
<span class="sc2"><<span class="kw2">span</span>></span>
<span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"checkbox"</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>></span></pre></div><textarea id="syntax1-plain"><span>
<span>
<input type="checkbox">
</span>
</span></textarea></div>
<h4>CSS</h4>
<p>
To style each checkbox, a class name of <code>yui-checkbox</code> will be applied to the
outtermost <code><span></code> wrapping each <code><input type="checkbox"></code>
element. An additional class will be used to represent the various states of each checkbox. The
class name for each state will follow a consistent pattern: <code>yui-checkbox-[state]</code>.
For this example, the following state-based class names will be used:
</p>
<dl>
<dt><code>yui-checkbox-focus</code></dt>
<dd>The checkbox has focus</dd>
<dt><code>yui-checkbox-active</code></dt>
<dd>The checkbox is active (pressed)</dd>
<dt><code>yui-checkbox-checked</code></dt>
<dd>The checkbox is checked</dd>
</dl>
<p>
The styles for each checkbox comes together as follows:
</p>
<div id="syntax2" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="re1">.yui-checkbox</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">display</span><span class="sy0">:</span> -moz-inline-stack<span class="sy0">;</span> <span class="coMULTI">/* Gecko < 1.9, since it doesn't support "inline-block" */</span></div></li><li class="li1"><div class="de1"> <span class="kw1">display</span><span class="sy0">:</span> inline-<span class="kw2">block</span><span class="sy0">;</span> <span class="coMULTI">/* IE, Opera and Webkit, and Gecko 1.9 */</span></div></li><li class="li1"><div class="de1"> <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">10px</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">10px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">inset</span> <span class="re3">2px</span> <span class="re0">#999</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span> <span class="coMULTI">/* Need to set a background color or IE won't get mouse events */</span> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="coMULTI">/*</span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> Necessary for IE 6 (Quirks and Standards Mode) and IE 7 (Quirks Mode), since </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> they don't support use of negative margins without relative positioning. </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1"> _position<span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"><span class="re1">.yui-checkbox</span> span <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">14px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">12px</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw2">hidden</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="coMULTI">/* Position the checkmark for Gecko, Opera and Webkit and IE 7 (Strict Mode). */</span></div></li><li class="li1"><div class="de1"> <span class="kw1">margin</span><span class="sy0">:</span> <span class="re3">-5px</span> <span class="nu0">0</span> <span class="nu0">0</span> <span class="re3">1px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="coMULTI">/* Position the checkmark for IE 6 (Strict and Quirks Mode) and IE 7 (Quirks Mode).*/</span></div></li><li class="li1"><div class="de1"> _margin<span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> _position<span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> _top<span class="sy0">:</span> <span class="re3">-5px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> _left<span class="sy0">:</span> <span class="re3">1px</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="coMULTI">/* For Gecko < 1.9: Positions the checkbox on the same line as its corresponding label. */</span></div></li><li class="li1"><div class="de1"><span class="re1">.yui-checkbox</span> span<span class="re2">:after </span><span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw1">content</span><span class="sy0">:</span> <span class="st0">"."</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">visibility</span><span class="sy0">:</span> <span class="kw2">hidden</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">line-height</span><span class="sy0">:</span> <span class="nu0">2</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"><span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> Hide the actual checkbox offscreen so that it is out of view, but still accessible via </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> the keyboard. </span></div></li><li class="li1"><div class="de1"><span class="coMULTI">*/</span></div></li><li class="li1"><div class="de1"><span class="re1">.yui-checkbox</span> input <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">left</span><span class="sy0">:</span> <span class="re3">-10000px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re1">.yui-checkbox-focus</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw1">border-color</span><span class="sy0">:</span> <span class="re0">#39f</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#9cf</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re1">.yui-checkbox-active</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#ccc</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re1">.yui-checkbox-checked</span> span <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="coMULTI">/* Draw a custom checkmark for the checked state using a background image. */</span></div></li><li class="li2"><div class="de2"> <span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">url</span><span class="br0">(</span><span class="co2">checkmark.png</span><span class="br0">)</span> <span class="kw2">no-repeat</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;"><span class="re1">.yui-checkbox</span> <span class="br0">{</span>
<span class="kw1">display</span><span class="sy0">:</span> -moz-inline-stack<span class="sy0">;</span> <span class="coMULTI">/* Gecko < 1.9, since it doesn't support "inline-block" */</span>
<span class="kw1">display</span><span class="sy0">:</span> inline-<span class="kw2">block</span><span class="sy0">;</span> <span class="coMULTI">/* IE, Opera and Webkit, and Gecko 1.9 */</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">10px</span><span class="sy0">;</span>
<span class="kw1">height</span><span class="sy0">:</span> <span class="re3">10px</span><span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">inset</span> <span class="re3">2px</span> <span class="re0">#999</span><span class="sy0">;</span>
<span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span> <span class="coMULTI">/* Need to set a background color or IE won't get mouse events */</span>
<span class="coMULTI">/*
Necessary for IE 6 (Quirks and Standards Mode) and IE 7 (Quirks Mode), since
they don't support use of negative margins without relative positioning.
*/</span>
_position<span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.yui-checkbox</span> span <span class="br0">{</span>
<span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span>
<span class="kw1">height</span><span class="sy0">:</span> <span class="re3">14px</span><span class="sy0">;</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">12px</span><span class="sy0">;</span>
<span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw2">hidden</span><span class="sy0">;</span>
<span class="coMULTI">/* Position the checkmark for Gecko, Opera and Webkit and IE 7 (Strict Mode). */</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="re3">-5px</span> <span class="nu0">0</span> <span class="nu0">0</span> <span class="re3">1px</span><span class="sy0">;</span>
<span class="coMULTI">/* Position the checkmark for IE 6 (Strict and Quirks Mode) and IE 7 (Quirks Mode).*/</span>
_margin<span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
_position<span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span>
_top<span class="sy0">:</span> <span class="re3">-5px</span><span class="sy0">;</span>
_left<span class="sy0">:</span> <span class="re3">1px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="coMULTI">/* For Gecko < 1.9: Positions the checkbox on the same line as its corresponding label. */</span>
<span class="re1">.yui-checkbox</span> span<span class="re2">:after </span><span class="br0">{</span>
<span class="kw1">content</span><span class="sy0">:</span> <span class="st0">"."</span><span class="sy0">;</span>
<span class="kw1">visibility</span><span class="sy0">:</span> <span class="kw2">hidden</span><span class="sy0">;</span>
<span class="kw1">line-height</span><span class="sy0">:</span> <span class="nu0">2</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="coMULTI">/*
Hide the actual checkbox offscreen so that it is out of view, but still accessible via
the keyboard.
*/</span>
<span class="re1">.yui-checkbox</span> input <span class="br0">{</span>
<span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span>
<span class="kw1">left</span><span class="sy0">:</span> <span class="re3">-10000px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.yui-checkbox-focus</span> <span class="br0">{</span>
<span class="kw1">border-color</span><span class="sy0">:</span> <span class="re0">#39f</span><span class="sy0">;</span>
<span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#9cf</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.yui-checkbox-active</span> <span class="br0">{</span>
<span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#ccc</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.yui-checkbox-checked</span> span <span class="br0">{</span>
<span class="coMULTI">/* Draw a custom checkmark for the checked state using a background image. */</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">url</span><span class="br0">(</span><span class="co2">checkmark.png</span><span class="br0">)</span> <span class="kw2">no-repeat</span><span class="sy0">;</span>
<span class="br0">}</span></pre></div><textarea id="syntax2-plain">.yui-checkbox {
display: -moz-inline-stack; /* Gecko < 1.9, since it doesn't support "inline-block" */
display: inline-block; /* IE, Opera and Webkit, and Gecko 1.9 */
width: 10px;
height: 10px;
border: inset 2px #999;
background-color: #fff; /* Need to set a background color or IE won't get mouse events */
/*
Necessary for IE 6 (Quirks and Standards Mode) and IE 7 (Quirks Mode), since
they don't support use of negative margins without relative positioning.
*/
_position: relative;
}
.yui-checkbox span {
display: block;
height: 14px;
width: 12px;
overflow: hidden;
/* Position the checkmark for Gecko, Opera and Webkit and IE 7 (Strict Mode). */
margin: -5px 0 0 1px;
/* Position the checkmark for IE 6 (Strict and Quirks Mode) and IE 7 (Quirks Mode).*/
_margin: 0;
_position: absolute;
_top: -5px;
_left: 1px;
}
/* For Gecko < 1.9: Positions the checkbox on the same line as its corresponding label. */
.yui-checkbox span:after {
content: ".";
visibility: hidden;
line-height: 2;
}
/*
Hide the actual checkbox offscreen so that it is out of view, but still accessible via
the keyboard.
*/
.yui-checkbox input {
position: absolute;
left: -10000px;
}
.yui-checkbox-focus {
border-color: #39f;
background-color: #9cf;
}
.yui-checkbox-active {
background-color: #ccc;
}
.yui-checkbox-checked span {
/* Draw a custom checkmark for the checked state using a background image. */
background: url(checkmark.png) no-repeat;
}</textarea></div>
<h4>JavaScript</h4>
<p>
Application and removal of the state-based class names will be facilitated by JavaScript event
handlers. Each event handler will track the state of the
<code><input type="checkbox"></code> element, and apply and remove corresponding
state-based class names from its outtermost <code><span></code> —
making it easy to style each state. And since each JavaScript is required for state management,
the stylesheet for the skinned checkboxes will only be added to the page when JavaScript is
enabled. This will ensure that each checkbox works correctly with and without JavaScript enabled.
</p>
<p>
Since there could easily be many instances of a skinned checkbox on the page, all event
listeners will be attached to the containing element for all checkboxes. Each listener will
listen for events as they bubble up from each checkbox. Relying on event bubbling will improve the
overall performance of the page by reducing the number of event handlers.
</p>
<p>
Since the DOM <code>focus</code> and <code>blur</code> events do not bubble, use the Event Utility's
<a href="../../api/YUI.html#event_focus"><code>focus</code></a> and
<a href="../../api/YUI.html#event_focus"><code>blur</code></a> custom events, as an alternative to
attaching discrete focus and blur event handlers to the <code><input type="checkbox"></code>
element of each skinned checkbox. The
<a href="../../api/YUI.html#event_focus"><code>focus</code></a> and
<a href="../../api/YUI.html#event_focus"><code>blur</code></a> custom events leverage
capture-phase DOM event listeners, making it possible to attach a single focus and blur event
listener on the containing element of each checkbox — thereby increasing the performance
of the page. The complete script for the example comes together as follows:
</p>
<div id="syntax3" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"*"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> UA <span class="sy0">=</span> Y.<span class="me1">UA</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> getClassName <span class="sy0">=</span> Y.<span class="me1">ClassNameManager</span>.<span class="me1">getClassName</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> sCheckboxFocusClass <span class="sy0">=</span> getClassName<span class="br0">(</span><span class="st0">"checkbox"</span><span class="sy0">,</span> <span class="st0">"focus"</span><span class="br0">)</span><span class="sy0">,</span> <span class="co1">// Create yui-checkbox-focus</span></div></li><li class="li1"><div class="de1"> sCheckboxCheckedClass <span class="sy0">=</span> getClassName<span class="br0">(</span><span class="st0">"checkbox"</span><span class="sy0">,</span> <span class="st0">"checked"</span><span class="br0">)</span><span class="sy0">,</span> <span class="co1">// Create yui-checkbox-checked</span></div></li><li class="li1"><div class="de1"> sCheckboxActiveClass <span class="sy0">=</span> getClassName<span class="br0">(</span><span class="st0">"checkbox"</span><span class="sy0">,</span> <span class="st0">"active"</span><span class="br0">)</span><span class="sy0">,</span> <span class="co1">// Create yui-checkbox-active</span></div></li><li class="li1"><div class="de1"> bKeyListenersInitialized <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> bMouseListenersInitialized <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> forAttr <span class="sy0">=</span> <span class="br0">(</span>UA.<span class="me1">ie</span> <span class="sy0">&&</span> UA.<span class="me1">ie</span> <span class="sy0"><</span> <span class="nu0">8</span><span class="br0">)</span> <span class="sy0">?</span> <span class="st0">"htmlFor"</span> <span class="sy0">:</span> <span class="st0">"for"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> bBlockDocumentMouseUp <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> bBlockClearActive <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> bBlockBlur <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span> </div></li><li class="li1"><div class="de1"> oActiveCheckbox<span class="sy0">;</span> </div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> initKeyListeners <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"keydown"</span><span class="sy0">,</span> onCheckboxKeyDown<span class="sy0">,</span> <span class="st0">".yui-checkbox"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">this</span>.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> onCheckboxClick<span class="sy0">,</span> <span class="st0">".yui-checkbox"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"blur"</span><span class="sy0">,</span> onCheckboxBlur<span class="sy0">,</span> <span class="st0">"input[type=checkbox]"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> bKeyListenersInitialized <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> initMouseListeners <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="kw1">this</span>.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"mouseover"</span><span class="sy0">,</span> onCheckboxMouseOver<span class="sy0">,</span> <span class="st0">".yui-checkbox"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"mouseout"</span><span class="sy0">,</span> onCheckboxMouseOut<span class="sy0">,</span> <span class="st0">".yui-checkbox-active"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"ownerDocument"</span><span class="br0">)</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">"mouseup"</span><span class="sy0">,</span> onDocumentMouseUp<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> bMouseListenersInitialized <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> getCheckbox <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>node<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw1">return</span> <span class="br0">(</span>node.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">"yui-checkbox"</span><span class="br0">)</span> <span class="sy0">?</span> node <span class="sy0">:</span> node.<span class="me1">ancestor</span><span class="br0">(</span><span class="st0">".yui-checkbox"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> getCheckboxForLabel <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>label<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> sID <span class="sy0">=</span> label.<span class="me1">getAttribute</span><span class="br0">(</span>forAttr<span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> oInput<span class="sy0">,</span></div></li><li class="li2"><div class="de2"> oCheckbox<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>sID<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> oInput <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#"</span> <span class="sy0">+</span> sID<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>oInput<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> oCheckbox <span class="sy0">=</span> getCheckbox<span class="br0">(</span>oInput<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">return</span> oCheckbox<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> updateCheckedState <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>input<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> oCheckbox <span class="sy0">=</span> getCheckbox<span class="br0">(</span>input<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>input.<span class="me1">get</span><span class="br0">(</span><span class="st0">"checked"</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> oCheckbox.<span class="me1">addClass</span><span class="br0">(</span>sCheckboxCheckedClass<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="kw1">else</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> oCheckbox.<span class="me1">removeClass</span><span class="br0">(</span>sCheckboxCheckedClass<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> setActiveCheckbox <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>checkbox<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> checkbox.<span class="me1">addClass</span><span class="br0">(</span>sCheckboxActiveClass<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> oActiveCheckbox <span class="sy0">=</span> checkbox<span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> clearActiveCheckbox <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>oActiveCheckbox<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> oActiveCheckbox.<span class="me1">removeClass</span><span class="br0">(</span>sCheckboxActiveClass<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> oActiveCheckbox <span class="sy0">=</span> <span class="kw2">null</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> onCheckboxMouseOver <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="sy0">,</span> matchedEl<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>oActiveCheckbox <span class="sy0">&&</span> oActiveCheckbox.<span class="me1">compareTo</span><span class="br0">(</span><span class="kw1">this</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> oActiveCheckbox.<span class="me1">addClass</span><span class="br0">(</span>sCheckboxActiveClass<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> onCheckboxMouseOut <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="kw1">this</span>.<span class="me1">removeClass</span><span class="br0">(</span>sCheckboxActiveClass<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> onDocumentMouseUp <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> oCheckbox<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>bBlockDocumentMouseUp<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> oCheckbox <span class="sy0">=</span> getCheckbox<span class="br0">(</span>event.<span class="me1">target</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="br0">(</span>oCheckbox <span class="sy0">&&</span> <span class="sy0">!</span>oCheckbox.<span class="me1">compareTo</span><span class="br0">(</span>oActiveCheckbox<span class="br0">)</span><span class="br0">)</span> <span class="sy0">||</span> <span class="sy0">!</span>oCheckbox<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> clearActiveCheckbox<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> bBlockDocumentMouseUp <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> onCheckboxFocus <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Remove the focus style from any checkbox that might still have it</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> oCheckbox <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#checkboxes"</span><span class="br0">)</span>.<span class="me1">one</span><span class="br0">(</span><span class="st0">".yui-checkbox-focus"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="kw1">if</span> <span class="br0">(</span>oCheckbox<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> oCheckbox.<span class="me1">removeClass</span><span class="br0">(</span>sCheckboxFocusClass<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Defer adding key-related and click event listeners until </span></div></li><li class="li2"><div class="de2"> <span class="co1">// one of the checkboxes is initially focused.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>bKeyListenersInitialized<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> initKeyListeners.<span class="me1">call</span><span class="br0">(</span>event.<span class="me1">container</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> oCheckbox <span class="sy0">=</span> getCheckbox<span class="br0">(</span><span class="kw1">this</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> oCheckbox.<span class="me1">addClass</span><span class="br0">(</span>sCheckboxFocusClass<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> onCheckboxBlur <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="kw1">if</span> <span class="br0">(</span>bBlockBlur<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> bBlockBlur <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">return</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> oCheckbox <span class="sy0">=</span> getCheckbox<span class="br0">(</span><span class="kw1">this</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> oCheckbox.<span class="me1">removeClass</span><span class="br0">(</span>sCheckboxFocusClass<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>bBlockClearActive <span class="sy0">&&</span> oCheckbox.<span class="me1">compareTo</span><span class="br0">(</span>oActiveCheckbox<span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> clearActiveCheckbox<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> bBlockClearActive <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> onCheckboxMouseDown <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// Defer adding mouse-related and click event listeners until </span></div></li><li class="li1"><div class="de1"> <span class="co1">// the user mouses down on one of the checkboxes.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>bMouseListenersInitialized<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> initMouseListeners.<span class="me1">call</span><span class="br0">(</span>event.<span class="me1">container</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> oCheckbox<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> oInput<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"nodeName"</span><span class="br0">)</span>.<span class="me1">toLowerCase</span><span class="br0">(</span><span class="br0">)</span> <span class="sy0">===</span> <span class="st0">"label"</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// If the target of the event was the checkbox's label element, the</span></div></li><li class="li1"><div class="de1"> <span class="co1">// label will dispatch a click event to the checkbox, meaning the </span></div></li><li class="li2"><div class="de2"> <span class="co1">// "onCheckboxClick" handler will be called twice. For that reason</span></div></li><li class="li1"><div class="de1"> <span class="co1">// it is necessary to block the "onDocumentMouseUp" handler from</span></div></li><li class="li1"><div class="de1"> <span class="co1">// clearing the active state, so that a reference to the active </span></div></li><li class="li1"><div class="de1"> <span class="co1">// checkbox still exists the second time the "onCheckboxClick"</span></div></li><li class="li1"><div class="de1"> <span class="co1">// handler is called.</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> bBlockDocumentMouseUp <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// When the user clicks the label instead of the checkbox itself, </span></div></li><li class="li1"><div class="de1"> <span class="co1">// the checkbox will be blurred if it has focus. Since the </span></div></li><li class="li2"><div class="de2"> <span class="co1">// "onCheckboxBlur" handler clears the active state it is </span></div></li><li class="li1"><div class="de1"> <span class="co1">// necessary to block the clearing of the active state when the </span></div></li><li class="li1"><div class="de1"> <span class="co1">// label is clicked instead of the checkbox itself.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> bBlockClearActive <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> oCheckbox <span class="sy0">=</span> getCheckboxForLabel<span class="br0">(</span><span class="kw1">this</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="kw1">else</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> oCheckbox <span class="sy0">=</span> <span class="kw1">this</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// Need to focus the input manually for two reasons:</span></div></li><li class="li1"><div class="de1"> <span class="co1">// 1) Mousing down on a label in Webkit doesn't focus its </span></div></li><li class="li1"><div class="de1"> <span class="co1">// associated checkbox</span></div></li><li class="li1"><div class="de1"> <span class="co1">// 2) By default checkboxes are focused when the user mouses </span></div></li><li class="li1"><div class="de1"> <span class="co1">// down on them. However, since the actually checkbox is </span></div></li><li class="li2"><div class="de2"> <span class="co1">// obscurred by the two span elements that are used to </span></div></li><li class="li1"><div class="de1"> <span class="co1">// style it, the checkbox wont' receive focus as it was </span></div></li><li class="li1"><div class="de1"> <span class="co1">// never the actual target of the mousedown event.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> oInput <span class="sy0">=</span> oCheckbox.<span class="me1">one</span><span class="br0">(</span><span class="st0">"input"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Calling Event.preventDefault won't block the blurring of the </span></div></li><li class="li1"><div class="de1"> <span class="co1">// currently focused element in IE, so we'll use the "bBlockBlur"</span></div></li><li class="li1"><div class="de1"> <span class="co1">// variable to stop the code in the blur event handler </span></div></li><li class="li2"><div class="de2"> <span class="co1">// from executing.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> bBlockBlur <span class="sy0">=</span> <span class="br0">(</span>UA.<span class="me1">ie</span> <span class="sy0">&&</span> oInput.<span class="me1">get</span><span class="br0">(</span><span class="st0">"checked"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> oInput.<span class="kw3">focus</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> setActiveCheckbox<span class="br0">(</span>oCheckbox<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Need to call preventDefault because by default mousing down on</span></div></li><li class="li2"><div class="de2"> <span class="co1">// an element will blur the element in the document that currently </span></div></li><li class="li1"><div class="de1"> <span class="co1">// has focus--in this case, the input element that was </span></div></li><li class="li1"><div class="de1"> <span class="co1">// just focused.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> event.<span class="me1">preventDefault</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> onCheckboxClick <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> oInput<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="kw1">this</span>.<span class="me1">compareTo</span><span class="br0">(</span>oActiveCheckbox<span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> oInput <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">one</span><span class="br0">(</span><span class="st0">"input"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>event.<span class="me1">target</span>.<span class="me1">compareTo</span><span class="br0">(</span>oInput<span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// If the click event was fired via the mouse the checked</span></div></li><li class="li2"><div class="de2"> <span class="co1">// state will have to be manually updated since the input </span></div></li><li class="li1"><div class="de1"> <span class="co1">// is hidden offscreen and therefore couldn't be the </span></div></li><li class="li1"><div class="de1"> <span class="co1">// target of the click.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> oInput.<span class="me1">set</span><span class="br0">(</span><span class="st0">"checked"</span><span class="sy0">,</span> <span class="br0">(</span><span class="sy0">!</span>oInput.<span class="me1">get</span><span class="br0">(</span><span class="st0">"checked"</span><span class="br0">)</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> updateCheckedState<span class="br0">(</span>oInput<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> clearActiveCheckbox<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> onCheckboxKeyDown <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Style the checkbox as being active when the user presses the </span></div></li><li class="li1"><div class="de1"> <span class="co1">// space bar</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>event.<span class="me1">keyCode</span> <span class="sy0">===</span> <span class="nu0">32</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> setActiveCheckbox<span class="br0">(</span><span class="kw1">this</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> Y.<span class="me1">all</span><span class="br0">(</span><span class="st0">"#checkboxes>div>span"</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">"yui-checkbox"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Remove the "yui-checkboxes-loading" class used to hide the </span></div></li><li class="li2"><div class="de2"> <span class="co1">// checkboxes now that the checkboxes have been skinned.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#checkboxes"</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"ownerDocument"</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"documentElement"</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">"yui-checkboxes-loading"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Add the minimum number of event listeners needed to start, bind the </span></div></li><li class="li2"><div class="de2"> <span class="co1">// rest when needed</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> Y.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"mousedown"</span><span class="sy0">,</span> onCheckboxMouseDown<span class="sy0">,</span> <span class="st0">"#checkboxes"</span><span class="sy0">,</span> <span class="st0">".yui-checkbox,label"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"focus"</span><span class="sy0">,</span> onCheckboxFocus<span class="sy0">,</span> <span class="st0">"#checkboxes"</span><span class="sy0">,</span> <span class="st0">"input[type=checkbox]"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">(</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"*"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span>
<span class="kw2">var</span> UA <span class="sy0">=</span> Y.<span class="me1">UA</span><span class="sy0">,</span>
getClassName <span class="sy0">=</span> Y.<span class="me1">ClassNameManager</span>.<span class="me1">getClassName</span><span class="sy0">,</span>
sCheckboxFocusClass <span class="sy0">=</span> getClassName<span class="br0">(</span><span class="st0">"checkbox"</span><span class="sy0">,</span> <span class="st0">"focus"</span><span class="br0">)</span><span class="sy0">,</span> <span class="co1">// Create yui-checkbox-focus</span>
sCheckboxCheckedClass <span class="sy0">=</span> getClassName<span class="br0">(</span><span class="st0">"checkbox"</span><span class="sy0">,</span> <span class="st0">"checked"</span><span class="br0">)</span><span class="sy0">,</span> <span class="co1">// Create yui-checkbox-checked</span>
sCheckboxActiveClass <span class="sy0">=</span> getClassName<span class="br0">(</span><span class="st0">"checkbox"</span><span class="sy0">,</span> <span class="st0">"active"</span><span class="br0">)</span><span class="sy0">,</span> <span class="co1">// Create yui-checkbox-active</span>
bKeyListenersInitialized <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span>
bMouseListenersInitialized <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span>
forAttr <span class="sy0">=</span> <span class="br0">(</span>UA.<span class="me1">ie</span> <span class="sy0">&&</span> UA.<span class="me1">ie</span> <span class="sy0"><</span> <span class="nu0">8</span><span class="br0">)</span> <span class="sy0">?</span> <span class="st0">"htmlFor"</span> <span class="sy0">:</span> <span class="st0">"for"</span><span class="sy0">,</span>
bBlockDocumentMouseUp <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span>
bBlockClearActive <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span>
bBlockBlur <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span>
oActiveCheckbox<span class="sy0">;</span>
<span class="kw2">var</span> initKeyListeners <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
<span class="kw1">this</span>.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"keydown"</span><span class="sy0">,</span> onCheckboxKeyDown<span class="sy0">,</span> <span class="st0">".yui-checkbox"</span><span class="br0">)</span><span class="sy0">;</span>
<span class="kw1">this</span>.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> onCheckboxClick<span class="sy0">,</span> <span class="st0">".yui-checkbox"</span><span class="br0">)</span><span class="sy0">;</span>
<span class="kw1">this</span>.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"blur"</span><span class="sy0">,</span> onCheckboxBlur<span class="sy0">,</span> <span class="st0">"input[type=checkbox]"</span><span class="br0">)</span><span class="sy0">;</span>
bKeyListenersInitialized <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="kw2">var</span> initMouseListeners <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
<span class="kw1">this</span>.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"mouseover"</span><span class="sy0">,</span> onCheckboxMouseOver<span class="sy0">,</span> <span class="st0">".yui-checkbox"</span><span class="br0">)</span><span class="sy0">;</span>
<span class="kw1">this</span>.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"mouseout"</span><span class="sy0">,</span> onCheckboxMouseOut<span class="sy0">,</span> <span class="st0">".yui-checkbox-active"</span><span class="br0">)</span><span class="sy0">;</span>
<span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"ownerDocument"</span><span class="br0">)</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">"mouseup"</span><span class="sy0">,</span> onDocumentMouseUp<span class="br0">)</span><span class="sy0">;</span>
bMouseListenersInitialized <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="kw2">var</span> getCheckbox <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>node<span class="br0">)</span> <span class="br0">{</span>
<span class="kw1">return</span> <span class="br0">(</span>node.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">"yui-checkbox"</span><span class="br0">)</span> <span class="sy0">?</span> node <span class="sy0">:</span> node.<span class="me1">ancestor</span><span class="br0">(</span><span class="st0">".yui-checkbox"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="kw2">var</span> getCheckboxForLabel <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>label<span class="br0">)</span> <span class="br0">{</span>
<span class="kw2">var</span> sID <span class="sy0">=</span> label.<span class="me1">getAttribute</span><span class="br0">(</span>forAttr<span class="br0">)</span><span class="sy0">,</span>
oInput<span class="sy0">,</span>
oCheckbox<span class="sy0">;</span>
<span class="kw1">if</span> <span class="br0">(</span>sID<span class="br0">)</span> <span class="br0">{</span>
oInput <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#"</span> <span class="sy0">+</span> sID<span class="br0">)</span><span class="sy0">;</span>
<span class="kw1">if</span> <span class="br0">(</span>oInput<span class="br0">)</span> <span class="br0">{</span>
oCheckbox <span class="sy0">=</span> getCheckbox<span class="br0">(</span>oInput<span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="br0">}</span>
<span class="kw1">return</span> oCheckbox<span class="sy0">;</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="kw2">var</span> updateCheckedState <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>input<span class="br0">)</span> <span class="br0">{</span>
<span class="kw2">var</span> oCheckbox <span class="sy0">=</span> getCheckbox<span class="br0">(</span>input<span class="br0">)</span><span class="sy0">;</span>
<span class="kw1">if</span> <span class="br0">(</span>input.<span class="me1">get</span><span class="br0">(</span><span class="st0">"checked"</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
oCheckbox.<span class="me1">addClass</span><span class="br0">(</span>sCheckboxCheckedClass<span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="kw1">else</span> <span class="br0">{</span>
oCheckbox.<span class="me1">removeClass</span><span class="br0">(</span>sCheckboxCheckedClass<span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="kw2">var</span> setActiveCheckbox <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>checkbox<span class="br0">)</span> <span class="br0">{</span>
checkbox.<span class="me1">addClass</span><span class="br0">(</span>sCheckboxActiveClass<span class="br0">)</span><span class="sy0">;</span>
oActiveCheckbox <span class="sy0">=</span> checkbox<span class="sy0">;</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="kw2">var</span> clearActiveCheckbox <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
<span class="kw1">if</span> <span class="br0">(</span>oActiveCheckbox<span class="br0">)</span> <span class="br0">{</span>
oActiveCheckbox.<span class="me1">removeClass</span><span class="br0">(</span>sCheckboxActiveClass<span class="br0">)</span><span class="sy0">;</span>
oActiveCheckbox <span class="sy0">=</span> <span class="kw2">null</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="kw2">var</span> onCheckboxMouseOver <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="sy0">,</span> matchedEl<span class="br0">)</span> <span class="br0">{</span>
<span class="kw1">if</span> <span class="br0">(</span>oActiveCheckbox <span class="sy0">&&</span> oActiveCheckbox.<span class="me1">compareTo</span><span class="br0">(</span><span class="kw1">this</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
oActiveCheckbox.<span class="me1">addClass</span><span class="br0">(</span>sCheckboxActiveClass<span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="kw2">var</span> onCheckboxMouseOut <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span>
<span class="kw1">this</span>.<span class="me1">removeClass</span><span class="br0">(</span>sCheckboxActiveClass<span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="kw2">var</span> onDocumentMouseUp <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span>
<span class="kw2">var</span> oCheckbox<span class="sy0">;</span>
<span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>bBlockDocumentMouseUp<span class="br0">)</span> <span class="br0">{</span>
oCheckbox <span class="sy0">=</span> getCheckbox<span class="br0">(</span>event.<span class="me1">target</span><span class="br0">)</span><span class="sy0">;</span>
<span class="kw1">if</span> <span class="br0">(</span><span class="br0">(</span>oCheckbox <span class="sy0">&&</span> <span class="sy0">!</span>oCheckbox.<span class="me1">compareTo</span><span class="br0">(</span>oActiveCheckbox<span class="br0">)</span><span class="br0">)</span> <span class="sy0">||</span> <span class="sy0">!</span>oCheckbox<span class="br0">)</span> <span class="br0">{</span>
clearActiveCheckbox<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="br0">}</span>
bBlockDocumentMouseUp <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="kw2">var</span> onCheckboxFocus <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span>
<span class="co1">// Remove the focus style from any checkbox that might still have it</span>
<span class="kw2">var</span> oCheckbox <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#checkboxes"</span><span class="br0">)</span>.<span class="me1">one</span><span class="br0">(</span><span class="st0">".yui-checkbox-focus"</span><span class="br0">)</span><span class="sy0">;</span>
<span class="kw1">if</span> <span class="br0">(</span>oCheckbox<span class="br0">)</span> <span class="br0">{</span>
oCheckbox.<span class="me1">removeClass</span><span class="br0">(</span>sCheckboxFocusClass<span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="co1">// Defer adding key-related and click event listeners until </span>
<span class="co1">// one of the checkboxes is initially focused.</span>
<span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>bKeyListenersInitialized<span class="br0">)</span> <span class="br0">{</span>
initKeyListeners.<span class="me1">call</span><span class="br0">(</span>event.<span class="me1">container</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="kw2">var</span> oCheckbox <span class="sy0">=</span> getCheckbox<span class="br0">(</span><span class="kw1">this</span><span class="br0">)</span><span class="sy0">;</span>
oCheckbox.<span class="me1">addClass</span><span class="br0">(</span>sCheckboxFocusClass<span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="kw2">var</span> onCheckboxBlur <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span>
<span class="kw1">if</span> <span class="br0">(</span>bBlockBlur<span class="br0">)</span> <span class="br0">{</span>
bBlockBlur <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span>
<span class="kw1">return</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="kw2">var</span> oCheckbox <span class="sy0">=</span> getCheckbox<span class="br0">(</span><span class="kw1">this</span><span class="br0">)</span><span class="sy0">;</span>
oCheckbox.<span class="me1">removeClass</span><span class="br0">(</span>sCheckboxFocusClass<span class="br0">)</span><span class="sy0">;</span>
<span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>bBlockClearActive <span class="sy0">&&</span> oCheckbox.<span class="me1">compareTo</span><span class="br0">(</span>oActiveCheckbox<span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
clearActiveCheckbox<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
bBlockClearActive <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="kw2">var</span> onCheckboxMouseDown <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span>
<span class="co1">// Defer adding mouse-related and click event listeners until </span>
<span class="co1">// the user mouses down on one of the checkboxes.</span>
<span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>bMouseListenersInitialized<span class="br0">)</span> <span class="br0">{</span>
initMouseListeners.<span class="me1">call</span><span class="br0">(</span>event.<span class="me1">container</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="kw2">var</span> oCheckbox<span class="sy0">,</span>
oInput<span class="sy0">;</span>
<span class="kw1">if</span> <span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"nodeName"</span><span class="br0">)</span>.<span class="me1">toLowerCase</span><span class="br0">(</span><span class="br0">)</span> <span class="sy0">===</span> <span class="st0">"label"</span><span class="br0">)</span> <span class="br0">{</span>
<span class="co1">// If the target of the event was the checkbox's label element, the</span>
<span class="co1">// label will dispatch a click event to the checkbox, meaning the </span>
<span class="co1">// "onCheckboxClick" handler will be called twice. For that reason</span>
<span class="co1">// it is necessary to block the "onDocumentMouseUp" handler from</span>
<span class="co1">// clearing the active state, so that a reference to the active </span>
<span class="co1">// checkbox still exists the second time the "onCheckboxClick"</span>
<span class="co1">// handler is called.</span>
bBlockDocumentMouseUp <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span>
<span class="co1">// When the user clicks the label instead of the checkbox itself, </span>
<span class="co1">// the checkbox will be blurred if it has focus. Since the </span>
<span class="co1">// "onCheckboxBlur" handler clears the active state it is </span>
<span class="co1">// necessary to block the clearing of the active state when the </span>
<span class="co1">// label is clicked instead of the checkbox itself.</span>
bBlockClearActive <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span>
oCheckbox <span class="sy0">=</span> getCheckboxForLabel<span class="br0">(</span><span class="kw1">this</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="kw1">else</span> <span class="br0">{</span>
oCheckbox <span class="sy0">=</span> <span class="kw1">this</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="co1">// Need to focus the input manually for two reasons:</span>
<span class="co1">// 1) Mousing down on a label in Webkit doesn't focus its </span>
<span class="co1">// associated checkbox</span>
<span class="co1">// 2) By default checkboxes are focused when the user mouses </span>
<span class="co1">// down on them. However, since the actually checkbox is </span>
<span class="co1">// obscurred by the two span elements that are used to </span>
<span class="co1">// style it, the checkbox wont' receive focus as it was </span>
<span class="co1">// never the actual target of the mousedown event.</span>
oInput <span class="sy0">=</span> oCheckbox.<span class="me1">one</span><span class="br0">(</span><span class="st0">"input"</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">// Calling Event.preventDefault won't block the blurring of the </span>
<span class="co1">// currently focused element in IE, so we'll use the "bBlockBlur"</span>
<span class="co1">// variable to stop the code in the blur event handler </span>
<span class="co1">// from executing.</span>
bBlockBlur <span class="sy0">=</span> <span class="br0">(</span>UA.<span class="me1">ie</span> <span class="sy0">&&</span> oInput.<span class="me1">get</span><span class="br0">(</span><span class="st0">"checked"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
oInput.<span class="kw3">focus</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
setActiveCheckbox<span class="br0">(</span>oCheckbox<span class="br0">)</span><span class="sy0">;</span>
<span class="co1">// Need to call preventDefault because by default mousing down on</span>
<span class="co1">// an element will blur the element in the document that currently </span>
<span class="co1">// has focus--in this case, the input element that was </span>
<span class="co1">// just focused.</span>
event.<span class="me1">preventDefault</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="kw2">var</span> onCheckboxClick <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span>
<span class="kw2">var</span> oInput<span class="sy0">;</span>
<span class="kw1">if</span> <span class="br0">(</span><span class="kw1">this</span>.<span class="me1">compareTo</span><span class="br0">(</span>oActiveCheckbox<span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
oInput <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">one</span><span class="br0">(</span><span class="st0">"input"</span><span class="br0">)</span><span class="sy0">;</span>
<span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>event.<span class="me1">target</span>.<span class="me1">compareTo</span><span class="br0">(</span>oInput<span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
<span class="co1">// If the click event was fired via the mouse the checked</span>
<span class="co1">// state will have to be manually updated since the input </span>
<span class="co1">// is hidden offscreen and therefore couldn't be the </span>
<span class="co1">// target of the click.</span>
oInput.<span class="me1">set</span><span class="br0">(</span><span class="st0">"checked"</span><span class="sy0">,</span> <span class="br0">(</span><span class="sy0">!</span>oInput.<span class="me1">get</span><span class="br0">(</span><span class="st0">"checked"</span><span class="br0">)</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
updateCheckedState<span class="br0">(</span>oInput<span class="br0">)</span><span class="sy0">;</span>
clearActiveCheckbox<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="br0">}</span><span class="sy0">;</span>
<span class="kw2">var</span> onCheckboxKeyDown <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span>
<span class="co1">// Style the checkbox as being active when the user presses the </span>
<span class="co1">// space bar</span>
<span class="kw1">if</span> <span class="br0">(</span>event.<span class="me1">keyCode</span> <span class="sy0">===</span> <span class="nu0">32</span><span class="br0">)</span> <span class="br0">{</span>
setActiveCheckbox<span class="br0">(</span><span class="kw1">this</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="br0">}</span><span class="sy0">;</span>
Y.<span class="me1">all</span><span class="br0">(</span><span class="st0">"#checkboxes>div>span"</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">"yui-checkbox"</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">// Remove the "yui-checkboxes-loading" class used to hide the </span>
<span class="co1">// checkboxes now that the checkboxes have been skinned.</span>
Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#checkboxes"</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"ownerDocument"</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"documentElement"</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">"yui-checkboxes-loading"</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">// Add the minimum number of event listeners needed to start, bind the </span>
<span class="co1">// rest when needed</span>
Y.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"mousedown"</span><span class="sy0">,</span> onCheckboxMouseDown<span class="sy0">,</span> <span class="st0">"#checkboxes"</span><span class="sy0">,</span> <span class="st0">".yui-checkbox,label"</span><span class="br0">)</span><span class="sy0">;</span>
Y.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"focus"</span><span class="sy0">,</span> onCheckboxFocus<span class="sy0">,</span> <span class="st0">"#checkboxes"</span><span class="sy0">,</span> <span class="st0">"input[type=checkbox]"</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax3-plain">YUI().use("*", function(Y) {
var UA = Y.UA,
getClassName = Y.ClassNameManager.getClassName,
sCheckboxFocusClass = getClassName("checkbox", "focus"), // Create yui-checkbox-focus
sCheckboxCheckedClass = getClassName("checkbox", "checked"), // Create yui-checkbox-checked
sCheckboxActiveClass = getClassName("checkbox", "active"), // Create yui-checkbox-active
bKeyListenersInitialized = false,
bMouseListenersInitialized = false,
forAttr = (UA.ie && UA.ie < 8) ? "htmlFor" : "for",
bBlockDocumentMouseUp = false,
bBlockClearActive = false,
bBlockBlur = false,
oActiveCheckbox;
var initKeyListeners = function () {
this.delegate("keydown", onCheckboxKeyDown, ".yui-checkbox");
this.delegate("click", onCheckboxClick, ".yui-checkbox");
this.delegate("blur", onCheckboxBlur, "input[type=checkbox]");
bKeyListenersInitialized = true;
};
var initMouseListeners = function () {
this.delegate("mouseover", onCheckboxMouseOver, ".yui-checkbox");
this.delegate("mouseout", onCheckboxMouseOut, ".yui-checkbox-active");
this.get("ownerDocument").on("mouseup", onDocumentMouseUp);
bMouseListenersInitialized = true;
};
var getCheckbox = function (node) {
return (node.hasClass("yui-checkbox") ? node : node.ancestor(".yui-checkbox"));
};
var getCheckboxForLabel = function (label) {
var sID = label.getAttribute(forAttr),
oInput,
oCheckbox;
if (sID) {
oInput = Y.one("#" + sID);
if (oInput) {
oCheckbox = getCheckbox(oInput);
}
}
return oCheckbox;
};
var updateCheckedState = function (input) {
var oCheckbox = getCheckbox(input);
if (input.get("checked")) {
oCheckbox.addClass(sCheckboxCheckedClass);
}
else {
oCheckbox.removeClass(sCheckboxCheckedClass);
}
};
var setActiveCheckbox = function (checkbox) {
checkbox.addClass(sCheckboxActiveClass);
oActiveCheckbox = checkbox;
};
var clearActiveCheckbox = function () {
if (oActiveCheckbox) {
oActiveCheckbox.removeClass(sCheckboxActiveClass);
oActiveCheckbox = null;
}
};
var onCheckboxMouseOver = function (event, matchedEl) {
if (oActiveCheckbox && oActiveCheckbox.compareTo(this)) {
oActiveCheckbox.addClass(sCheckboxActiveClass);
}
};
var onCheckboxMouseOut = function (event) {
this.removeClass(sCheckboxActiveClass);
};
var onDocumentMouseUp = function (event) {
var oCheckbox;
if (!bBlockDocumentMouseUp) {
oCheckbox = getCheckbox(event.target);
if ((oCheckbox && !oCheckbox.compareTo(oActiveCheckbox)) || !oCheckbox) {
clearActiveCheckbox();
}
}
bBlockDocumentMouseUp = false;
};
var onCheckboxFocus = function (event) {
// Remove the focus style from any checkbox that might still have it
var oCheckbox = Y.one("#checkboxes").one(".yui-checkbox-focus");
if (oCheckbox) {
oCheckbox.removeClass(sCheckboxFocusClass);
}
// Defer adding key-related and click event listeners until
// one of the checkboxes is initially focused.
if (!bKeyListenersInitialized) {
initKeyListeners.call(event.container);
}
var oCheckbox = getCheckbox(this);
oCheckbox.addClass(sCheckboxFocusClass);
};
var onCheckboxBlur = function (event) {
if (bBlockBlur) {
bBlockBlur = false;
return;
}
var oCheckbox = getCheckbox(this);
oCheckbox.removeClass(sCheckboxFocusClass);
if (!bBlockClearActive && oCheckbox.compareTo(oActiveCheckbox)) {
clearActiveCheckbox();
}
bBlockClearActive = false;
};
var onCheckboxMouseDown = function (event) {
// Defer adding mouse-related and click event listeners until
// the user mouses down on one of the checkboxes.
if (!bMouseListenersInitialized) {
initMouseListeners.call(event.container);
}
var oCheckbox,
oInput;
if (this.get("nodeName").toLowerCase() === "label") {
// If the target of the event was the checkbox's label element, the
// label will dispatch a click event to the checkbox, meaning the
// "onCheckboxClick" handler will be called twice. For that reason
// it is necessary to block the "onDocumentMouseUp" handler from
// clearing the active state, so that a reference to the active
// checkbox still exists the second time the "onCheckboxClick"
// handler is called.
bBlockDocumentMouseUp = true;
// When the user clicks the label instead of the checkbox itself,
// the checkbox will be blurred if it has focus. Since the
// "onCheckboxBlur" handler clears the active state it is
// necessary to block the clearing of the active state when the
// label is clicked instead of the checkbox itself.
bBlockClearActive = true;
oCheckbox = getCheckboxForLabel(this);
}
else {
oCheckbox = this;
}
// Need to focus the input manually for two reasons:
// 1) Mousing down on a label in Webkit doesn't focus its
// associated checkbox
// 2) By default checkboxes are focused when the user mouses
// down on them. However, since the actually checkbox is
// obscurred by the two span elements that are used to
// style it, the checkbox wont' receive focus as it was
// never the actual target of the mousedown event.
oInput = oCheckbox.one("input");
// Calling Event.preventDefault won't block the blurring of the
// currently focused element in IE, so we'll use the "bBlockBlur"
// variable to stop the code in the blur event handler
// from executing.
bBlockBlur = (UA.ie && oInput.get("checked"));
oInput.focus();
setActiveCheckbox(oCheckbox);
// Need to call preventDefault because by default mousing down on
// an element will blur the element in the document that currently
// has focus--in this case, the input element that was
// just focused.
event.preventDefault();
};
var onCheckboxClick = function (event) {
var oInput;
if (this.compareTo(oActiveCheckbox)) {
oInput = this.one("input");
if (!event.target.compareTo(oInput)) {
// If the click event was fired via the mouse the checked
// state will have to be manually updated since the input
// is hidden offscreen and therefore couldn't be the
// target of the click.
oInput.set("checked", (!oInput.get("checked")));
}
updateCheckedState(oInput);
clearActiveCheckbox();
}
};
var onCheckboxKeyDown = function (event) {
// Style the checkbox as being active when the user presses the
// space bar
if (event.keyCode === 32) {
setActiveCheckbox(this);
}
};
Y.all("#checkboxes>div>span").addClass("yui-checkbox");
// Remove the "yui-checkboxes-loading" class used to hide the
// checkboxes now that the checkboxes have been skinned.
Y.one("#checkboxes").get("ownerDocument").get("documentElement").removeClass("yui-checkboxes-loading");
// Add the minimum number of event listeners needed to start, bind the
// rest when needed
Y.delegate("mousedown", onCheckboxMouseDown, "#checkboxes", ".yui-checkbox,label");
Y.delegate("focus", onCheckboxFocus, "#checkboxes", "input[type=checkbox]");
});</textarea></div>
<h4>Progressive Enhancement</h4>
<p>
The markup above will be transformed using both CSS and JavaScript. To account
for the scenario where the user has CSS enabled in their browser but JavaScript
is disabled, the CSS used to style the checkboxes will be loaded via JavaScript
using the YUI instance's <a href="http://developer.yahoo.com/yui/3/yui#loader">built-in Loader</a>.
Additionally, a small block of JavaScript will be placed in the
<code><head></code> — used to temporarily hide the markup
while the JavaScript and CSS are in the process of loading to prevent the user
from seeing a flash unstyled content.
</p>
<div id="syntax4" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> base<span class="sy0">:</span> <span class="st0">"../../build/"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// Load the stylesheet for the skinned checkboxes via JavaScript, </span></div></li><li class="li1"><div class="de1"> <span class="co1">// since without JavaScript skinning of the checkboxes wouldn't </span></div></li><li class="li1"><div class="de1"> <span class="co1">// be possible.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> modules<span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="st0">"checkboxcss"</span><span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> type<span class="sy0">:</span> <span class="st0">"css"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> fullpath<span class="sy0">:</span> <span class="st0">"assets/checkbox.css"</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> <span class="st0">"checkboxjs"</span><span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> type<span class="sy0">:</span> <span class="st0">"js"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> fullpath<span class="sy0">:</span> <span class="st0">"assets/checkbox.js"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> requires<span class="sy0">:</span> <span class="br0">[</span><span class="st0">"classnamemanager"</span><span class="sy0">,</span> <span class="st0">"event-focus"</span><span class="sy0">,</span> <span class="st0">"node-event-delegate"</span><span class="sy0">,</span> <span class="st0">"checkboxcss"</span><span class="br0">]</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span> </div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"checkboxjs"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="sy0">,</span> result<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// The callback supplied to use() will be executed regardless of</span></div></li><li class="li1"><div class="de1"> <span class="co1">// whether the operation was successful or not. The second parameter</span></div></li><li class="li1"><div class="de1"> <span class="co1">// is a result object that has the status of the operation. We can</span></div></li><li class="li1"><div class="de1"> <span class="co1">// use this to try to recover from failures or timeouts.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>result.<span class="me1">success</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Load failure: "</span> <span class="sy0">+</span> result.<span class="me1">msg</span><span class="sy0">,</span> <span class="st0">"warn"</span><span class="sy0">,</span> <span class="st0">"Example"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Show the checkboxes if the loader failed that way the original </span></div></li><li class="li2"><div class="de2"> <span class="co1">// unskinned checkboxes will be visible so that the user can</span></div></li><li class="li1"><div class="de1"> <span class="co1">// interact with them either way.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> document.<span class="me1">documentElement</span>.<span class="me1">className</span> <span class="sy0">=</span> <span class="st0">""</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">(</span><span class="br0">{</span>
base<span class="sy0">:</span> <span class="st0">"../../build/"</span><span class="sy0">,</span>
<span class="co1">// Load the stylesheet for the skinned checkboxes via JavaScript, </span>
<span class="co1">// since without JavaScript skinning of the checkboxes wouldn't </span>
<span class="co1">// be possible.</span>
modules<span class="sy0">:</span> <span class="br0">{</span>
<span class="st0">"checkboxcss"</span><span class="sy0">:</span> <span class="br0">{</span>
type<span class="sy0">:</span> <span class="st0">"css"</span><span class="sy0">,</span>
fullpath<span class="sy0">:</span> <span class="st0">"assets/checkbox.css"</span>
<span class="br0">}</span><span class="sy0">,</span>
<span class="st0">"checkboxjs"</span><span class="sy0">:</span> <span class="br0">{</span>
type<span class="sy0">:</span> <span class="st0">"js"</span><span class="sy0">,</span>
fullpath<span class="sy0">:</span> <span class="st0">"assets/checkbox.js"</span><span class="sy0">,</span>
requires<span class="sy0">:</span> <span class="br0">[</span><span class="st0">"classnamemanager"</span><span class="sy0">,</span> <span class="st0">"event-focus"</span><span class="sy0">,</span> <span class="st0">"node-event-delegate"</span><span class="sy0">,</span> <span class="st0">"checkboxcss"</span><span class="br0">]</span>
<span class="br0">}</span>
<span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"checkboxjs"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="sy0">,</span> result<span class="br0">)</span> <span class="br0">{</span>
<span class="co1">// The callback supplied to use() will be executed regardless of</span>
<span class="co1">// whether the operation was successful or not. The second parameter</span>
<span class="co1">// is a result object that has the status of the operation. We can</span>
<span class="co1">// use this to try to recover from failures or timeouts.</span>
<span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>result.<span class="me1">success</span><span class="br0">)</span> <span class="br0">{</span>
Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Load failure: "</span> <span class="sy0">+</span> result.<span class="me1">msg</span><span class="sy0">,</span> <span class="st0">"warn"</span><span class="sy0">,</span> <span class="st0">"Example"</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">// Show the checkboxes if the loader failed that way the original </span>
<span class="co1">// unskinned checkboxes will be visible so that the user can</span>
<span class="co1">// interact with them either way.</span>
document.<span class="me1">documentElement</span>.<span class="me1">className</span> <span class="sy0">=</span> <span class="st0">""</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
</pre></div><textarea id="syntax4-plain">YUI({
base: "../../build/",
// Load the stylesheet for the skinned checkboxes via JavaScript,
// since without JavaScript skinning of the checkboxes wouldn't
// be possible.
modules: {
"checkboxcss": {
type: "css",
fullpath: "assets/checkbox.css"
},
"checkboxjs": {
type: "js",
fullpath: "assets/checkbox.js",
requires: ["classnamemanager", "event-focus", "node-event-delegate", "checkboxcss"]
}
}
}).use("checkboxjs", function(Y, result) {
// The callback supplied to use() will be executed regardless of
// whether the operation was successful or not. The second parameter
// is a result object that has the status of the operation. We can
// use this to try to recover from failures or timeouts.
if (!result.success) {
Y.log("Load failure: " + result.msg, "warn", "Example");
// Show the checkboxes if the loader failed that way the original
// unskinned checkboxes will be visible so that the user can
// interact with them either way.
document.documentElement.className = "";
}
});
</textarea></div> </div>
<div class="yui-u sidebar">
<div id="examples" class="mod box4">
<div class="hd">
<h4>
Event Examples:</h4>
</div>
<div class="bd">
<ul>
<li><a href='../event/event-simple.html'>Simple DOM Events</a></li><li><a href='../event/event-timing.html'>Using 'available', 'contentready', and 'domready'</a></li><li><a href='../event/event-ce.html'>Using Custom Events</a></li><li class='selected'><a href='../event/event-focus-blur.html'>Skinning via Progressive Enhancement using the Event Utility and the Loader</a></li><li><a href='../yui/yui-augment.html'>Compose Classes of Objects with <code>augment</code> (included with examples for The YUI Global Object)</a></li><li><a href='../node-focusmanager/node-focusmanager-3.html'>Accessible Menu Button (included with examples for Focus Manager Node Plugin)</a></li><li><a href='../node-focusmanager/node-focusmanager-2.html'>Accessible TabView (included with examples for Focus Manager Node Plugin)</a></li><li><a href='../attribute/attribute-event.html'>Attribute Change Events (included with examples for Attribute)</a></li><li><a href='../attribute/attribute-event-speeddate.html'>Attribute Event Based Speed Dating (included with examples for Attribute)</a></li><li><a href='../attribute/attribute-getset.html'>Attribute Getters, Setters and Validators (included with examples for Attribute)</a></li><li><a href='../widget/widget-extend.html'>Extending the base widget class (included with examples for Widget)</a></li><li><a href='../dd/photo-browser.html'>Photo Browser (included with examples for Drag & Drop)</a></li> </ul>
</div>
</div>
<div class="mod box4">
<div class="hd">
<h4>More Event Resources:</h4>
</div>
<div class="bd">
<ul>
<!-- <li><a href="http://developer.yahoo.com/yui/event/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_event.html">API Documentation</a></li></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="selected "><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
</div><!--closes bd-->
<div id="ft">
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p>
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
<a href="http://careers.yahoo.com/">Job Openings</a></p>
</div>
</div>
<script language="javascript">
var yuiConfig = {base:"../../build/", timeout: 10000};
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>