mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-14 05:23:21 +00:00
537 lines
29 KiB
HTML
537 lines
29 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: Uploader Control (beta): Simple Uploader Example With Button UI</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-min.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/uploader/uploader-debug.js"></script>
|
|
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
|
|
|
<!--there is no 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: Uploader Control (beta): Simple Uploader Example With Button UI</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>Uploader Control (beta): Simple Uploader Example With Button UI</h1>
|
|
|
|
<div class="exampleIntro">
|
|
<p>This example is a demonstration of the <a href="../../uploader/">YUI Uploader Control</a>'s features.</p>
|
|
|
|
<p><strong>Note:</strong> The YUI Uploader Control requires Flash Player 9.0.45 or higher. The latest version of Flash Player is available at the <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player Download Center</a>.</p>
|
|
<p><strong>Note:</strong> The YUI Uploader Control requires the uploader.swf Flash file that is distributed as part of the YUI package, in the uploader/assets folder. Copy the uploader.swf to your server and set the YAHOO.Uploader.SWFURL variable to its full path.</p>
|
|
<p><strong>Note:</strong> This example uses a server-side script to accept file uploads. The script used does not open or store any data sent to it. Nonetheless, when trying out the example, do not send any sensitive or private data. Do not exceed file size of 10 MB.
|
|
</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="uploader-simple-button_clean.html" target="_blank">View example in new window.</a><!--</span></span>-->
|
|
</div> <div id="example-canvas" class="bd">
|
|
|
|
|
|
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
<style type="text/css">
|
|
.uploadButton a, .clearButton a {
|
|
display:block;
|
|
width:100px;
|
|
height:40px;
|
|
text-decoration: none;
|
|
margin-left:5px;
|
|
}
|
|
|
|
.uploadButton a {
|
|
background: url("assets/uploadFileButton.png") 0 0 no-repeat;
|
|
}
|
|
|
|
.clearButton a {
|
|
background: url("assets/clearListButton.png") 0 0 no-repeat;
|
|
}
|
|
|
|
.uploadButton a:visited, .clearButton a:visited {
|
|
background-position: 0 0;
|
|
}
|
|
|
|
.uploadButton a:hover, .clearButton a:hover {
|
|
background-position: 0 -40px;
|
|
}
|
|
|
|
.uploadButton a:active, .clearButton a:active {
|
|
background-position: 0 -80px;
|
|
}
|
|
</style>
|
|
|
|
<div>
|
|
<div id="fileProgress" style="border: black 1px solid; width:300px; height:40px;float:left">
|
|
<div id="fileName" style="text-align:center; margin:5px; font-size:15px; width:290px; height:25px; overflow:hidden"></div>
|
|
<div id="progressBar" style="width:300px;height:5px;background-color:#CCCCCC"></div>
|
|
</div>
|
|
<div id="uploaderUI" style="width:100px;height:40px;margin-left:5px;float:left"></div>
|
|
<div class="uploadButton" style="float:left"><a class="rolloverButton" href="#" onClick="upload(); return false;"></a></div>
|
|
<div class="clearButton" style="float:left"><a class="rolloverButton" href="#" onClick="handleClearFiles(); return false;"></a></div>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
// Instantiate the uploader and write it to its placeholder div.
|
|
|
|
YAHOO.widget.Uploader.SWFURL = "assets/uploader.swf";
|
|
|
|
var uploader = new YAHOO.widget.Uploader( "uploaderUI", "assets/selectFileButton.png" );
|
|
|
|
// Add event listeners to various events on the uploader.
|
|
// Methods on the uploader should only be called once the
|
|
// contentReady event has fired.
|
|
|
|
uploader.addListener('contentReady', handleContentReady);
|
|
uploader.addListener('fileSelect',onFileSelect)
|
|
uploader.addListener('uploadStart',onUploadStart);
|
|
uploader.addListener('uploadProgress',onUploadProgress);
|
|
uploader.addListener('uploadCancel',onUploadCancel);
|
|
uploader.addListener('uploadComplete',onUploadComplete);
|
|
uploader.addListener('uploadCompleteData',onUploadResponse);
|
|
uploader.addListener('uploadError', onUploadError);
|
|
|
|
// Variable for holding the selected file ID.
|
|
var fileID;
|
|
|
|
function handleClearFiles() {
|
|
uploader.clearFileList();
|
|
uploader.enable();
|
|
fileID = null;
|
|
|
|
var filename = document.getElementById("fileName");
|
|
filename.innerHTML = "";
|
|
|
|
var progressbar = document.getElementById("progressBar");
|
|
progressbar.innerHTML = "";
|
|
}
|
|
|
|
// When contentReady event is fired, you can call methods on the uploader.
|
|
function handleContentReady () {
|
|
// Allows the uploader to send log messages to trace, as well as to YAHOO.log
|
|
uploader.setAllowLogging(true);
|
|
|
|
// Restrict selection to a single file (that's what it is by default,
|
|
// just demonstrating how).
|
|
uploader.setAllowMultipleFiles(false);
|
|
|
|
// New set of file filters.
|
|
var ff = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
|
|
{description:"Videos", extensions:"*.avi;*.mov;*.mpg"});
|
|
|
|
// Apply new set of file filters to the uploader.
|
|
uploader.setFileFilters(ff);
|
|
}
|
|
|
|
// Initiate the file upload. Since there's only one file,
|
|
// we can use either upload() or uploadAll() call. fileList
|
|
// needs to have been populated by the user.
|
|
function upload() {
|
|
if (fileID != null) {
|
|
uploader.upload(fileID, "http://www.yswfblog.com/upload/upload_simple.php");
|
|
fileID = null;
|
|
}
|
|
}
|
|
|
|
// Fired when the user selects files in the "Browse" dialog
|
|
// and clicks "Ok".
|
|
function onFileSelect(event) {
|
|
for (var item in event.fileList) {
|
|
if(YAHOO.lang.hasOwnProperty(event.fileList, item)) {
|
|
YAHOO.log(event.fileList[item].id);
|
|
fileID = event.fileList[item].id;
|
|
}
|
|
}
|
|
uploader.disable();
|
|
|
|
var filename = document.getElementById("fileName");
|
|
filename.innerHTML = event.fileList[fileID].name;
|
|
|
|
var progressbar = document.getElementById("progressBar");
|
|
progressbar.innerHTML = "";
|
|
}
|
|
|
|
// Do something on each file's upload start.
|
|
function onUploadStart(event) {
|
|
|
|
}
|
|
|
|
// Do something on each file's upload progress event.
|
|
function onUploadProgress(event) {
|
|
prog = Math.round(300*(event["bytesLoaded"]/event["bytesTotal"]));
|
|
progbar = "<div style=\"background-color: #f00; height: 5px; width: " + prog + "px\"/>";
|
|
|
|
var progressbar = document.getElementById("progressBar");
|
|
progressbar.innerHTML = progbar;
|
|
}
|
|
|
|
// Do something when each file's upload is complete.
|
|
function onUploadComplete(event) {
|
|
uploader.clearFileList();
|
|
uploader.enable();
|
|
|
|
progbar = "<div style=\"background-color: #f00; height: 5px; width: 300px\"/>";
|
|
var progressbar = document.getElementById("progressBar");
|
|
progressbar.innerHTML = progbar;
|
|
}
|
|
|
|
// Do something if a file upload throws an error.
|
|
// (When uploadAll() is used, the Uploader will
|
|
// attempt to continue uploading.
|
|
function onUploadError(event) {
|
|
|
|
}
|
|
|
|
// Do something if an upload is cancelled.
|
|
function onUploadCancel(event) {
|
|
|
|
}
|
|
|
|
// Do something when data is received back from the server.
|
|
function onUploadResponse(event) {
|
|
YAHOO.log("Server response received.");
|
|
}
|
|
|
|
</script>
|
|
|
|
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="first">Simple Uploader Example with Button UI</h2>
|
|
|
|
<p>In this example, we allow the user to select a single image or video file and upload it to the server. We will render the Uploader UI as a sprite-skinned button, and display the name of the file as well as upload progress. </p>
|
|
|
|
<p>Because of security changes in Flash Player 10, the UI for invoking the "Browse" dialog must be contained inside the Flash player. The Uploader provides two ways of accomplishing that: it can take a button skin sprite (a single image containing multiple states of a button), and render as a button, or it can render as a transparent overlay on top of any UI you want to implement. In this example, we'll render the Uploader UI as a button. To create additional HTML rollover buttons that match the look of the Uploader button, we'll define the following styles:
|
|
|
|
<textarea name="code" class="html" cols="60" rows="5"><html>
|
|
<style type="text/css">
|
|
.uploadButton a, .clearButton a {
|
|
display:block;
|
|
width:100px;
|
|
height:40px;
|
|
text-decoration: none;
|
|
margin-left:5px;
|
|
}
|
|
|
|
.uploadButton a {
|
|
background: url("assets/uploadFileButton.png") 0 0 no-repeat;
|
|
}
|
|
|
|
.clearButton a {
|
|
background: url("assets/clearListButton.png") 0 0 no-repeat;
|
|
}
|
|
|
|
.uploadButton a:visited, .clearButton a:visited {
|
|
background-position: 0 0;
|
|
}
|
|
|
|
.uploadButton a:hover, .clearButton a:hover {
|
|
background-position: 0 -40px;
|
|
}
|
|
|
|
.uploadButton a:active, .clearButton a:active {
|
|
background-position: 0 -80px;
|
|
}
|
|
</style>
|
|
</textarea>
|
|
|
|
<p> Notice that the styles are using two image files, <code>uploadFileButton.png</code> and <code>clearListButton.png</code> for rollovers. The directory contains another file, <code>selectFileButton.png</code>, which we will use to skin the Uploader UI. The sprite images look as follows:</p>
|
|
<div style="width:100%">
|
|
<img src="assets/selectFileButton.png">
|
|
<img src="assets/uploadFileButton.png">
|
|
<img src="assets/clearListButton.png">
|
|
</div>
|
|
<p>Note that while for your own rollover buttons you can modify the location of the button states within the sprite, the Uploader requires that the button skin sprite had the states in the following order, stacked vertically: <strong>buttonUp</strong> state, <strong>buttonHover</strong> state, <strong>buttonDown</strong> state and <strong>buttonDisabled</strong> state.</p>
|
|
<p>Next, let's create the UI. First, we'll define the space for the file name and progress bar displays:</p>
|
|
<textarea name="code" class="html" cols="60" rows="5">
|
|
<div>
|
|
<div id="fileProgress" style="border: black 1px solid; width:300px; height:40px;float:left">
|
|
<div id="fileName" style="text-align:center; margin:5px; font-size:15px; width:290px; height:25px; overflow:hidden">
|
|
</div>
|
|
<div id="progressBar" style="width:300px;height:5px;background-color:#CCCCCC">
|
|
</div>
|
|
</div>
|
|
</textarea>
|
|
<p>Next, we'll define three buttons. The first button will be rendered by the Uploader, so we'll put down the placeholder div of the right size. The other two buttons will be HTML-rendered, and we'll assign functions to be called when they are clicked:</p>
|
|
<textarea name="code" class="html" cols="60" rows="5">
|
|
<div id="uploaderUI" style="width:100px;height:40px;margin-left:5px;float:left"></div>
|
|
<div class="uploadButton" style="float:left">
|
|
<a class="rolloverButton" href="#" onClick="upload(); return false;"></a>
|
|
</div>
|
|
<div class="clearButton" style="float:left">
|
|
<a class="rolloverButton" href="#" onClick="handleClearFiles(); return false;"></a>
|
|
</div>
|
|
</div>
|
|
</textarea>
|
|
|
|
<p>Next, we instantiate the Uploader, and write it to the placeholder div. Note that we are passing the URL of the button skin sprite as the second argument to the Uploader constructor. If you don't pass this optional second argument, the uploader will be render transparent.</p>
|
|
<textarea name="code" class="html" cols="60" rows="5">
|
|
<script type="text/javascript">
|
|
|
|
// Instantiate the uploader and write it to its placeholder div.
|
|
|
|
YAHOO.widget.Uploader.SWFURL = "assets/uploader.swf";
|
|
|
|
var uploader = new YAHOO.widget.Uploader( "uploaderUI", "assets/selectFileButton.png" );
|
|
</textarea>
|
|
|
|
<p>Next, we add event listeners to various events called by the uploader. Note specifically the "contentReady" event: until that event fires, the uploader methods are not available.
|
|
We wont need to respond to all events, so we will leave some of these event handlers empty, just as placeholders.
|
|
</p>
|
|
|
|
<textarea name="code" class="js" cols="60" rows="5">
|
|
uploader.addListener('contentReady', handleContentReady);
|
|
uploader.addListener('fileSelect',onFileSelect)
|
|
uploader.addListener('uploadStart',onUploadStart);
|
|
uploader.addListener('uploadProgress',onUploadProgress);
|
|
uploader.addListener('uploadCancel',onUploadCancel);
|
|
uploader.addListener('uploadComplete',onUploadComplete);
|
|
uploader.addListener('uploadCompleteData',onUploadResponse);
|
|
uploader.addListener('uploadError', onUploadError);
|
|
</textarea>
|
|
|
|
<p>Now, let us define the event handlers themselves. First, we will create the <code>contentReady</code> handler. In it, we will enable the logging output in the uploader (the log messages will be output both to the YUI Logger, and the Flash trace output), disallow multiple file selection (it is disallowed by default, so we are being redundant), and set file filters to filter user selection.
|
|
</p>
|
|
|
|
<textarea name="code" class="js" cols="60" rows="5">
|
|
function handleContentReady () {
|
|
// Allows the uploader to send log messages to trace, as well as to YAHOO.log
|
|
uploader.setAllowLogging(true);
|
|
|
|
// Restrict selection to a single file (that's what it is by default,
|
|
// just demonstrating how).
|
|
uploader.setAllowMultipleFiles(false);
|
|
|
|
// New set of file filters.
|
|
var ff = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
|
|
{description:"Videos", extensions:"*.avi;*.mov;*.mpg"});
|
|
|
|
// Apply new set of file filters to the uploader.
|
|
uploader.setFileFilters(ff);
|
|
}
|
|
</textarea>
|
|
|
|
<p>When a file is selected, we record the id of the selected file, and disable the uploader UI. Next, we display the name of the file and reset the progress bar.
|
|
</p>
|
|
|
|
<textarea name="code" class="js" cols="60" rows="5">
|
|
var fileID;
|
|
function onFileSelect(event) {
|
|
for (var item in event.fileList) {
|
|
if(YAHOO.lang.hasOwnProperty(event.fileList, item)) {
|
|
YAHOO.log(event.fileList[item].id);
|
|
fileID = event.fileList[item].id;
|
|
}
|
|
}
|
|
uploader.disable();
|
|
|
|
var filename = document.getElementById("fileName");
|
|
filename.innerHTML = event.fileList[fileID].name;
|
|
|
|
var progressbar = document.getElementById("progressBar");
|
|
progressbar.innerHTML = "";
|
|
}
|
|
</textarea>
|
|
|
|
<p>The upload function is called when the "Upload File" button is clicked. Since we only have a single file to upload, we do not need to manage the queue, and can just make a single upload() call, passing the file id and the URL where to send the upload. The other two parameters to the upload() call are the name of the method to send accompanying variables ("GET" or "POST", and "GET" is default), and an object containing variables themselves.
|
|
</p>
|
|
|
|
<textarea name="code" class="js" cols="60" rows="5">
|
|
function upload() {
|
|
if (fileID != null) {
|
|
uploader.upload(fileID, "http://www.yswfblog.com/upload/upload_simple.php");
|
|
fileID = null;
|
|
}
|
|
}
|
|
</textarea>
|
|
|
|
<p>This function, called when the user presses the "Clear List" button, clears the upload queue and reenables the uploader UI.
|
|
</p>
|
|
|
|
<textarea name="code" class="js" cols="60" rows="5">
|
|
function handleClearFiles() {
|
|
uploader.clearFileList();
|
|
uploader.enable();
|
|
fileID = null;
|
|
|
|
var filename = document.getElementById("fileName");
|
|
filename.innerHTML = "";
|
|
|
|
var progressbar = document.getElementById("progressBar");
|
|
progressbar.innerHTML = "";
|
|
}
|
|
</textarea>
|
|
|
|
<p>This function handles uploadProgress events, and draws a progress bar of correct size.
|
|
</p>
|
|
|
|
<textarea name="code" class="js" cols="60" rows="5">
|
|
function onUploadProgress(event) {
|
|
prog = Math.round(300*(event["bytesLoaded"]/event["bytesTotal"]));
|
|
progbar = "<div style=\"background-color: #f00; height: 5px; width: " + prog + "px\"/>";
|
|
|
|
var progressbar = document.getElementById("progressBar");
|
|
progressbar.innerHTML = progbar;
|
|
}
|
|
</textarea>
|
|
|
|
|
|
<p>This function handles the uploadComplete event, draws a full progress bar, and reenables the uploader UI.
|
|
</p>
|
|
|
|
<textarea name="code" class="js" cols="60" rows="5">
|
|
function onUploadComplete(event) {
|
|
uploader.clearFileList();
|
|
uploader.enable();
|
|
|
|
progbar = "<div style=\"background-color: #f00; height: 5px; width: 300px\"/>";
|
|
var progressbar = document.getElementById("progressBar");
|
|
progressbar.innerHTML = progbar;
|
|
}
|
|
</textarea>
|
|
|
|
|
|
<p>The rest of the event handlers are left as placeholders.
|
|
</p>
|
|
|
|
<textarea name="code" class="js" cols="60" rows="5">
|
|
|
|
function onUploadStart(event) {
|
|
}
|
|
|
|
function onUploadError(event) {
|
|
}
|
|
|
|
function onUploadCancel(event) {
|
|
}
|
|
|
|
function onUploadResponse(event) {
|
|
}
|
|
|
|
</script>
|
|
</textarea>
|
|
|
|
|
|
<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/?uploader&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>
|
|
|
|
|
|
<div id="examples">
|
|
<h3>Uploader Control (beta) Examples:</h3>
|
|
|
|
<div id="exampleToc">
|
|
<ul>
|
|
<li class='selected'><a href='../uploader/uploader-simple-button.html'>Simple Uploader Example With Button UI</a></li><li><a href='../uploader/uploader-advanced-postvars.html'>Advanced Uploader Example With Additional POST Variables and Server Data Return</a></li><li><a href='../uploader/uploader-advanced-cookie.html'>Advanced Uploader Example With Cookie Submission as a POST variable</a></li><li><a href='../uploader/uploader-advanced-queue.html'>Advanced Uploader Example With Transparent UI and Automatic Queue Management</a></li> </ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="module">
|
|
<h3>More Uploader Control (beta) Resources:</h3>
|
|
<ul>
|
|
<li><a href="http://developer.yahoo.com/yui/uploader/">User's Guide</a> (external)</li>
|
|
<li><a href="../../docs/module_uploader.html">API Documentation</a></li>
|
|
|
|
|
|
<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/uploader.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="item"><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="selected "><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>
|