--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/node/index.html Tue Jul 16 14:29:46 2013 +0200
@@ -0,0 +1,952 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Node</title>
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
+ <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
+ <link rel="stylesheet" href="../assets/css/main.css">
+ <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
+ <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
+ <script src="../../build/yui/yui-min.js"></script>
+
+</head>
+<body>
+<!--
+<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
+-->
+<div id="doc">
+ <div id="hd">
+ <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
+ </div>
+
+ <a href="#toc" class="jump">Jump to Table of Contents</a>
+
+
+ <h1>Node</h1>
+ <div class="yui3-g">
+ <div class="yui3-u-3-4">
+ <div id="main">
+ <div class="content"><div class="intro">
+ <p>
+ The Node Utility provides an expressive way to collect, create, and
+ manipulate DOM nodes. Each <code>Node</code> instance represents an underlying
+ DOM node, and each <code>NodeList</code> represents a collection of DOM nodes.
+ </p>
+
+ <p>
+ In addition to wrapping the basic DOM API and handling cross browser
+ issues, <code>Node</code>s provide convenient methods for managing CSS classes,
+ setting or animating styles, subscribing to events, updating or
+ dynamically loading content, and lots more.
+ </p>
+
+ <p>
+ <strong>Note:</strong><em>The <code>Y.get()</code>, <code>node.query()</code>, and
+ <code>node.queryAll()</code> methods have been removed. Use <code>Y.one()</code>,
+ <code>node.one()</code>, and <code>node.all()</code>.</em>
+ </p>
+
+</div>
+
+<h2 id="getting-started">Getting Started</h2>
+
+<p>
+To include the source files for Node and its dependencies, first load
+the YUI seed file if you haven't already loaded it.
+</p>
+
+<pre class="code prettyprint"><script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script></pre>
+
+
+<p>
+Next, create a new YUI instance for your application and populate it with the
+modules you need by specifying them as arguments to the <code>YUI().use()</code> method.
+YUI will automatically load any dependencies required by the modules you
+specify.
+</p>
+
+<pre class="code prettyprint"><script>
+// Create a new YUI instance and populate it with the required modules.
+YUI().use('node', function (Y) {
+ // Node is available and ready for use. Add implementation
+ // code here.
+});
+</script></pre>
+
+
+<p>
+For more information on creating YUI instances and on the
+<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the
+documentation for the <a href="../yui/index.html">YUI Global Object</a>.
+</p>
+
+
+<h2 id="node-using">Using Nodes</h2>
+
+<p>
+ <code>Node</code> is the interface for DOM operations in YUI 3. The Node API is
+ based on the standard DOM API, and provides additional sugar properties
+ and methods that make common operations easier, and implementation code
+ more concise. Developers familiar with the standard DOM API will find
+ Node instances to be very familiar.
+</p>
+
+<h3 id="using-node">Getting a Node</h3>
+
+<pre class="code prettyprint">// Use Y.one( [css selector string] )
+var node = Y.one('#main');
+
+// Or pass an HTML element
+var bodyNode = Y.one(document.body);</pre>
+
+
+<p>
+ The simplest way to get a <code>Node</code> instance is using your YUI instance's
+ <code>one</code> method. <code>Y.one</code> accepts either an existing DOM element or a CSS
+ selector. If a selector string is used, the first matching element is used.
+ <a href="#nodelist">NodeLists</a> are also available for working with
+ collections of <code>Node</code>s.
+</p>
+
+<p>
+ <strong>Note:</strong> CSS3 selector support is not included by default
+ with Node. Add support by including the "selector-css3" module in your
+ <code>use()</code> statement.
+</p>
+
+<h3 id="create">Creating Nodes and Modifying Content</h3>
+
+<pre class="code prettyprint">// Create a new Node
+var item = Y.Node.create('<li id="step3" class="highlight"><em>Profit</em></li>');
+
+// Replace the content in a Node
+Y.one("#hello").setHTML("<h1>Hello, <em>World</em>!</h1>");
+
+// Append new markup inside a Node
+bodyNode.append("<p>This is the end, beautiful friend, the end.</p>");</pre>
+
+
+<p>
+ <code>Node</code>s have methods for
+ <a href="http://yuilibrary.com/yui/docs/api/classes/Node.html#method_append">appending</a>,
+ <a href="http://yuilibrary.com/yui/docs/api/classes/Node.html#method_prepend">prepending</a>,
+ <a href="http://yuilibrary.com/yui/docs/api/classes/Node.html#method_setHTML">replacing</a>, and
+ <a href="http://yuilibrary.com/yui/docs/api/classes/Node.html#method_insert">inserting</a>
+ content. The static method
+ <a href="http://yuilibrary.com/yui/docs/api/classes/Node.html#method_create"><code>Y.Node.create()</code></a>
+ is provided to create new <code>Node</code>s that you want to work with a bit more
+ before attaching them to the DOM.
+</p>
+
+<p>
+ As noted in <a href="#node-methods">DOM Methods</a> below, the standard DOM
+ API methods, such as <code>appendChild</code> and <code>insertBefore</code> are also available to
+ manipulate the DOM structure.
+</p>
+
+<h3 id="node-properties">Accessing Node Properties</h3>
+
+<pre class="code prettyprint">var imgNode = Y.one('#preview');
+var labelNode = imgNode.get('nextSibling'); // Node instance
+
+var bigSrc = thumbnail.get('src').slice(0, -4) + '-big.jpg';
+
+imgNode.set('src', bigSrc);
+imgNode.set('title', thumbnail.get('title');
+labelNode.setHTML(thumbnail.get('title'));</pre>
+
+<p>
+ Properties of the underlying DOM node are accessed via the <code>Node</code>
+ instance's <code>set</code> and <code>get</code> methods. For simple property types (strings,
+ numbers, booleans), these pass directly to/from the underlying node, but
+ properties that normally return DOM nodes return <code>Node</code> instances
+ instead.
+</p>
+
+
+<h3 id="node-events">DOM Events</h3>
+
+<pre class="code prettyprint">Y.one('#demo').on('click', function(e) {
+ e.preventDefault();
+ alert('event: ' + e.type + ' target: ' + e.target.get('tagName'));
+});</pre>
+
+
+<p>
+ Use the <code>on</code> method to add an event listener to a <code>Node</code> instance. The
+ event object passed as the first argument to each listener is an event
+ facade that, like the Node API, normalizes browser differences and provides
+ a standard API for working with DOM events based on the W3C standard. All
+ properties of the event object that would normally return DOM elements
+ return <code>Node</code> instances.
+</p>
+
+<p>
+ For more details, check out <a href="../event/index.html">the Event user
+ guide</a>.
+</p>
+
+<h3 id="node-methods">DOM Methods</h3>
+
+<pre class="code prettyprint">var tasklist = Y.one('ul#tasklist');
+var item3 = tasklist.appendChild( Y.one('#pending .item-3') );
+
+item3.addClass('highlight');</pre>
+
+
+<p>
+ The <code>Node</code> API provides all of the DOM methods you would expect, plus a
+ few extras to help with common tasks. As with properties and events, any
+ methods that would normally return DOM nodes instead return <code>Node</code>
+ instances.
+</p>
+
+<h3 id="nodelist">Working With Collections of Nodes</h3>
+
+<p>
+ <code>NodeList</code> is the class for working with groups of <code>Node</code>s.
+</p>
+
+<pre class="code prettyprint">var doneTasks = Y.all('#tasklist .completed');
+
+// NodeLists host most Node methods for simple iterative operations
+doneTasks.removeClass('highlight');
+
+// or call each() to do more work on each Node
+doneTasks.each(function (taskNode) {
+ taskNode.transition({ opacity: 0 }, function () {
+ completedTasklist.appendChild(this);
+ });
+});</pre>
+
+
+<p>
+ The <code>Y.all</code> method is the simplest way to get a <code>NodeList</code>, but throughout
+ the library, any property or method that would return a collection of HTML
+ elements will return a <code>NodeList</code>.
+</p>
+
+<pre class="code prettyprint">var nodelist = taskList.get('childNodes');</pre>
+
+
+<p>
+ The <code>NodeList</code> provides a <code>Node</code>-like interface for manipulating multiple
+ <code>Node</code>s through a single interface. The <code>NodeList</code> API is a pared-down
+ version of the <code>Node</code> API for simple operations, plus common <code>Array</code>
+ methods such as
+ <a href="http://yuilibrary.com/yui/docs/api/classes/NodeList.html#method_slice"><code>slice()</code></a> and
+ <a href="http://yuilibrary.com/yui/docs/api/classes/NodeList.html#method_pop"><code>pop()</code></a> for
+ modifying the internal list of wrapped <code>Node</code>s, and some general purpose
+ iteration methods such as
+ <a href="http://yuilibrary.com/yui/docs/api/classes/NodeList.html#method_each"><code>each()</code></a> and
+ <a href="http://yuilibrary.com/yui/docs/api/classes/NodeList.html#method_some"><code>some()</code></a>.
+</p>
+
+
+<h3 id="node-query">Query a Node's Descendants</h3>
+
+<pre class="code prettyprint">var node = Y.one('#demo');
+
+var firstPara = node.one('p');
+
+if (firstPara) { // might be null
+ // adds "bar" to the first paragraph descendant of #demo
+ firstPara.addClass('bar');
+}
+
+// adds class "syntax-highlight" to all <pre> descendants of #demo
+node.all('pre').addClass('syntax-highlight');</pre>
+
+
+<p>
+ Like <code>Y.one()</code> and <code>Y.all()</code>, <code>Node</code> instances have <code>one()</code> and <code>all()</code>
+ methods for querying their descendants.
+</p>
+
+<p>
+ Using selectors to capture descendants is faster and more convenient than
+ relying on DOM properties such as <code>childNodes</code> and <code>nextSibling</code> since you
+ don't have to worry about working around text nodes or recursing into
+ element subtrees.
+</p>
+<p>
+ Using <code>one()</code> and <code>all()</code> from a <code>Node</code> rather than <code>Y</code> can aid performance
+ in large pages as well, because <code>Y.one()</code> and <code>Y.all()</code> always query from
+ the <code>document</code>, which will scan a lot more elements.
+</p>
+
+<p>
+ For more information on selector queries, see the following W3C
+ specifications:
+</p>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/css3-selectors/">CSS Level 3 Selectors</a></li>
+ <li><a href="http://www.w3.org/TR/selectors-API/">Selectors API</a></li>
+</ul>
+
+<p>
+ <strong>Note:</strong> CSS3 selector support is not included by default
+ with Node, you will need to include the "selector-css3" module for CSS3
+ support.
+</p>
+
+
+<h2 id="node-aria">ARIA Support</h2>
+
+<p>
+ The Node interface has support for <a
+ href="http://www.w3.org/TR/wai-aria/">ARIA</a>. When used with Node's
+ built-in support for CSS selector queries, it is easy to both apply and
+ manage a Node's <a href="http://www.w3.org/TR/wai-aria/#roles">roles</a>,
+ <a href="http://www.w3.org/TR/wai-aria/#supportedState">states and
+ properties</a>.
+<p>
+
+<p>
+ The ARIA Roles, States and Properties enhance the semantics of HTML,
+ allowing developers to more accurately describe the intended purpose of a
+ region of a page, or a DHTML widget, thereby improving the user experience
+ for users of assistive technology, such as screen readers.
+</p>
+
+<p>
+ Apply any of the ARIA Roles, States and Properties via the <code>set</code> method.
+ For example, to apply the role of <a
+ href="http://www.w3.org/TR/wai-aria/#toolbar"><code>toolbar</code></a> to a <code><div></code>
+ with an id of "toolbar":
+</p>
+
+<pre class="code prettyprint">var node = Y.one('#toolbar').set('role', 'toolbar');</pre>
+
+
+<p>
+ Node's built-in support for CSS selector queries, method chaining, and
+ ability to set multiple attributes on a single Node instance makes it
+ especially easy to apply the ARIA Roles, States, and Properties when
+ building DHTML widgets with a large subtree. For example, when building a
+ menubar widget it is necessary to apply a role of
+ <a href="http://www.w3.org/TR/wai-aria/#menubar"><code>menubar</code></a> to the root
+ DOM element representing the menubar, and the role of
+ <a href="http://www.w3.org/TR/wai-aria/#menu"><code>menu</code></a> to the root DOM
+ element representing each submenu. Additionally, as each submenu is hidden
+ by default, the
+ <a href="http://www.w3.org/TR/wai-aria/#aria-"><code>aria-hidden</code></a> state will
+ need to be applied to each submenu as well. The Node interface makes it
+ possible to do all of this in one line of code:
+</p>
+
+<pre class="code prettyprint">Y.one('#root').set('role', 'menubar').all('.menu').setAttrs({ role: 'menu', 'aria-hidden': true });</pre>
+
+
+<h2 id="node-migration">Migration Table</h2>
+
+<p>
+ The following table is included to help users migrating from YUI 2. Most
+ of the functionality from <code>YAHOO.util.Dom</code> is available via <code>Node</code>.
+</p>
+
+<p>
+ <strong>Note</strong> In the snippets below, <code>myNode</code> is an instance of
+ <code>Node</code>. Methods that normally would return DOM nodes now return Node
+ instances.
+</p>
+
+<table class="yui-table">
+<thead>
+ <tr>
+ <th>2.x <code>YAHOO.util.???</code></th>
+ <th>3.0</th>
+ </tr>
+</thead>
+<tbody>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.get('elementId');</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">Y.one('#elementId');</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.getElementsBy(someFilterFunction);</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.all('selectorString');</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.getElementsByClassName('highlight');</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.all('.highlight');</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.getChildren(el);</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.get('children');</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.getChildrenBy(someFilterFunction);</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.all('selectorString');</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.getFirstChild(parentEl);</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.one('*');</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.getFirstChildBy(someFilterFunction);</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.one('> selectorString');</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.getLastChild(el);
+Dom.getLastChildBy(someFilterFunction);</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.get('children').slice(-1).item(0);
+// OR target the node with a selector
+myNode.one('> selector:last-of-type');</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.getNextSibling(el);
+Dom.getNextSiblingBy(someFilterFunction);
+Dom.getPreviousSibling(el);
+Dom.getPreviousSiblingBy(someFilterFunction);</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.next();
+myNode.next('selectorString');
+myNode.previous();
+myNode.previous('selectorString');</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.getAncestorBy(someFilterFunction);
+Dom.getAncestorByClassName('highlight');
+Dom.getAncestorByTagName('pre');</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.ancestor(someFilterFunction);
+myNode.ancestor('.highlight');
+myNode.ancestor('pre');</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.isAncestor(ancestorEl, el);</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">ancestorNode.contains(myNode);</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.insertAfter(el, afterEl);
+Dom.insertBefore(el, beforeNode);</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">afterNode.insert(myNode, 'after');
+beforeNode.insert(myNode, 'before');</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.addClass('highlight');</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.addClass('highlight');</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.removeClass(el, 'highlight');</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.removeClass('highlight');</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.replaceClass(el, 'high', 'low');</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.replaceClass('high', 'low');</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.hasClass(el, 'highlight');</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.hasClass('highlight');</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.getStyle(el, 'backgroundColor');</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.getStyle('backgroundColor');</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.setStyle(el, 'borderColor', '#C0FFEE');</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.setStyle('borderColor', '#C0FFEE');</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.getXY(el);
+Dom.getX(el);
+Dom.getY(el);</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.getXY();
+myNode.getX();
+myNode.getY();</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.setXY(el, [ 500, 300 ]);
+Dom.setX(el, 500);
+Dom.setY(el, 300);</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.setXY([ 500, 300 ]);
+myNode.setX(500);
+myNode.setY(300);</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.inDocument(el);</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.inDoc();</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.batch(elementArray,
+ Dom.addClass, 'highlight');</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNodelist.addClass('highlight');
+// OR
+myNodelist.each(function (node) {
+ node.addClass('highlight')
+});
+// OR
+Y.Array.each(myNodelist, function (node) {
+ node.addClass('highlight');
+});</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.generateId();</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">Y.guid();</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.getViewportHeight();
+Dom.getViewportWidth();</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.get('winHeight');
+myNode.get('winWidth');</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.getDocumentHeight();
+Dom.getDocumentWidth();</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.get('docHeight');
+myNode.get('docWidth');</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.getClientRegion();</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.get('viewportRegion');</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.getRegion(el);</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.get('region');</pre>
+
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="code prettyprint">Dom.getDocumentScrollLeft();
+Dom.getDocumentScrollTop();</pre>
+
+ </td>
+ <td>
+<pre class="code prettyprint">myNode.get('docScrollX');
+myNode.get('docScrollY');</pre>
+
+ </td>
+ </tr>
+</tbody>
+</table>
+</div>
+ </div>
+ </div>
+
+ <div class="yui3-u-1-4">
+ <div class="sidebar">
+
+ <div id="toc" class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Table of Contents</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="toc">
+<li>
+<a href="#getting-started">Getting Started</a>
+</li>
+<li>
+<a href="#node-using">Using Nodes</a>
+<ul class="toc">
+<li>
+<a href="#using-node">Getting a Node</a>
+</li>
+<li>
+<a href="#create">Creating Nodes and Modifying Content</a>
+</li>
+<li>
+<a href="#node-properties">Accessing Node Properties</a>
+</li>
+<li>
+<a href="#node-events">DOM Events</a>
+</li>
+<li>
+<a href="#node-methods">DOM Methods</a>
+</li>
+<li>
+<a href="#nodelist">Working With Collections of Nodes</a>
+</li>
+<li>
+<a href="#node-query">Query a Node's Descendants</a>
+</li>
+</ul>
+</li>
+<li>
+<a href="#node-aria">ARIA Support</a>
+</li>
+<li>
+<a href="#node-migration">Migration Table</a>
+</li>
+</ul>
+ </div>
+ </div>
+
+
+
+ <div class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Examples</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="examples">
+
+
+ <li data-description="Using selectors and property accessors with Node.">
+ <a href="properties.html">Set and Get Properties</a>
+ </li>
+
+
+
+ <li data-description="Using DOM methods with Node.">
+ <a href="dom-node.html">DOM Methods</a>
+ </li>
+
+
+
+ <li data-description="Building a simple store and shopping cart.">
+ <a href="store.html">DOM Methods - Store</a>
+ </li>
+
+
+
+ <li data-description="Listening for DOM events with Node instances.">
+ <a href="events.html">Handling DOM Events</a>
+ </li>
+
+
+
+ <li data-description="NodeList provides Node functionality for manipulating multiple nodes at once.">
+ <a href="nodelist.html">Using NodeList - Simple</a>
+ </li>
+
+
+
+ <li data-description="How to use multiple NodeList features to build a simple game.">
+ <a href="ducks.html">Using NodeList - Ducks Game</a>
+ </li>
+
+
+
+ <li data-description="Using a single event listener to handle events on multiple nodes.">
+ <a href="node-evt-delegation.html">Delegating Node Events</a>
+ </li>
+
+
+
+ <li data-description="This example demonstrates how to position an element in page coordinates.">
+ <a href="node-xy.html">Node Positioning</a>
+ </li>
+
+
+
+ <li data-description="This example demonstrates how to set styles and get style information.">
+ <a href="node-style.html">Node Styling</a>
+ </li>
+
+
+
+ <li data-description="This example demonstrates how to insert content into a Node.">
+ <a href="node-insert.html">Adding Node Content - Burger Builder</a>
+ </li>
+
+
+
+ <li data-description="This example demonstrates how to show and hide a Node.">
+ <a href="node-view.html">Showing and Hiding</a>
+ </li>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ </ul>
+ </div>
+ </div>
+
+
+
+ <div class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Examples That Use This Component</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="examples">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li data-description="Creating an accessible toolbar using the Focus Manager Node Plugin and Node's support for the WAI-ARIA Roles and States.">
+ <a href="../node-focusmanager/node-focusmanager-toolbar.html">Accessible Toolbar</a>
+ </li>
+
+
+
+ <li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event's delegation support and mouseenter event, along with the Overlay widget and Node's support for the WAI-ARIA Roles and States.">
+ <a href="../node-focusmanager/node-focusmanager-button.html">Accessible Menu Button</a>
+ </li>
+
+
+
+ <li data-description="Use the Event Utility to attach simple DOM event handlers.">
+ <a href="../event/basic-example.html">Simple DOM Events</a>
+ </li>
+
+
+
+ <li data-description="Example Photo Browser application.">
+ <a href="../dd/photo-browser.html">Photo Browser</a>
+ </li>
+
+
+
+ <li data-description="Portal style example using Drag & Drop Event Bubbling and Animation.">
+ <a href="../dd/portal-drag.html">Portal Style Example</a>
+ </li>
+
+
+
+ <li data-description="Use IO to request XML data from a remote web service.">
+ <a href="../io/weather.html">Request XML data from Yahoo! Weather</a>
+ </li>
+
+
+
+ <li data-description="Use IO to make a cross-domain request to Yahoo! Pipes, returning data from disparate sources.">
+ <a href="../io/xdr.html">Request JSON using Yahoo! Pipes</a>
+ </li>
+
+
+ </ul>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+</div>
+
+<script src="../assets/vendor/prettify/prettify-min.js"></script>
+<script>prettyPrint();</script>
+
+<script>
+YUI.Env.Tests = {
+ examples: [],
+ project: '../assets',
+ assets: '../assets/node',
+ name: 'node',
+ title: 'Node',
+ newWindow: '',
+ auto: false
+};
+YUI.Env.Tests.examples.push('properties');
+YUI.Env.Tests.examples.push('dom-node');
+YUI.Env.Tests.examples.push('store');
+YUI.Env.Tests.examples.push('events');
+YUI.Env.Tests.examples.push('nodelist');
+YUI.Env.Tests.examples.push('ducks');
+YUI.Env.Tests.examples.push('node-evt-delegation');
+YUI.Env.Tests.examples.push('node-xy');
+YUI.Env.Tests.examples.push('node-style');
+YUI.Env.Tests.examples.push('node-insert');
+YUI.Env.Tests.examples.push('node-view');
+YUI.Env.Tests.examples.push('node-focusmanager-toolbar');
+YUI.Env.Tests.examples.push('node-focusmanager-button');
+YUI.Env.Tests.examples.push('basic-example');
+YUI.Env.Tests.examples.push('photo-browser');
+YUI.Env.Tests.examples.push('portal-drag');
+YUI.Env.Tests.examples.push('weather');
+YUI.Env.Tests.examples.push('xdr');
+
+</script>
+<script src="../assets/yui/test-runner.js"></script>
+
+
+
+</body>
+</html>