hazza/Phraseanet
1
0
Fork 0
mirror of https://github.com/alchemy-fr/Phraseanet.git synced 2025-10-15 14:03:27 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
41e56ed86b0238bb85470b5cb86ef21c5014b51a
Phraseanet/www/include/jslibs/yui2.8/examples/layout/calrte_layout.html
Alchemy 339d23c06d initial import
2011-02-16 16:09:48 +01:00

557 lines
32 KiB
HTML
Raw Blame History

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library Examples: Layout Manager: Simple Application</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/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="../../build/calendar/assets/skins/sam/calendar.css" />
<link rel="stylesheet" type="text/css" href="../../build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="../../build/editor/assets/skins/sam/simpleeditor.css" />
<link rel="stylesheet" type="text/css" href="../../build/layout/assets/skins/sam/layout.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/utilities/utilities.js"></script>
<script type="text/javascript" src="../../build/container/container-min.js"></script>
<script type="text/javascript" src="../../build/calendar/calendar-min.js"></script>
<script type="text/javascript" src="../../build/resize/resize-min.js"></script>
<script type="text/javascript" src="../../build/editor/simpleeditor-min.js"></script>
<script type="text/javascript" src="../../build/layout/layout-min.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 &amp; 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: Layout Manager: Simple Application</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>Layout Manager: Simple Application</h1>
<div class="exampleIntro">
<p>This example shows an simple application built using the <a href="http://developer.yahoo.com/yui/layout">Layout Mananger</a>, <a href="http://developer.yahoo.com/yui/calendar">Calendar Control</a>, <a href="http://developer.yahoo.com/yui/editor">Rich Text Editor</a> and <a href="http://developer.yahoo.com/yui/connection/">Connection Manager</a>.</p>
</div>
<div class="example-container module newWindow">
<div id="example-canvas" class="bd">
<p class="newWindowButton yui-skin-sam"><span id="newWindowLink"><span class="first-child"><a href="calrte_layout_source.html" target="_blank">View example in new window.</a></span></span>
</div>
</div>
</div>
<h2 class="first">Create the Panel</h2>
<p>First we must create the panel instance, like this:</p>
<textarea name="code" class="HTML">
<div id="demo"></div>
</textarea>
<textarea name="code" class="JScript">
var panel = new YAHOO.widget.Panel('demo', {
close: false,
underlay: 'none',
width: '700px',
xy: [100, 100]
});
panel.render();
</textarea>
<p>Now let's give it some content. Note that we are adding a DIV to the body with an id of <code>layout</code>. This will be the element we anchor the layout to.</p>
<textarea name="code" class="JScript">
var panel = new YAHOO.widget.Panel('demo', {
close: false,
underlay: 'none',
width: '700px',
xy: [100, 100]
});
panel.setHeader('Simple Application');
panel.setBody('<div id="layout"></div>');
panel.render();
</textarea>
<h2>Adding the Layout instance</h2>
<p>Now we need to listen for the <code>beforeRender</code> event to render our Layout.</p>
<p>Inside of the <code>beforeRender</code> event, we will wait for the element <code>layout</code> to appear in the document, then we will setup our Layout instance.</p>
<p>The layout instance we are creating will have top, left, bottom and center units configured below:</p>
<textarea name="code" class="JScript">
panel.setBody('<div id="layout"></div>');
panel.beforeRenderEvent.subscribe(function() {
Event.onAvailable('layout', function() {
layout = new YAHOO.widget.Layout('layout', {
height: 400,
units: [
{ position: 'top', height: 30, header: 'Date Editor', gutter: '2' },
{ position: 'left', width: 205, body: '', gutter: '0 5 0 2' },
{ position: 'bottom', height: 25, id: 'status', body: 'Status', gutter: '2' },
{ position: 'center', body: 'Select a date..', gutter: '0 2 0 0' }
]
});
layout.render();
});
});
panel.render();
</textarea>
<h2>Adding the calendar</h2>
<p>Now we listen for the layout's <code>render</code> event and setup our Calendar, Rich Text Editor and handle the panel resize.</p>
<p>Inside the <code>render</code> event we will call the layout method <code>getUnitByPosition('left')</code> to
get the left unit's instance. Then we will create an empty DIV and append it to the body element of the left unit.</p>
<p>Then we will pass that element as the root node for the Calendar Control and render it.</p>
<textarea name="code" class="JScript">
layout.on('render', function() {
var l = layout.getUnitByPosition('left');
var el = document.createElement('div');
l.body.appendChild(el);
cal = new YAHOO.widget.Calendar(el);
cal.render();
}, layout, true);
</textarea>
<h2>Adding the Rich Text Editor</h2>
<p>Using the same technique as above, we will add a Rich Text Editor to the center unit.</p>
<p>Using the layout's <code>getUnitByPosition('center')</code> method, we will set the body of the unit to the <code>textarea</code>
that we will convert into an Simple Editor instance. We will also set a custom toolbar to limit the number of buttons.</p>
<textarea name="code" class="JScript">
layout.on('render', function() {
var c = layout.getUnitByPosition('center');
c.set('body', '&lt;textarea id="editor"&gt;&lt;/textarea&gt;');
editor = new YAHOO.widget.SimpleEditor('editor', {
height: '305px',
width: c.get('width') + 'px',
dompath: false,
animate: false,
toolbar: {
grouplabels: false,
buttons: [
{ group: 'textstyle', label: 'Font Style',
buttons: [
{ type: 'select', label: 'Arial', value: 'fontname', disabled: true,
menu: [
{ text: 'Arial', checked: true },
{ text: 'Arial Black' },
{ text: 'Comic Sans MS' },
{ text: 'Courier New' },
{ text: 'Lucida Console' },
{ text: 'Tahoma' },
{ text: 'Times New Roman' },
{ text: 'Trebuchet MS' },
{ text: 'Verdana' }
]
},
{ type: 'spin', label: '13', value: 'fontsize', range: [ 9, 75 ], disabled: true },
{ type: 'separator' },
{ type: 'push', label: 'Bold', value: 'bold' },
{ type: 'push', label: 'Italic', value: 'italic' },
{ type: 'push', label: 'Underline', value: 'underline' },
{ type: 'separator' },
{ type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
{ type: 'color', label: 'Background Color', value: 'backcolor', disabled: true }
]
}
]
}
});
editor.on('editorContentLoaded', function() {
var d = new Date();
var today = d.getMonth() + 1 + '/' + d.getDate() + '/' + d.getFullYear();
dateSelected = [today];
layout.getUnitByPosition('top').set('header', 'Editing Date: ' + today);
cal.cfg.setProperty('selected', today);
cal.render();
});
editor.render();
</textarea>
<h2>Make the Panel resizable</h2>
<p>Now that all of our content is rendered and sized, we can attach the Resize Utility to the Panel like this:</p>
<textarea name="code" class="JScript">
resize = new YAHOO.util.Resize('demo', {
handles: ['br'],
autoRatio: true,
status: true,
proxy: true,
useShim: true,
minWidth: 700,
minHeight: 400
});
</textarea>
<p>Now give the resize handle a little CSS to make it look nicer.</p>
<textarea name="code" class="CSS">
#demo .yui-resize-handle-br {
height: 11px;
width: 11px;
background-position: -20px -60px;
background-color: transparent;
}
</textarea>
<p>This will place a handle at the bottom right corner of the panel. This will only resize the outside portion of the panel, but we want the inside to resize properly.</p>
<p>Now we need to listen for the <code>resize</code> event on the Resize instance and do a little math.</p>
<textarea name="code" class="JScript">
resize.on('resize', function(args) {
var h = args.height;
var hh = this.header.clientHeight;
var padding = ((10 * 2) + 2); //Sam's skin applied a 10px padding and a 1 px border to the element..
var bh = (h - hh - padding);
Dom.setStyle(this.body, 'height', bh + 'px');
}, panel, true);
</textarea>
<p>Now we have the Panel resizing the way we want, but the layout is not resizing to match. Inside the <code>resize</code> event from the Resize instance we need to add this at the bottom:</p>
<textarea name="code" class="JScript">
layout.set('height', bh);
layout.set('width', (args.width - padding));
layout.resize();
</textarea>
<p>Now we need to add some code to the <code>resize</code> event to resize the Editor instance when the Layout and Panel are resized.</p>
<textarea name="code" class="JScript">
//Editor Resize
var th = (editor.toolbar.get('element').clientHeight + 2); //It has a 1px border..
var eH = (h - th);
editor.set('width', args.width + 'px');
editor.set('height', eH + 'px');
</textarea>
<h2>Making them talk to each other</h2>
<p>Now we need to connect the Calendar <code>selectEvent</code> to the Layout Manager.</p>
<textarea name="code" class="JScript">
cal = new YAHOO.widget.Calendar(el);
cal.selectEvent.subscribe(function(ev, args) {
var d = args[0][0];
layout.getUnitByPosition('top').set('header', 'Editing Date: ' + d[1] + '/' + d[2] + '/' + d[0]);
});
cal.render();
</textarea>
<p>Now the top unit's header will be updated with the selected date of the Calendar and the Editor will be enabled.</p>
<p>From here, we will set up some pseudo code for saving and storing the data entered on each date selection.</p>
<p>Basically the code below does the following:
<ul>
<li>When a date is selected, set the var <code>dateSelected</code> to the date.</li>
<li>Then select that date</li>
<li>If the object <code>editorData</code> contains a key matching this date, update the Editor's content with the value.</li>
<li>If the var <code>dateSelected</code> was already set, do this:
<ul>
<li>Update the body of the bottom unit with an animated image and status message.</li>
<li>Save the Editor HTML to a var <code>html</code></li>
<li>Add a key to <code>editorData</code> for the date and assign its value to the html from the Editor.</li>
<li>Fire the Connection Manager request to save the data (this example doesn't do that).</li>
<li>Clear the Editor's content.</li>
</ul>
</li>
</ul>
</p>
<textarea name="code" class="JScript">
cal = new YAHOO.widget.Calendar(el);
cal.selectEvent.subscribe(function(ev, args) {
if (dateSelected) {
//Connection Manager
layout.getUnitByPosition('bottom').set('body', '<img src="assets/progress.gif"> Sending Data...');
var html = editor.getEditorHTML();
var url = 'assets/post4.php?html=' + html;
editorData[dateSelected] = html;
conn = YAHOO.util.Connect.asyncRequest('POST', url, {
success: function() {
layout.getUnitByPosition('bottom').set('body', 'Data Saved..');
},
failure: function() {
}
});
editor.setEditorHTML('&nbsp;');
}
var d = args[0][0];
dateSelected = d[1] + '/' + d[2] + '/' + d[0];
layout.getUnitByPosition('top').set('header', 'Editing Date: ' + d[1] + '/' + d[2] + '/' + d[0]);
if (dateSelected && editorData[dateSelected]) {
editor.setEditorHTML(editorData[dateSelected]);
}
var dates = [dateSelected];
for (var i in editorData) {
dates[dates.length] = i;
}
cal.cfg.setProperty('selected', dates.join(','));
cal.render();
});
cal.render();
</textarea>
<h2>Full Example Source</h2>
<textarea name="code" class="JScript">
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event,
layout = null,
cal = null,
editor = null,
conn = null,
panel = null,
dateSelected = null,
editorData = {};
panel = new YAHOO.widget.Panel('demo', {
width: '700px',
underlay: 'none',
close: false,
xy: [100, 100]
});
panel.setHeader('Editor');
panel.setBody('<div id="layout"></div>');
panel.renderEvent.subscribe(function() {
Event.onAvailable('layout', function() {
layout = new YAHOO.widget.Layout('layout', {
height: 400,
units: [
{ position: 'top', height: 25, header: 'Date Editor', gutter: '2' },
{ position: 'left', width: 205, body: '', gutter: '0 5 0 2' },
{ position: 'bottom', height: 25, id: 'status', body: 'Status', gutter: '2' },
{ position: 'center', body: 'Select a date..', gutter: '0 2 0 0' }
]
});
layout.on('render', function() {
var c = layout.getUnitByPosition('center');
c.set('body', '&lt;textarea id="caleditor"&gt;&lt;/textarea&gt;');
editor = new YAHOO.widget.SimpleEditor('caleditor', {
height: '305px',
width: c.get('width') + 'px',
dompath: false,
animate: false,
focusAtStart: true,
toolbar: {
grouplabels: false,
buttons: [
{ group: 'textstyle', label: 'Font Style',
buttons: [
{ type: 'select', label: 'Arial', value: 'fontname', disabled: true,
menu: [
{ text: 'Arial', checked: true },
{ text: 'Arial Black' },
{ text: 'Comic Sans MS' },
{ text: 'Courier New' },
{ text: 'Lucida Console' },
{ text: 'Tahoma' },
{ text: 'Times New Roman' },
{ text: 'Trebuchet MS' },
{ text: 'Verdana' }
]
},
{ type: 'spin', label: '13', value: 'fontsize', range: [ 9, 75 ], disabled: true },
{ type: 'separator' },
{ type: 'push', label: 'Bold', value: 'bold' },
{ type: 'push', label: 'Italic', value: 'italic' },
{ type: 'push', label: 'Underline', value: 'underline' },
{ type: 'separator' },
{ type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
{ type: 'color', label: 'Background Color', value: 'backcolor', disabled: true }
]
}
]
}
});
editor.on('editorContentLoaded', function() {
var d = new Date();
var today = d.getMonth() + 1 + '/' + d.getDate() + '/' + d.getFullYear();
dateSelected = [today];
layout.getUnitByPosition('top').set('header', 'Editing Date: ' + today);
cal.cfg.setProperty('selected', today);
cal.render();
});
editor.render();
var l = layout.getUnitByPosition('left');
var el = document.createElement('div');
l.body.appendChild(el);
cal = new YAHOO.widget.Calendar(el);
cal.selectEvent.subscribe(function(ev, args) {
if (dateSelected) {
//Connection Manager
layout.getUnitByPosition('bottom').set('body', '<img src="assets/progress.gif"> Sending Data...');
var html = editor.getEditorHTML();
var url = 'assets/post4.php?html=' + html;
editorData[dateSelected] = html;
conn = YAHOO.util.Connect.asyncRequest('POST', url, {
success: function() {
layout.getUnitByPosition('bottom').set('body', 'Data Saved..');
},
failure: function() {
}
});
editor.setEditorHTML('&nbsp;');
}
var d = args[0][0];
dateSelected = d[1] + '/' + d[2] + '/' + d[0];
layout.getUnitByPosition('top').set('header', 'Editing Date: ' + d[1] + '/' + d[2] + '/' + d[0]);
if (dateSelected && editorData[dateSelected]) {
editor.setEditorHTML(editorData[dateSelected]);
}
var dates = [dateSelected];
for (var i in editorData) {
dates[dates.length] = i;
}
cal.cfg.setProperty('selected', dates.join(','));
cal.render();
});
cal.render();
resize = new YAHOO.util.Resize('demo', {
handles: ['br'],
autoRatio: true,
status: true,
proxy: true,
useShim: true,
minWidth: 700,
minHeight: 400
});
resize.on('resize', function(args) {
var h = args.height;
var hh = this.header.clientHeight;
var padding = ((10 * 2) + 2); //Sam's skin applied a 10px padding and a 1 px border to the element..
var bh = (h - hh - padding);
Dom.setStyle(this.body, 'height', bh + 'px');
layout.set('height', bh);
layout.set('width', (args.width - padding));
layout.resize();
//Editor Resize
var th = (editor.toolbar.get('element').clientHeight + 2); //It has a 1px border..
var eH = (h - th);
editor.set('width', args.width + 'px');
editor.set('height', eH + 'px');
}, panel, true);
resize.on('endResize', function() {
//Fixing IE's calculations
this.innerElement.style.height = '';
//Focus the Editor so they can type.
editor._focusWindow();
}, panel, true);
});
layout.render();
});
});
panel.render(document.body);
})();
</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/?utilities&container&calendar&resize&simpleeditor&layout&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="examples">
<h3 class='firstContent'>Layout Manager Examples:</h3>
<div id="exampleToc">
<ul>
<li><a href='../layout/page_layout.html'>Full Page Layout</a></li><li><a href='../layout/panel_layout.html'>Layout inside a resizable Panel</a></li><li><a href='../layout/grids_layout.html'>Using a Layout with Grids CSS</a></li><li><a href='../layout/nested_layout.html'>Nesting a layout</a></li><li><a href='../layout/menu_layout.html'>Layout with Menu Controls</a></li><li class='selected'><a href='../layout/calrte_layout.html'>Simple Application</a></li><li><a href='../layout/adv_layout.html'>Complex Application</a></li><li><a href='../layout/skinning_layout.html'>Skinning a Layout</a></li> </ul>
</div>
</div>
<div id="module">
<h3>More Layout Manager Resources:</h3>
<ul>
<li><a href="http://developer.yahoo.com/yui/layout/">User's Guide</a> (external)</li>
<li><a href="../../docs/module_layout.html">API Documentation</a></li>
<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/layout.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 &amp; Drop Utility - Functional Examples" href="../../examples/dragdrop/index.html">Drag &amp; 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="selected "><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 &copy; 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>
Reference in New Issue View Git Blame Copy Permalink