20f8df1291
data tables are going to need some work yet, but the other stuff seems to be working 100%
382 lines
27 KiB
HTML
382 lines
27 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: ProfilerViewer Control (beta): Using the ProfilerViewer API while Profiling the YUI Menu Control</title>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
|
|
|
|
<style>
|
|
/*Supplemental CSS for the YUI distribution*/
|
|
#custom-doc { width: 95%; min-width: 950px; }
|
|
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
|
|
#pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}
|
|
|
|
</style>
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
|
|
<!--Script and CSS includes for YUI dependencies on this page-->
|
|
<link rel="stylesheet" type="text/css" href="../../build/profilerviewer/assets/skins/sam/profilerviewer.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.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/profiler/profiler-min.js"></script>
|
|
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
|
|
<script type="text/javascript" src="../../build/event/event-min.js"></script>
|
|
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
|
<script type="text/javascript" src="../../build/profilerviewer/profilerviewer-beta-min.js"></script>
|
|
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
|
|
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
|
|
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
|
|
|
|
|
<!--begin custom header content for this example-->
|
|
|
|
<!--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: ProfilerViewer Control (beta): Using the ProfilerViewer API while Profiling the YUI Menu Control</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>ProfilerViewer Control (beta): Using the ProfilerViewer API while Profiling the YUI Menu Control</h1>
|
|
|
|
<div class="exampleIntro">
|
|
<p>In this example, we explore the use of the <a href="http://developer.yahoo.com/yui/profilerviewer/">ProfilerViewer</a> API to customize the console slightly while taking a thorough look at the performance profile of the <a href="http://developer.yahoo.com/yui/menu/">YUI Menu Control</a>. Customizations include:</p>
|
|
<ol>
|
|
<li>The console launcher is reduced in size; </li>
|
|
<li>The console is draggable via the header;</li>
|
|
<li>The height of the table and the number of functions profiled in the chart are increased;</li>
|
|
<li>A filter is used to show only functions that have been called at least once.</li>
|
|
</ol>
|
|
<p>Check out the example in action via the New Window button below, then come back to this page to read the full tutorial below on how to customize your ProfilerViewer instance.</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="pv-api_source.html" target="_blank">View example in new window.</a></span></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="first">Making Use of ProfilerViewer's API</h2>
|
|
|
|
<p>This example points to how you can use ProfilerViewer's provided API to create profiling experiences tailored to your environment.</p>
|
|
|
|
<p>This example has the following dependencies:</p>
|
|
|
|
<textarea name="code" class="HTML" cols="60" rows="1"><link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/container/assets/skins/sam/container.css">
|
|
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/menu/assets/skins/sam/menu.css">
|
|
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/profilerviewer/assets/skins/sam/profilerviewer.css">
|
|
|
|
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/utilities/utilities.js"></script>
|
|
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
|
|
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/container/container-min.js"></script>
|
|
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/menu/menu.js"></script>
|
|
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js"></script>
|
|
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/profiler/profiler-min.js"></script>
|
|
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/profilerviewer/profilerviewer-beta-min.js"></script></textarea>
|
|
|
|
|
|
<p>Here are some of the key features of this example:</p>
|
|
|
|
<h3>1. Thorough profiling of the YUI Menu Control</h3>
|
|
|
|
<p>Generally, a thorough profiling of a component like Menu requires careful thought and analysis. In this case, we want a picture of how Menu's own functions perform and also of how it makes use of other YUI components like the <a href="http://developer.yahoo.com/yui/dom/">Dom Collection</a> and the <a href="http://developer.yahoo.com/yui/event/">Event Utility</a>. To do this, we need to profile the constructors of the main Menu classes and use <a href="http://developer.yahoo.com/yui/profiler/">Profiler</a>'s <code>registerObject</code> method to profile the static classes of Dom and Event.</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">// To fully profile the Menu, we want to register all the Menu
|
|
// and MenuItem constructors involved in Menu creation; for the
|
|
// purposes of this example, we'll also profile Menu's use
|
|
// of core YUI components like the Dom Collection and the
|
|
// Event Utility:
|
|
YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Menu");
|
|
YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.MenuItem");
|
|
YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.MenuManager");
|
|
YAHOO.tool.Profiler.registerConstructor("YAHOO.util.Config");
|
|
YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Module");
|
|
YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Overlay");
|
|
YAHOO.tool.Profiler.registerObject("YAHOO.util.Dom", true);
|
|
YAHOO.tool.Profiler.registerObject("YAHOO.util.Event", true);</textarea>
|
|
|
|
<h3>2. Using ProfilerViewer's configuration attributes</h3>
|
|
|
|
<p>In instantiating ProfilerViewer, we'll use configuration attributes to:</p>
|
|
<ol>
|
|
<li>Set the base directory for YUI files (so that some files can be loaded only when needed) <strong>(line 3 below)</strong>;</li>
|
|
<li>Set the path to the YUI Charts Control .swf file relative to the page being viewed <strong>(line 21 below)</strong>;</li>
|
|
<li>Filter the Profiler's output, showing in the table only functions that have been called at least once <strong>(lines 11-13 below)</strong>;</li>
|
|
<li>Set the number of functions profiled visually in the chart <strong>(line 19 below)</strong>;</li>
|
|
<li>Set the height of the console's DataTable component <strong>(line 20 below)</strong>.</li>
|
|
</ol>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">// Instantiate ProfilerViewer, using its API to customize it a bit:
|
|
var pv = new YAHOO.widget.ProfilerViewer("profiler", {
|
|
base: "http://yui.yahooapis.com/2.6.0/build/",
|
|
visible: false, //default is false; this means only the
|
|
//ProfilerViewer launchbar will be displayed
|
|
//on initial render, and the rest of the console
|
|
//(including the DataTable and Chart) won't
|
|
//be loaded and rendered until they're requested.
|
|
//here, we're going to filter the displayed functions
|
|
//and only show those that have been called at least once:
|
|
filter: function(o) {
|
|
return (o.calls > 0);
|
|
},
|
|
showChart: true, //default is true
|
|
//the chart can be hidden entirely by setting showChart to
|
|
//false; you can also control the number of functions
|
|
//measured in the chart to expand or reduce the real estate
|
|
//it takes up on the page:
|
|
maxChartFunctions:8,
|
|
tableHeight:"25em", //default: 15em
|
|
swfUrl:"http://yui.yahooapis.com/2.6.0/build/charts/assets/charts.swf"
|
|
});</textarea>
|
|
|
|
<h3>3. Use one of ProfilerViewer's "interesting moments" (custom events) to further customize the interaction</h3>
|
|
|
|
<p>ProfilerViewer exposes a few custom events (like when the console first renders and when a data-refresh is requested; you can respond to these by subscribing to the events. Here, we'll use a different class of custom event: one that fires automatically in response to an attribute change.</p>
|
|
|
|
<p>ProfilerViewer has an attribute called <code>visible</code> that is toggled when the console is minimized/maximized. We'll subscribe to that event here. When the console is minimizing, we'll make it narrower (300px wide) so that it's more compact and out of the way. When <code>visible</code> is changed back to true (ie, when the console is maximized), we will reset the width of the console to 950px to reveal all of the profiling data.</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">//You can subscribe to "interesting moments" in the ProfilerViewer
|
|
//just as you can with any other YUI component. Here, we'll use
|
|
//the visibleChange event that accompanies any change to the PV
|
|
//console's "visible" attribute. When made visible, we'll expand
|
|
//the console to full width; when it's minimized, we'll reduce the
|
|
//width of the launcher so that it takes up less screen real
|
|
//estate:
|
|
pv.subscribe("visibleChange", function(o) {
|
|
|
|
//"this" is the ProfilerViewer instance;
|
|
//this.get("element") is the top-level node containing
|
|
//the ProfilerViewer console.
|
|
var el = this.get("element");
|
|
|
|
//In this handler, the "visible" config property is
|
|
//changing. If the new value is "true", the console
|
|
//is becoming visible, so we'll make it wide. If the
|
|
//new value is false, we'll make the launch bar skinny.
|
|
var width = (o.newValue) ? "950px" : "300px";
|
|
YAHOO.util.Dom.setStyle(el, "width", width);
|
|
});</textarea>
|
|
|
|
<h3>4. Use the <code>getHeadEl()</code> method to provide a drag handle for the draggable console</h3>
|
|
|
|
<p>To help keep the ProfilerViewer console out of the way, we'll make it draggable via the header bar. To do this, we need access to the ProfilerViewer's header element. ProfilerViewer's API gives you access to a number of key elements in the console's DOM; in this case, we'll use the <code>getHeadEl()</code> method to specify the header bar as the drag handle for the console.</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">//Here, we'll use Drag and Drop to make the ProfilerViewer
|
|
//console draggable.
|
|
var DD = new YAHOO.util.DD("profiler");
|
|
|
|
//ProfilerViewer's API gives you access to the key container
|
|
//elements in the console. Here we'll use access to the
|
|
//header element to give it an ID and make it a drag handle.
|
|
pv.getHeadEl().id = "profilerHead";
|
|
DD.setHandleElId("profilerHead");
|
|
|
|
//The Buttons in the head should not be valid drag handles;
|
|
//they are comprised of anchor elements, which DD allows us
|
|
//to disclude as handles.
|
|
DD.addInvalidHandleType("a");
|
|
|
|
//Drag and Drop performs better when you use the dragOnly
|
|
//setting for elements that can be moved but that don't
|
|
//have any DD interactions with other page elements:
|
|
DD.dragOnly = true;</textarea>
|
|
|
|
<h3>Full source code</h3>
|
|
|
|
<p>The full JavaScript source code for this example is as follows:</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">// Instantiate and render the menu when it is available in the DOM
|
|
YAHOO.util.Event.onContentReady("productsandservices", function () {
|
|
|
|
// To fully profile the Menu, we want to register all the Menu
|
|
// and MenuItem constructors involved in Menu creation; for the
|
|
// purposes of this example, we'll also profile Menu's use
|
|
// of core YUI components like the Dom Collection and the
|
|
// Event Utility:
|
|
YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Menu");
|
|
YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.MenuItem");
|
|
YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.MenuManager");
|
|
YAHOO.tool.Profiler.registerConstructor("YAHOO.util.Config");
|
|
YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Module");
|
|
YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Overlay");
|
|
YAHOO.tool.Profiler.registerObject("YAHOO.util.Dom", true);
|
|
YAHOO.tool.Profiler.registerObject("YAHOO.util.Event", true);
|
|
|
|
// Instantiate ProfilerViewer, using its API to customize it a bit:
|
|
var pv = new YAHOO.widget.ProfilerViewer("profiler", {
|
|
base: "http://yui.yahooapis.com/2.6.0/build/",
|
|
visible: false, //default is false; this means only the
|
|
//ProfilerViewer launchbar will be displayed
|
|
//on initial render, and the rest of the console
|
|
//(including the DataTable and Chart) won't
|
|
//be loaded and rendered until they're requested.
|
|
//here, we're going to filter the displayed functions
|
|
//and only show those that have been called at least once:
|
|
filter: function(o) {
|
|
return (o.calls > 0);
|
|
},
|
|
showChart: true, //default is true
|
|
//the chart can be hidden entirely by setting showChart to
|
|
//false; you can also control the number of functions
|
|
//measured in the chart to expand or reduce the real estate
|
|
//it takes up on the page:
|
|
maxChartFunctions:8,
|
|
tableHeight:"25em", //default: 15em
|
|
swfUrl:"http://yui.yahooapis.com/2.6.0/build/charts/assets/charts.swf"
|
|
});
|
|
|
|
//You can subscribe to "interesting moments" in the ProfilerViewer
|
|
//just as you can with any other YUI component. Here, we'll use
|
|
//the visibleChange event that accompanies any change to the PV
|
|
//console's "visible" attribute. When made visible, we'll expand
|
|
//the console to full width; when it's minimized, we'll reduce the
|
|
//width of the launcher so that it takes up less screen real
|
|
//estate:
|
|
pv.subscribe("visibleChange", function(o) {
|
|
|
|
//"this" is the ProfilerViewer instance;
|
|
//this.get("element") is the top-level node containing
|
|
//the ProfilerViewer console.
|
|
var el = this.get("element");
|
|
|
|
//In this handler, the "visible" config property is
|
|
//changing. If the new value is "true", the console
|
|
//is becoming visible, so we'll make it wide. If the
|
|
//new value is false, we'll make the launch bar skinny.
|
|
var width = (o.newValue) ? "950px" : "300px";
|
|
YAHOO.util.Dom.setStyle(el, "width", width);
|
|
});
|
|
|
|
//Here, we'll use Drag and Drop to make the ProfilerViewer
|
|
//console draggable.
|
|
var DD = new YAHOO.util.DD("profiler");
|
|
|
|
//ProfilerViewer's API gives you access to the key container
|
|
//elements in the console. Here we'll use access to the
|
|
//header element to make it a drag handle.
|
|
pv.getHeadEl().id = "profilerHead";
|
|
DD.setHandleElId("profilerHead");
|
|
|
|
//The Buttons in the head should not be valid drag handles;
|
|
//they are comprised of anchor elements, which DD allows us
|
|
//to disclude as handles.
|
|
DD.addInvalidHandleType("a");
|
|
|
|
//Drag and Drop performs better when you use the dragOnly
|
|
//setting for elements that can be moved but that don't
|
|
//have any DD interactions with other page elements:
|
|
DD.dragOnly = true;
|
|
|
|
|
|
// Instantiate the menu and corresponding submenus. The first argument passed
|
|
// to the constructor is the id of the element in the DOM that represents
|
|
// the menu; the second is an object literal representing a set of
|
|
// configuration properties for the menu.
|
|
var oMenu = new YAHOO.widget.Menu("productsandservices", {
|
|
context: ["menutoggle", "tl", "tr"]
|
|
});
|
|
|
|
// Call the "render" method with no arguments since the
|
|
// markup for this Menu instance is already exists in the page.
|
|
oMenu.render();
|
|
|
|
// Set focus to the Menu when it is made visible
|
|
oMenu.subscribe("show", oMenu.focus);
|
|
|
|
//Wire up the button to show the menu when clicked;
|
|
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
|
|
|
|
});</textarea>
|
|
</div>
|
|
<div class="yui-u">
|
|
|
|
|
|
<div id="examples">
|
|
<h3 class='firstContent'>ProfilerViewer Control (beta) Examples:</h3>
|
|
|
|
<div id="exampleToc">
|
|
<ul>
|
|
<li><a href='../profilerviewer/pv-basic.html'>Simple Profiling</a></li><li class='selected'><a href='../profilerviewer/pv-api.html'>Using the ProfilerViewer API while Profiling the YUI Menu Control</a></li><li><a href='../profilerviewer/pv-bootstrap.html'>Using Profiler and ProfilerViewer to Profile non-YUI Code</a></li><li><a href='../profilerviewer/pv-skin.html'>Skinning the ProfilerViewer Control</a></li><li><a href='../profilerviewer/pv-spanish.html'>ProfilerViewer Internationalization: Spanish</a></li><li><a href='../profilerviewer/pv-german.html'>ProfilerViewer Internationalization: German</a></li> </ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="module">
|
|
<h3>More ProfilerViewer Control (beta) Resources:</h3>
|
|
<ul>
|
|
<li><a href="http://developer.yahoo.com/yui/profilerviewer/">User's Guide</a> (external)</li>
|
|
<li><a href="../../docs/module_profilerviewer.html">API Documentation</a></li>
|
|
|
|
|
|
<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/profilerviewer.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="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Discussion Forum (external)</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI on Sourceforge (external)</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 (experimental)</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="selected "><a title="The YUI ProfileViewer Control - Functional Examples" href="../../examples/profilerviewer/index.html">ProfilerViewer</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 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 © 2008 Yahoo! Inc. All rights reserved.</p>
|
|
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
|
|
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
|
|
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
|
|
<a href="http://careers.yahoo.com/">Job Openings</a></p>
|
|
</div>
|
|
</div>
|
|
<script src="../../assets/dpSyntaxHighlighter.js"></script>
|
|
<script language="javascript">
|
|
dp.SyntaxHighlighter.HighlightAll('code');
|
|
</script>
|
|
|
|
<script src='../../assets/YUIexamples.js'></script>
|
|
|
|
|
|
</body>
|
|
</html>
|