mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-14 13:33:14 +00:00
377 lines
26 KiB
HTML
377 lines
26 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>YUI Library Examples: Event Utility: Using 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);}
|
|
</style>
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
|
|
<!--Script and CSS includes for YUI dependencies on this page-->
|
|
<link rel="stylesheet" type="text/css" href="../../build/logger/assets/skins/sam/logger.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
|
<script type="text/javascript" src="../../build/yuiloader/yuiloader-min.js"></script>
|
|
<script type="text/javascript" src="../../build/event/event-debug.js"></script>
|
|
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
|
|
<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
|
|
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
|
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
|
|
|
|
|
<!--begin custom header content for this example-->
|
|
<style type="text/css">
|
|
#container {width:400px; height:100px; padding:10px; border:1px dotted black;background-color:#CCCCCC; cursor:pointer;}
|
|
#resizer {width:200px; height:75px; background-color:#00CCFF;}
|
|
#subscriberWidth {width:200px; height:75px; margin-top:10px;background-color:#CC9966;}
|
|
#subscriberHeight {width:200px; height:75px; margin-top:10px;background-color:#FF3333;}
|
|
</style>
|
|
|
|
|
|
<!--end custom header content for this example-->
|
|
|
|
|
|
<script type="text/javascript">
|
|
//enable passthrough of errors from YUI Event:
|
|
if ((typeof YAHOO !== "undefined") && (YAHOO.util) && (YAHOO.util.Event)) {
|
|
YAHOO.util.Event.throwErrors = true;
|
|
}
|
|
</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/">YUI Library Home</a></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/yui.gif" border="0" height="38"></a></div>
|
|
<div id="pagetitle"><h1>YUI Library Examples: Event Utility: Using Custom Events</h1></div>
|
|
</div>
|
|
<div id="bd">
|
|
|
|
<div id="yui-main">
|
|
<div class="yui-b">
|
|
<div class="yui-ge">
|
|
<div class="yui-u first example">
|
|
|
|
|
|
<div class="promo">
|
|
<h1>Event Utility: Using Custom Events</h1>
|
|
|
|
<div class="exampleIntro">
|
|
<p>Clicking in the grey box resizes the blue <code><div></code> within it. We consider this an "interesting moment" in our script, so we create a <a href="/yui/event/#customevent">Custom Event</a> called <code>onSizeChange</code> that fires whenever the blue box is resized. This Custom Event, when fired, publishes the blue box's new size. <strong>Note:</strong> <code>onSizeChange</code> isn't a DOM event — it's an arbitrary "custom" event that has meaning in the context of our script, and an event that we think other scripts on the page might be interested in knowing about.</p>
|
|
|
|
<p>One subscriber to our <code>onSizeChange</code> Custom Event looks at the new width and resizes the brown box to match. A second subscriber looks at the blue <code><div></code>'s new height and resizes the red box to match. </p>
|
|
</div>
|
|
|
|
<div class="example-container module ">
|
|
<div class="hd exampleHd">
|
|
<p class="newWindowButton yui-skin-sam"><!--<span id="newWindowLinkx"><span class="first-child">--><a href="custom-event_clean.html" target="_blank">View example in new window.</a><!--</span></span>-->
|
|
</div> <div id="example-canvas" class="bd">
|
|
|
|
|
|
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
<div id="container">
|
|
<div id="resizer">
|
|
Click anywhere within the grey box
|
|
to resize me.
|
|
</div>
|
|
</div>
|
|
<div id="subscriberWidth">
|
|
<strong>Width will resize to match blue
|
|
box.</strong>
|
|
</div>
|
|
<div id="subscriberHeight">
|
|
<strong>Height will resize to match blue
|
|
box.</strong>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
|
|
//create a new custom event, to be fired
|
|
//when the resizer div's size is changed
|
|
var onSizeChange = new YAHOO.util.CustomEvent("onSizeChange");
|
|
|
|
//get local references to dom elements,
|
|
//for convenience
|
|
var container = YAHOO.util.Dom.get("container");
|
|
var resizer = YAHOO.util.Dom.get("resizer");
|
|
|
|
//when the container is clicked on, change the
|
|
//dimensions of the resizer -- as long as it appears
|
|
//to be a valid new size (>0 width, >12 height).
|
|
function fnClick(e){
|
|
|
|
//0,0 point is the top left corner of the container,
|
|
//minus its padding:
|
|
var containerX = YAHOO.util.Dom.getX("container");
|
|
var containerY = YAHOO.util.Dom.getY("container");
|
|
var clickX = YAHOO.util.Event.getPageX(e);
|
|
var clickY = YAHOO.util.Event.getPageY(e);
|
|
//get container padding using Dom's getStyle():
|
|
var containerPaddingX = parseInt(YAHOO.util.Dom.getStyle("container","padding-left"), 10);
|
|
var containerPaddingY = parseInt(YAHOO.util.Dom.getStyle("container","padding-top"), 10);
|
|
var newWidth = clickX - containerX - containerPaddingX;
|
|
var newHeight = clickY - containerY - containerPaddingY;
|
|
|
|
//if there is a valid new dimension, we'll change
|
|
//resizer and fire our custom event
|
|
if ((newWidth > 0)||(newHeight > 12)) {
|
|
//correct new height/width to guarantee
|
|
//minimum of 0x12
|
|
if (newWidth < 0) {newWidth = 1;}
|
|
if (newHeight < 12) {newHeight = 12;}
|
|
//show new dimensions in resizer:
|
|
YAHOO.util.Dom.get("resizer").innerHTML = "New size: " + newWidth + "x" + newHeight;
|
|
//change the dimensions of resizer, using
|
|
//Dom's setStyle:
|
|
YAHOO.util.Dom.setStyle("resizer", "width", newWidth + "px");
|
|
YAHOO.util.Dom.setStyle("resizer", "height", newHeight + "px");
|
|
|
|
//fire the custom event, passing
|
|
//the new dimensions in as an argument;
|
|
//our subscribers will be able to use this
|
|
//information:
|
|
onSizeChange.fire({width: newWidth, height: newHeight});
|
|
};
|
|
|
|
}
|
|
|
|
//listen for clicks on the container
|
|
YAHOO.util.Event.addListener("container", 'click', fnClick);
|
|
|
|
//a handler to respond to the custom event that
|
|
//we're firing when the resizer changes size; we'll
|
|
//resize its width to match the resizer.
|
|
fnSubscriberWidth = function(type, args) {
|
|
var elWidth = YAHOO.util.Dom.get("subscriberWidth");
|
|
var newWidth = args[0].width;
|
|
YAHOO.util.Dom.setStyle(elWidth, "width", (newWidth + "px"));
|
|
elWidth.innerHTML = ("My new width: " + newWidth + "px");
|
|
YAHOO.log("The Custom Event fired; the the new width is " + newWidth + "px.", "info", "example");
|
|
}
|
|
|
|
//another handler to respond to the custom event that
|
|
//we're firing when the resizer changes size; this
|
|
//one cares about the height of the resizer.
|
|
fnSubscriberHeight = function(type, args) {
|
|
var elHeight = YAHOO.util.Dom.get("subscriberHeight");
|
|
var newHeight = args[0].height;
|
|
YAHOO.util.Dom.setStyle(elHeight, "height", (newHeight + "px"));
|
|
elHeight.innerHTML = ("My new height: " + newHeight + "px");
|
|
YAHOO.log("The Custom Event fired; the the new height is " + newHeight + "px.", "info", "example");
|
|
}
|
|
|
|
//all that remains is to subscribe our
|
|
//handlers to the <code>onSizeChange</code> custom event:
|
|
onSizeChange.subscribe(fnSubscriberWidth);
|
|
onSizeChange.subscribe(fnSubscriberHeight);
|
|
|
|
|
|
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
|
|
|
|
})();
|
|
|
|
</script>
|
|
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="first">Using Custom Events</h2>
|
|
|
|
<p><a href="/yui/event/#customevent">Custom Events</a>, part of the <a href="http://developer.yahoo.com/yui/event/">YUI Event Utility</a>, are special developer-created events that express the occurance of and information about interesting moments taking place on a page. Custom Events can be subscribed to by any script on the page; the publisher of the Custom Event knows nothing about the subscribers, and individual subscribers don't need to know anything about each other.</p>
|
|
|
|
<p>To illustrate the use of Custom Event, we'll create a single <code><div></code> called <code>resizer</code> that resizes itself when its container is clicked. When we resize this <code><div></code> we'll publish a Custom Event, <code>onSizeChange</code>, that reports the new height and width of our resizer. We will have two modules that subscribe to this information; the first will respond by changing its height to remain the same as the resizer's height and the second will change its width. </p>
|
|
<p>Start with some simple CSS rules and markup for the appearing elements:</p>
|
|
<textarea name="code" class="HTML" cols="60" rows="1"><style type="text/css">
|
|
#container {width:400px; height:100px; padding:10px; border:1px dotted black;background-color:#CCCCCC; cursor:pointer;}
|
|
#resizer {width:200px; height:75px; background-color:#00CCFF;}
|
|
#subscriberWidth {width:200px; height:75px; margin-top:10px;background-color:#CC9966;}
|
|
#subscriberHeight {width:200px; height:75px; margin-top:10px;background-color:#FF3333;}
|
|
</style>
|
|
|
|
<div id="container">
|
|
<div id="resizer">
|
|
Click anywhere within the grey box
|
|
to resize me.
|
|
</div>
|
|
</div>
|
|
<div id="subscriberWidth">
|
|
<strong>Width will resize to match blue
|
|
box.</strong>
|
|
</div>
|
|
<div id="subscriberHeight">
|
|
<strong>Height will resize to match blue
|
|
box.</strong>
|
|
</div></textarea>
|
|
|
|
<p>Next, we'll compose our script. We begin by creating our Custom Event instance. We'll <code>fire()</code> this Custom Event — that is, call its <code>fire</code> method — when our click handler executes and changes <code>resizer</code>'s width.</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">//create a new custom event, to be fired
|
|
//when the resizer div's size is changed
|
|
var onSizeChange = new YAHOO.util.CustomEvent("onSizeChange");</textarea>
|
|
|
|
|
|
<p>Our click handler, to be fired when the grey container <code><div></code> is clicked, performs a number of housekeeping tasks like figuring out the new size of the <code>resizer</code> element, making sure that a minimum size is maintained, etc. Note that it only fires the Custom Event if the click will result in a sane value for <code>resizer</code>'s height or width. Line 35 below is where we ultimately fire the Custom Event. We pass in the new height and width of <code>resizer</code> as an argument when we fire the Custom Event because we want our subscribers to have access to that information.</p>
|
|
<textarea name="code" class="JScript" cols="60" rows="1">//when the container is clicked on, change the
|
|
//dimensions of the resizer -- as long as it appears
|
|
//to be a valid new size (>0 width, >12 height).
|
|
function fnClick(e){
|
|
//0,0 point is the top left corner of the container,
|
|
//minus its padding:
|
|
var containerX = YAHOO.util.Dom.getX("container");
|
|
var containerY = YAHOO.util.Dom.getY("container");
|
|
var clickX = YAHOO.util.Event.getPageX(e);
|
|
var clickY = YAHOO.util.Event.getPageY(e);
|
|
//get container padding using Dom's getStyle():
|
|
var containerPaddingX = parseInt(YAHOO.util.Dom.getStyle("container","padding-left"), 10);
|
|
var containerPaddingY = parseInt(YAHOO.util.Dom.getStyle("container","padding-top"), 10);
|
|
var newWidth = clickX - containerX - containerPaddingX;
|
|
var newHeight = clickY - containerY - containerPaddingY;
|
|
|
|
//if there is a valid new dimension, we'll change
|
|
//resizer and fire our custom event
|
|
if ((newWidth > 0)||(newHeight > 12)) {
|
|
//correct new height/width to guarantee
|
|
//minimum of 0x12
|
|
if (newWidth < 0) {newWidth = 1;}
|
|
if (newHeight < 12) {newHeight = 12;}
|
|
//show new dimensions in resizer:
|
|
YAHOO.util.Dom.get("resizer").innerHTML = "New size: " + newWidth + "x" + newHeight;
|
|
//change the dimensions of resizer, using
|
|
//Dom's setStyle:
|
|
YAHOO.util.Dom.setStyle("resizer", "width", newWidth + "px");
|
|
YAHOO.util.Dom.setStyle("resizer", "height", newHeight + "px");
|
|
|
|
//fire the custom event, passing
|
|
//the new dimensions in as an argument;
|
|
//our subscribers will be able to use this
|
|
//information:
|
|
onSizeChange.fire({width: newWidth, height: newHeight});
|
|
};
|
|
}</textarea>
|
|
|
|
<p>We now have a Custom Event and we're firing it at the right time, passing in the relevant data payload. The next step is to create functions that respond and react to this change. We've specified that we'll have one function that will pay attention to our <code>onSizeChange</code> Custom Event, get the new width of <code>resizer</code>, and change the width of the brown box to match; another function will do the same for the red box's height. Note that the argument we passed in when we fired the Custom Event (an object literal: <code>{width: x, height: y}</code>) is available to us in the second argument received by our handlers. That second argument is an array, and our object is the first item in the array.</p>
|
|
<textarea name="code" class="JScript" cols="60" rows="1">//a handler to respond to the custom event that
|
|
//we're firing when the resizer changes size; we'll
|
|
//resize its width to match the resizer.
|
|
fnSubscriberWidth = function(type, args) {
|
|
var elWidth = YAHOO.util.Dom.get("subscriberWidth");
|
|
var newWidth = args[0].width;
|
|
YAHOO.util.Dom.setStyle(elWidth, "width", (newWidth + "px"));
|
|
elWidth.innerHTML = ("My new width: " + newWidth + "px");
|
|
}
|
|
|
|
//another handler to respond to the custom event that
|
|
//we're firing when the resizer changes size; this
|
|
//one cares about the height of the resizer.
|
|
fnSubscriberHeight = function(type, args) {
|
|
var elHeight = YAHOO.util.Dom.get("subscriberHeight");
|
|
var newHeight = args[0].height;
|
|
YAHOO.util.Dom.setStyle(elHeight, "height", (newHeight + "px"));
|
|
elHeight.innerHTML = ("My new height: " + newHeight + "px");
|
|
}</textarea>
|
|
|
|
<p>The final step in this example is to <code>subscribe</code> our Custom Event handlers to the <code>onSizeChange</code> Custom Event we created in the first script step. We do this by calling <code>onSizeChange</code>'s subscribe method and passing in the functions we want to subscribe:</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
onSizeChange.subscribe(fnSubscriberWidth);
|
|
onSizeChange.subscribe(fnSubscriberHeight);
|
|
</textarea>
|
|
|
|
<p>This is a simple example of how to use Custom Events. One of the powerful things about this concept is how far it can extend — we only have two subscribers in this example, but we could have from zero to <em>n</em> subscribers. Custom Events give you granular control over scope and firing order and are an excellent way to provide inter-module messaging within your application.</p>
|
|
|
|
|
|
<h2>Configuration for This Example</h2>
|
|
|
|
<p>You can load the necessary JavaScript and CSS for this example from Yahoo's servers. <a href="http://developer.yahoo.com/yui/articles/hosting/?event&dom&MIN#configure">Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured</a>.</p>
|
|
|
|
</div>
|
|
<div class="yui-u">
|
|
<div id="loggerModule" class="yui-skin-sam">
|
|
<h3 class="firstContent">YUI Logger Output:</h3>
|
|
<div id="loggerDiv"></div>
|
|
<div id="loggerGloss">
|
|
<p><strong>Note:</strong> You are viewing this example in debug mode with logging enabled. This can significantly slow performance.</p>
|
|
|
|
<p class="loggerButton"><span id="loggerLink"><span class="first-child"><a href="custom-event.html">Reload with logging<br />and debugging disabled.</a></span></span></p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="examples">
|
|
<h3>Event Utility Examples:</h3>
|
|
|
|
<div id="exampleToc">
|
|
<ul>
|
|
<li><a href='../event/eventsimple.html'>Simple Event Handling and Processing</a></li><li class='selected'><a href='../event/custom-event.html'>Using Custom Events</a></li><li><a href='../event/event-timing.html'>Using onAvailable, onContentReady, and onDOMReady</a></li><li><a href='../event/event-delegation.html'>Using Event Utility and Event Delegation to Improve Performance</a></li><li><a href='../event/event-focus-blur.html'>Skinning via Progressive Enhancement using the Event Utility and the YUILoader</a></li><li><a href='../container/keylistener.html'>Implementing Container Keyboard Shortcuts with KeyListener (included with examples for Container Family)</a></li><li><a href='../container/container-ariaplugin.html'>Using the Container ARIA Plugin (included with examples for Container Family)</a></li> </ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="module">
|
|
<h3>More Event Utility Resources:</h3>
|
|
<ul>
|
|
<li><a href="http://developer.yahoo.com/yui/event/">User's Guide</a> (external)</li>
|
|
<li><a href="../../docs/module_event.html">API Documentation</a></li>
|
|
|
|
|
|
<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/event.pdf">Cheat Sheet PDF</a> (external)</li></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="yui-b" id="tocWrapper">
|
|
<!-- TABLE OF CONTENTS -->
|
|
<div id="toc">
|
|
|
|
<ul>
|
|
<li class="sect first">Yahoo! UI Library</li><li class="item"><a title="The Yahoo! User Interface Library (YUI)" href="http://developer.yahoo.com/yui/">Home (external)</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUIBlog (external)</a></li><li class="item"><a title="YUILibrary.com hosts the YUI community forums" href="http://yuilibrary.com/forum/">YUI Discussion Forum (external)</a></li><li class="item"><a title="The YUI Library source can be checked out from GitHub" href="http://github.com/yui/">YUI on GitHub</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../docs/index.html">API Documentation</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">Functional Examples</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="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License (external)</a></li><li class="sect">YUI Functional Examples</li><li class="item"><a title="The YUI Animation Utility - Functional Examples" href="../../examples/animation/index.html">Animation</a></li><li class="item"><a title="The YUI AutoComplete Control - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete</a></li><li class="item"><a title="The YUI Browser History Manager - Functional Examples" href="../../examples/history/index.html">Browser History Manager</a></li><li class="item"><a title="The YUI Button Control - Functional Examples" href="../../examples/button/index.html">Button</a></li><li class="item"><a title="The YUI Calendar Control - Functional Examples" href="../../examples/calendar/index.html">Calendar</a></li><li class="item"><a title="The YUI Carousel Control - Functional Examples" href="../../examples/carousel/index.html">Carousel</a></li><li class="item"><a title="The YUI Charts Control - Functional Examples" href="../../examples/charts/index.html">Charts</a></li><li class="item"><a title="The YUI Color Picker Control - Functional Examples" href="../../examples/colorpicker/index.html">Color Picker</a></li><li class="item"><a title="The YUI Cookie Utility - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="The YUI Connection Manager (AJAX) - Functional Examples" href="../../examples/connection/index.html">Connection Manager</a></li><li class="item"><a title="The YUI Container Family (Module, Overlay, Tooltip, Panel, Dialog, SimpleDialog) - Functional Examples" href="../../examples/container/index.html">Container</a></li><li class="item"><a title="The YUI DataTable Control - Functional Examples" href="../../examples/datatable/index.html">DataTable</a></li><li class="item"><a title="The YUI Dom Collection - Functional Examples" href="../../examples/dom/index.html">Dom</a></li><li class="item"><a title="The YUI Drag & Drop Utility - Functional Examples" href="../../examples/dragdrop/index.html">Drag & Drop</a></li><li class="selected "><a title="The YUI Event Utility - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="The YUI Get Utility - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="The YUI ImageCropper Control - Functional Examples" href="../../examples/imagecropper/index.html">ImageCropper</a></li><li class="item"><a title="The YUI ImageLoader Utility - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="The YUI JSON Utility - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="The YUI Layout Manager - Functional Examples" href="../../examples/layout/index.html">Layout Manager</a></li><li class="item"><a title="The YUI Logger Control - Functional Examples" href="../../examples/logger/index.html">Logger</a></li><li class="item"><a title="The YUI Menu Control - Functional Examples" href="../../examples/menu/index.html">Menu</a></li><li class="item"><a title="The YUI Paginator - Functional Examples" href="../../examples/paginator/index.html">Paginator</a></li><li class="item"><a title="The YUI Profiler Utility - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="The YUI ProfileViewer Control - Functional Examples" href="../../examples/profilerviewer/index.html">ProfilerViewer</a></li><li class="item"><a title="The YUI ProgressBar Control - Functional Examples" href="../../examples/progressbar/index.html">ProgressBar</a></li><li class="item"><a title="The YUI Resize Utility - Functional Examples" href="../../examples/resize/index.html">Resize</a></li><li class="item"><a title="The YUI Rich Text Editor - Functional Examples" href="../../examples/editor/index.html">Rich Text Editor</a></li><li class="item"><a title="The YUI Selector Utility - Functional Examples" href="../../examples/selector/index.html">Selector</a></li><li class="item"><a title="The YUI Slider Control - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="item"><a title="The YUI Storage Utility - Functional Examples" href="../../examples/storage/index.html">Storage</a></li><li class="item"><a title="The YUI SWF Utility - Functional Examples" href="../../examples/swf/index.html">SWF</a></li><li class="item"><a title="The YUI SWFStore Utility - Functional Examples" href="../../examples/swfstore/index.html">SWFStore</a></li><li class="item"><a title="The YUI Stylesheet Utility - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="The YUI TabView Control - Functional Examples" href="../../examples/tabview/index.html">TabView</a></li><li class="item"><a title="The YUI TreeView Control - Functional Examples" href="../../examples/treeview/index.html">TreeView</a></li><li class="item"><a title="The YUI Uploader Utility - Functional Examples" href="../../examples/uploader/index.html">Uploader (experimental)</a></li><li class="item"><a title="The YUI YAHOO Global Object - Functional Examples" href="../../examples/yahoo/index.html">YAHOO Global Object</a></li><li class="item"><a title="The YUI Loader Utility - Functional Examples" href="../../examples/yuiloader/index.html">YUI Loader</a></li><li class="item"><a title="The YUI Test Utility - Functional Examples" href="../../examples/yuitest/index.html">YUI Test</a></li><li class="item"><a title="YUI Reset CSS - Functional Examples" href="../../examples/reset/index.html">Reset CSS</a></li><li class="item"><a title="YUI Base CSS - Functional Examples" href="../../examples/base/index.html">Base CSS</a></li><li class="item"><a title="YUI Fonts CSS - Functional Examples" href="../../examples/fonts/index.html">Fonts CSS</a></li><li class="item"><a title="YUI Grids CSS - Functional Examples" href="../../examples/grids/index.html">Grids CSS</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/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li><li class="item"><a title="Best practices for working with web services while protecting user privacy" href="http://developer.yahoo.com/security/">Security Best Practices (external)</a></li></ul>
|
|
</div>
|
|
</div>
|
|
</div><!--closes bd-->
|
|
|
|
<div id="ft">
|
|
<p class="first">Copyright © 2010 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/syntax.js"></script>
|
|
<script src="../../assets/dpSyntaxHighlighter.js"></script>
|
|
<script language="javascript">
|
|
dp.SyntaxHighlighter.HighlightAll('code');
|
|
</script>
|
|
|
|
<script src='../../assets/YUIexamples.js'></script>
|
|
|
|
|
|
</body>
|
|
</html>
|