<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library Examples: Event: Using the 'focus' and 'blur' custom events</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>
</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: Using the 'focus' and 'blur' custom events</h1></div>
</div>
<div id="bd">
<div id="bar-note"><p><strong>Note:</strong> This is YUI 3.x. Looking for <a href="http://developer.yahoo.com/yui/">YUI 2.x</a>?</p></div>
<div id="yui-main">
<div class="yui-b">
<div class="yui-ge">
<div class="yui-u first example" id="main">
<h2>Event: Using the 'focus' and 'blur' custom events</h2>
<div id="example" class="promo">
<p>
<p>
This example demonstrates how to use the
<a href="../../api/module_classnamemanager.html">ClassNameManager Utility</a> and 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 to skin checkboxes.
</p> </p>
<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 class="yui-checkbox">
<span>
<input type="checkbox" id="field-1" name="field-1" value="1">
</span>
</span>
</div>
<div>
<label for="field-2">Field 2: </label>
<span class="yui-checkbox">
<span>
<input type="checkbox" id="field-2" name="field-2" value="2">
</span>
</span>
</div>
<div>
<label for="field-3">Field 3: </label>
<span class="yui-checkbox">
<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"
}
}
}).use("node", "classnamemanager", "checkboxcss", function(Y) {
Y.on("contentready", function () {
var 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
forAttr = (Y.UA.ie && Y.UA.ie < 8) ? "htmlFor" : "for",
bBlockDocumentMouseUp = false,
bBlockClearActive = false,
oActiveCheckbox;
var isLabel = function (node) {
return (node.get("nodeName").toLowerCase() === "label");
};
var getCheckboxForLabel = function (label) {
var sID = label.getAttribute(forAttr),
oInput,
oCheckbox;
if (sID) {
oInput = Y.Node.get("#" + sID);
if (oInput) {
oCheckbox = getCheckbox(oInput);
}
}
return oCheckbox;
};
var getCheckbox = function (node) {
return (node.hasClass("yui-checkbox") ? node : node.ancestor(".yui-checkbox"));
};
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 onDocumentMouseOver = function (event) {
var oCheckbox = getCheckbox(event.target);
if (oActiveCheckbox && oActiveCheckbox === oCheckbox) {
oActiveCheckbox.addClass(sCheckboxActiveClass);
}
};
var onDocumentMouseOut = function (event) {
var oCheckbox = getCheckbox(event.target);
if (oActiveCheckbox && oActiveCheckbox === oCheckbox) {
oActiveCheckbox.removeClass(sCheckboxActiveClass);
}
};
var onDocumentMouseUp = function (event) {
var oCheckbox;
if (!bBlockDocumentMouseUp) {
oCheckbox = getCheckbox(event.target);
if ((oCheckbox && oActiveCheckbox !== oCheckbox) || !oCheckbox) {
clearActiveCheckbox();
}
}
bBlockDocumentMouseUp = false;
};
var onDocumentKeyUp = function (event) {
var oCheckbox = getCheckbox(event.target);
if ((oCheckbox && oActiveCheckbox !== oCheckbox) || !oCheckbox) {
clearActiveCheckbox();
}
};
var onCheckboxFocus = function (event) {
var oCheckbox = getCheckbox(event.target);
if (oCheckbox) {
oCheckbox.addClass(sCheckboxFocusClass);
}
};
var onCheckboxBlur = function (event) {
var oCheckbox = getCheckbox(event.target);
if (oCheckbox) {
oCheckbox.removeClass(sCheckboxFocusClass);
if (!bBlockClearActive && oCheckbox && oCheckbox === oActiveCheckbox) {
clearActiveCheckbox();
}
}
bBlockClearActive = false;
};
var onCheckboxClick = function (event) {
var oTarget = event.target,
oCheckbox = getCheckbox(oTarget),
oInput;
if (!isLabel(oTarget) && oCheckbox && oCheckbox === oActiveCheckbox) {
oInput = oCheckbox.query("input");
if (oInput) {
// If the click event was fired via the keyboard, the target
// will be the input elment and the checked state of the input
// element will therefore already be updated. 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.
if (oTarget !== oInput) {
oInput.set("checked", (!oInput.get("checked")));
}
updateCheckedState(oInput);
clearActiveCheckbox();
}
}
};
var onCheckboxMouseDown = function (event) {
var oTarget = event.target,
oCheckbox = getCheckbox(oTarget),
bTargetIsLabel = isLabel(oTarget),
oInput;
if (bTargetIsLabel) {
oCheckbox = getCheckboxForLabel(oTarget);
// 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;
}
if (oCheckbox) {
if (!bTargetIsLabel) {
oInput = oCheckbox.query("input");
if (oInput) {
oInput.focus();
}
// Prevent text selection if the user moves the mouse over the
// document after mousing down on the checkbox
event.preventDefault();
}
setActiveCheckbox(oCheckbox);
}
};
var onCheckboxKeyDown = function (event) {
var oCheckbox = getCheckbox(event.target);
// Active the checkbox when the user presses the space bar
if (oCheckbox && event.keyCode === 32) {
setActiveCheckbox(oCheckbox);
}
};
var oDocument = Y.Node.get("#checkboxes").get("ownerDocument");
oDocument.on("mouseover", onDocumentMouseOver);
oDocument.on("mouseout", onDocumentMouseOut);
oDocument.on("mouseup", onDocumentMouseUp);
oDocument.on("keyup", onDocumentKeyUp);
Y.on("mousedown", onCheckboxMouseDown, "#checkboxes");
Y.on("keydown", onCheckboxKeyDown, "#checkboxes");
Y.on("click", onCheckboxClick, "#checkboxes");
Y.on("focus", onCheckboxFocus, "#checkboxes");
Y.on("blur", onCheckboxBlur, "#checkboxes");
}, "#checkboxes");
});
</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>
<textarea name="code" class="HTML" cols="60" rows="1">
<span class="yui-checkbox">
<span>
<input type="checkbox">
</span>
</span>
</textarea>
<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>
All of the classes used for skinning the checkbox will be created using the
<a href="../../api/module_classnamemanager.html">ClassNameManager Utility</a>, since it makes for
easy generation and management of prefixed class names. The styles for each checkbox comes together
as follows:
</p>
<textarea name="code" class="CSS" cols="60" rows="1">
.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;
/*
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>
<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>
<textarea name="code" class="JScript" cols="60" rows="1">
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"
}
}
}).use("node", "classnamemanager", "checkboxcss", function(Y) {
Y.on("contentready", function () {
var 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
forAttr = (Y.UA.ie && Y.UA.ie < 8) ? "htmlFor" : "for",
bBlockDocumentMouseUp = false,
bBlockClearActive = false,
oActiveCheckbox;
var isLabel = function (node) {
return (node.get("nodeName").toLowerCase() === "label");
};
var getCheckboxForLabel = function (label) {
var sID = label.getAttribute(forAttr),
oInput,
oCheckbox;
if (sID) {
oInput = Y.Node.get("#" + sID);
if (oInput) {
oCheckbox = getCheckbox(oInput);
}
}
return oCheckbox;
};
var getCheckbox = function (node) {
return (node.hasClass("yui-checkbox") ? node : node.ancestor(".yui-checkbox"));
};
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 onDocumentMouseOver = function (event) {
var oCheckbox = getCheckbox(event.target);
if (oActiveCheckbox && oActiveCheckbox === oCheckbox) {
oActiveCheckbox.addClass(sCheckboxActiveClass);
}
};
var onDocumentMouseOut = function (event) {
var oCheckbox = getCheckbox(event.target);
if (oActiveCheckbox && oActiveCheckbox === oCheckbox) {
oActiveCheckbox.removeClass(sCheckboxActiveClass);
}
};
var onDocumentMouseUp = function (event) {
var oCheckbox;
if (!bBlockDocumentMouseUp) {
oCheckbox = getCheckbox(event.target);
if ((oCheckbox && oActiveCheckbox !== oCheckbox) || !oCheckbox) {
clearActiveCheckbox();
}
}
bBlockDocumentMouseUp = false;
};
var onDocumentKeyUp = function (event) {
var oCheckbox = getCheckbox(event.target);
if ((oCheckbox && oActiveCheckbox !== oCheckbox) || !oCheckbox) {
clearActiveCheckbox();
}
};
var onCheckboxFocus = function (event) {
var oCheckbox = getCheckbox(event.target);
if (oCheckbox) {
oCheckbox.addClass(sCheckboxFocusClass);
}
};
var onCheckboxBlur = function (event) {
var oCheckbox = getCheckbox(event.target);
if (oCheckbox) {
oCheckbox.removeClass(sCheckboxFocusClass);
if (!bBlockClearActive && oCheckbox && oCheckbox === oActiveCheckbox) {
clearActiveCheckbox();
}
}
bBlockClearActive = false;
};
var onCheckboxClick = function (event) {
var oTarget = event.target,
oCheckbox = getCheckbox(oTarget),
oInput;
if (!isLabel(oTarget) && oCheckbox && oCheckbox === oActiveCheckbox) {
oInput = oCheckbox.query("input");
if (oInput) {
// If the click event was fired via the keyboard, the target
// will be the input elment and the checked state of the input
// element will therefore already be updated. 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.
if (oTarget !== oInput) {
oInput.set("checked", (!oInput.get("checked")));
}
updateCheckedState(oInput);
clearActiveCheckbox();
}
}
};
var onCheckboxMouseDown = function (event) {
var oTarget = event.target,
oCheckbox = getCheckbox(oTarget),
bTargetIsLabel = isLabel(oTarget),
oInput;
if (bTargetIsLabel) {
oCheckbox = getCheckboxForLabel(oTarget);
// 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;
}
if (oCheckbox) {
if (!bTargetIsLabel) {
oInput = oCheckbox.query("input");
if (oInput) {
oInput.focus();
}
// Prevent text selection if the user moves the mouse over the
// document after mousing down on the checkbox
event.preventDefault();
}
setActiveCheckbox(oCheckbox);
}
};
var onCheckboxKeyDown = function (event) {
var oCheckbox = getCheckbox(event.target);
// Active the checkbox when the user presses the space bar
if (oCheckbox && event.keyCode === 32) {
setActiveCheckbox(oCheckbox);
}
};
var oDocument = Y.Node.get("#checkboxes").get("ownerDocument");
oDocument.on("mouseover", onDocumentMouseOver);
oDocument.on("mouseout", onDocumentMouseOut);
oDocument.on("mouseup", onDocumentMouseUp);
oDocument.on("keyup", onDocumentKeyUp);
Y.on("mousedown", onCheckboxMouseDown, "#checkboxes");
Y.on("keydown", onCheckboxKeyDown, "#checkboxes");
Y.on("click", onCheckboxClick, "#checkboxes");
Y.on("focus", onCheckboxFocus, "#checkboxes");
Y.on("blur", onCheckboxBlur, "#checkboxes");
}, "#checkboxes");
});
</textarea> </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'>Using the 'focus' and 'blur' custom events</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'>Change Events (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='../attribute/attribute-getset.html'>Getters, Setters and Validators (included with examples for Attribute)</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.x Project</li><li class="item"><a title="The Yahoo! User Interface (YUI) Library, 3.x Branch, " href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site (external)</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="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI 3 on Sourceforge (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/3/license.html">YUI License (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI (Global Prerequisite) - Functional Examples" href="../../examples/yui/index.html">YUI (Global Prerequisite)</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</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</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="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</a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource</a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType</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="History - Functional Examples" href="../../examples/history/index.html">History</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="Queue - Functional Examples" href="../../examples/queue/index.html">Queue</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</a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider</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</a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin</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</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">The YUI Community</li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Forum (external)</a></li><li class="item"><a title="The Yahoo! Group yui3 is dedicated to the 3.x branch of the Yahoo! User Interface (YUI) Library." href="http://tech.groups.yahoo.com/group/yui3/">YUI 3 Forum (external)</a></li><li class="item"><a title="YUI is used by Yahoo! and by hundreds of other sites, including many you know and love." href="/yui/poweredby/">YUI Sightings (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><li class="sect">YUI Articles on the YUI Website</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="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/3/articles/hosting/">Serving YUI Files from Yahoo! (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 src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>