File: pag_manual_render_log.html

package info (click to toggle)
yui 2.9.0.dfsg.0.1-0.1
links: PTS, VCS
area: main
in suites: wheezy
size: 89,324 kB
sloc: php: 52,404; java: 4,329; xml: 748; makefile: 37
file content (723 lines) | stat: -rw-r--r-- 32,190 bytes
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Paginator: Manually rendering Paginator UI Components</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/paginator/assets/skins/sam/paginator.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/paginator/paginator-debug.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
.yui-skin-sam .yui-pg-container { margin: 0; }
.yui-skin-sam .yui-pg-current   { margin-right: 15px; }

.yui-skin-sam .yui-pg-previous {
    float: left;
    padding: 3px 5px;
}
.yui-skin-sam .yui-pg-next {
    float: right;
    padding: 3px 5px;
}
.yui-skin-sam span.yui-pg-next,
.yui-skin-sam span.yui-pg-previous {
    display: none;
}

#tbl,
#report,
#paging {
    width: 400px;
    margin: 0 auto;
}
#report {
    color: #fff;
    background: #ccc;
    font-size: 200%;
    margin-bottom: 1em;
    text-align: right;
}
#demo table {
    border-collapse: collapse;
    color: #333;
    width: 100%;
}
#demo th {
    border-bottom: 4px solid #999;
    color: #444;
    font: normal 125%/100% Trebuchet MS, Arial, sans-serif;
    padding: 0 6px;
}
#demo tbody {
    background: #fff;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
#demo tbody td {
    border-bottom: 1px solid #eee;
    padding: 5px;
}
#demo tfoot td {
    overflow: hidden;
}
</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 &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: Paginator: Manually rendering Paginator UI Components</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>Paginator: Manually rendering Paginator UI Components</h1>
	
	<div class="exampleIntro">
	<p>If you have a UI where it doesn't make sense to place all controls in a single container (or set of containers), you can place individual UI Components manually outside Paginator's configured container(s).</p>
<p>For this example, we'll create a table from a data array and render a few controls into the generated <code>&lt;tfoot&gt;</code> using the Paginator's <code>template</code>.  We'll also subscribe to the Paginator's <code>render</code> event with a callback that renders a CurrentPageReport UI Component into a <code>&lt;div&gt;</code> above the table.</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="pag_manual_render_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="demo">
    <div id="report"></div>
    <div id="tbl"></div>
</div>
<script type="text/javascript" src="assets/inventory.js"></script>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function () {

var Ex = YAHOO.namespace('example'),
    d  = document;

/* Convenience functions for building the DOM structure */
Ex.DOM = {
    create : function (el,innerHTML) {
        el = el && el.nodeName ? el : d.createElement(el);

        if (el && innerHTML !== undefined) {
            el.innerHTML = innerHTML;
        }

        return el;
    },
    add : function (par, child, innerHTML) {
        par = par && YAHOO.util.Dom.get(par);
        if (par && par.appendChild) {
            child = Ex.DOM.create(child,innerHTML);
            if (child) {
                par.appendChild(child);
            }
        }

        return child;
    }
};

/* Table generation/maintenance API */
Ex.table = {
    table   : null,
    columns : ['Item','Quantity','Description'],
    pageSize: 5,
    data    : null,
    tbody   : [],
    tfoot   : null,

    load : function (data) {
        if (YAHOO.lang.isArray(data)) {
            this.data = data;
            this.tbody = [];
        }
        return this;
    },
    render : function (container) {
        if (!this.table) {
            container = (container && YAHOO.util.Dom.get(container)) || d.body;

            var thead, tbody, row, cell, i, len;

            this.table = Ex.DOM.create('table');
            thead = Ex.DOM.add(this.table,'thead');
            row   = Ex.DOM.add(thead,'tr');

            for (i=0,len=this.columns.length; i<len; ++i) {
                Ex.DOM.add(row,'th',this.columns[i]);
            }

            this.tfoot = Ex.DOM.add(this.table,'tfoot');
            cell = Ex.DOM.add(Ex.DOM.add(this.tfoot,'tr'),'td');
            cell.colSpan = this.columns.length;

            if (this.data) {
                this.showPage(1);
            } else {
                row  = Ex.DOM.create('tr');
                cell = Ex.DOM.add(row,'td','No Data');
                cell.colSpan = this.columns.length;

                Ex.DOM.add(Ex.DOM.add(this.table,'tbody'),row);
            }

            container.innerHTML = '';
            Ex.DOM.add(container,this.table);
        }
        return this;
    },
    showPage : function (page) {
        var cur, tbody, row, i, j, len, limit;

        if (this.table) {
            cur = this.table.getElementsByTagName('tbody')[0];

            if (YAHOO.lang.isNumber(page)) {
                tbody = this.tbody[page];
                if (!cur || cur !== tbody) {
                    if (!tbody) {
                        tbody = this.tbody[page] = Ex.DOM.create('tbody');

                        i = (page - 1) * this.pageSize;
                        limit  = Math.min(Ex.data.inventory.length,
                                          i + this.pageSize);
                        for (; i < limit; ++i) {
                            row = Ex.DOM.add(tbody,'tr');
                            for (j=0,len=this.columns.length; j<len; ++j) {
                                Ex.DOM.add(row,'td',
                                    this.data[i][this.columns[j]]);
                            }
                        }
                    }

                    if (cur) {
                        this.table.replaceChild(tbody,cur);
                    } else {
                        Ex.DOM.add(this.table,tbody);
                    }
                }
            }
        }
        return this;
    }
};
    
Ex.handlePagination = function (state) {
    Ex.table.showPage(state.page);

    Ex.paginator.setState(state);
};

Ex.paginator = new YAHOO.widget.Paginator({
    rowsPerPage  : Ex.table.pageSize,
    totalRecords : Ex.data.inventory.length,
    containers   : d.createElement('div'),

    template              : "{PreviousPageLink}{NextPageLink}",
    pageReportTemplate    : "Page {currentPage} of {totalPages}",
    previousPageLinkLabel : "previous",
    nextPageLinkLabel     : "next"
});

Ex.paginator.subscribe('changeRequest', Ex.handlePagination);
Ex.paginator.subscribe('render', function () {
    var pageReport, pageReportNode, report;

    report = YAHOO.util.Dom.get('report');

    // Instantiate the UI Component
    pageReport = new YAHOO.widget.Paginator.ui.CurrentPageReport(Ex.paginator);

    // render the UI Component, passing an arbitrary string (the ID of the
    // destination container by convention)
    pageReportNode = pageReport.render('report');

    // Append the generated node into the container
    report.appendChild(pageReportNode);
});


// Render the UI
Ex.table.load(Ex.data.inventory).render('tbl');

// Render the Paginator controls into the off DOM div passed as a container
// just to illustrate that it is possible to do so.
Ex.paginator.render();

// Add the Paginator's configured container to the table's tfoot.
Ex.DOM.add(Ex.table.tfoot.rows[0].cells[0],Ex.paginator.getContainerNodes()[0]);

});
</script>
	
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
	
		
		</div>
		
	
	</div>			
	</div>
		
	<h2 class="first">Example Data</h2>
<p>In this example, we'll be working with a data array stored in <code>YAHOO.example.data.inventory</code>.</p>

<textarea name="code" class="JScript" rows="1" cols="60">
YAHOO.namespace('example.data').inventory = [
    {SKU:"23-23874", Quantity:43, Item:"Helmet", Description:"Red baseball helmet. Size: Large."},
    {SKU:"48-38835", Quantity:84, Item:"Football", Description:"Leather football."},
    ...
];
</textarea>

<h2>Start with the content</h2>
<p>We'll start with two empty divs:</p>

<textarea name="code" class="HTML" rows="1" cols="60">
<div id="demo">
    <div id="report"></div>
    <div id="tbl"></div>
</div>
</textarea>

<p>To populate <code>div#tbl</code> we write some application code to generate a table with a tfoot.  The table will be wrapped in an object with an API including a <code>showPage(pageNumber)</code> method.</p>

<textarea name="code" class="JScript" rows="1" cols="60">
YAHOO.util.Event.onDOMReady(function () {

var Ex = YAHOO.namespace('example'),
    d  = document;

// API for generating the table
Ex.table = {
    table   : null,
    columns : ['Item','Quantity','Description'],
    pageSize: 5,
    data    : null,
    tbody   : null,
    tfoot   : null,

    load : function (data) { ... },
    render : function (container) { ... },
    showPage : function (page) { ... }
};

...
</textarea>

<h2>Add Pagination</h2>
<p>Create a Paginator and a method to subscribe to its <code>changeRequest</code> event.  Note the configured container is a generated <code>&lt;div&gt;</code> and is not yet on the page.  We'll append this to the <code>&lt;tfoot&gt;</code> when it is available.</p>

<textarea name="code" class="JScript" rows="1" cols="60">
Ex.handlePagination = function (state) {
    // Update the content via API call
    Ex.table.showPage(state.page);

    // Confirm page change with Paginator
    Ex.paginator.setState(state);
};

// Create a Paginator and configure the UI Components included
// in the template and the CurrentPageReport we'll render manually
Ex.paginator = new YAHOO.widget.Paginator({
    rowsPerPage  : Ex.table.pageSize,
    totalRecords : Ex.data.inventory.length,
    containers   : d.createElement('div'),

    template              : "{PreviousPageLink}{NextPageLink}",
    pageReportTemplate    : "Page {currentPage} of {totalPages}",
    previousPageLinkLabel : "previous",
    nextPageLinkLabel     : "next"
});

Ex.paginator.subscribe('changeRequest', Ex.handlePagination);
</textarea>

<h2>Subscribe to create the CurrentPageReport</h2>
<p>To synchronize the rendering of all UI Components, we subscribe to the Paginator's <code>render</code> event with a callback to add a CurrentPageReport into <code>div#report</code>.</p>
<p>UI Components' <code>render</code> methods take a string seed usually used by Paginator to guarantee uniqueness of generated IDs when rendering into multiple containers.  When rendering them manually, you'll need to provide your own seed.  If you render more than one of the same type of UI Component, respective <code>render</code> calls must be passed different seeds.</p>

<textarea name="code" class="JScript" rows="1" cols="60">
Ex.paginator.subscribe('render', function () {
    var pageReport, pageReportNode, report;

    report = YAHOO.util.Dom.get('report');

    // Instantiate the UI Component
    pageReport = new YAHOO.widget.Paginator.ui.CurrentPageReport(Ex.paginator);

    // render the UI Component, passing an arbitrary ID seed (the ID of the
    // destination container by convention)
    pageReportNode = pageReport.render('report');

    // Append the generated node into the container
    report.appendChild(pageReportNode);
});
</textarea>

<h2>Render everything</h2>
<p>Render the table and the Paginator.  The CurrentPageReport will be rendered in response to the Paginator's emitted <code>render</code> event.</p>
<p>The Paginator was configured to use a <code>&lt;div&gt;</code> created off the page DOM, so the <code>template</code> controls are not visible until the <code>&lt;div&gt;</code> is then added to the table's <code>&lt;tfoot&gt;</code>.</p>

<textarea name="code" class="JScript" rows="1" cols="60">
// Render the UI
Ex.table.load(Ex.data.inventory).render('tbl');

// Render the Paginator controls into the off DOM div passed as a container
// just to illustrate that it is possible to do so.
Ex.paginator.render();

// Add the Paginator's configured container to the table's tfoot.
Ex.DOM.add(Ex.table.tfoot.rows[0].cells[0],Ex.paginator.getContainerNodes()[0]);
</textarea>

<h2>Full Code Listing</h2>

<h3>JavaScript</h3>
<p>Some convenience methods were created to aid in the DOM structure assembly.</p>

<textarea name="code" class="JScript" rows="1" cols="60">
YAHOO.util.Event.onDOMReady(function () {

var Ex = YAHOO.namespace('example'),
    d  = document;

/* Convenience functions for building the DOM structure */
Ex.DOM = {
    create : function (el,innerHTML) {
        el = el && el.nodeName ? el : d.createElement(el);

        if (el && innerHTML !== undefined) {
            el.innerHTML = innerHTML;
        }

        return el;
    },
    add : function (par, child, innerHTML) {
        par = par && YAHOO.util.Dom.get(par);
        if (par && par.appendChild) {
            child = Ex.DOM.create(child,innerHTML);
            if (child) {
                par.appendChild(child);
            }
        }

        return child;
    }
};

/* Table generation/maintenance API */
Ex.table = {
    table   : null,
    columns : ['Item','Quantity','Description'],
    pageSize: 5,
    data    : null,
    tbody   : [],
    tfoot   : null,

    load : function (data) {
        if (YAHOO.lang.isArray(data)) {
            this.data = data;
            this.tbody = [];
        }
        return this;
    },
    render : function (container) {
        if (!this.table) {
            container = (container && YAHOO.util.Dom.get(container)) || d.body;

            var thead, tbody, row, cell, i, len;

            this.table = Ex.DOM.create('table');
            thead = Ex.DOM.add(this.table,'thead');
            row   = Ex.DOM.add(thead,'tr');

            for (i=0,len=this.columns.length; i<len; ++i) {
                Ex.DOM.add(row,'th',this.columns[i]);
            }

            this.tfoot = Ex.DOM.add(this.table,'tfoot');
            cell = Ex.DOM.add(Ex.DOM.add(this.tfoot,'tr'),'td');
            cell.colSpan = this.columns.length;

            if (this.data) {
                this.showPage(1);
            } else {
                row  = Ex.DOM.create('tr');
                cell = Ex.DOM.add(row,'td','No Data');
                cell.colSpan = this.columns.length;

                Ex.DOM.add(Ex.DOM.add(this.table,'tbody'),row);
            }

            container.innerHTML = '';
            Ex.DOM.add(container,this.table);
        }
        return this;
    },
    showPage : function (page) {
        var cur, tbody, row, i, j, len, limit;

        if (this.table) {
            cur = this.table.getElementsByTagName('tbody')[0];

            if (YAHOO.lang.isNumber(page)) {
                tbody = this.tbody[page];
                if (!cur || cur !== tbody) {
                    if (!tbody) {
                        tbody = this.tbody[page] = Ex.DOM.create('tbody');

                        i = (page - 1) * this.pageSize;
                        limit  = Math.min(Ex.data.inventory.length,
                                          i + this.pageSize);
                        for (; i < limit; ++i) {
                            row = Ex.DOM.add(tbody,'tr');
                            for (j=0,len=this.columns.length; j<len; ++j) {
                                Ex.DOM.add(row,'td',
                                    this.data[i][this.columns[j]]);
                            }
                        }
                    }

                    if (cur) {
                        this.table.replaceChild(tbody,cur);
                    } else {
                        Ex.DOM.add(this.table,tbody);
                    }
                }
            }
        }
        return this;
    }
};
    
Ex.handlePagination = function (state) {
    Ex.table.showPage(state.page);

    Ex.paginator.setState(state);
};

Ex.paginator = new YAHOO.widget.Paginator({
    rowsPerPage  : Ex.table.pageSize,
    totalRecords : Ex.data.inventory.length,
    containers   : d.createElement('div'),

    template              : "{PreviousPageLink}{NextPageLink}",
    pageReportTemplate    : "Page {currentPage} of {totalPages}",
    previousPageLinkLabel : "previous",
    nextPageLinkLabel     : "next"
});

Ex.paginator.subscribe('changeRequest', Ex.handlePagination);
Ex.paginator.subscribe('render', function () {
    var pageReport, pageReportNode, report;

    report = YAHOO.util.Dom.get('report');

    // Instantiate the UI Component
    pageReport = new YAHOO.widget.Paginator.ui.CurrentPageReport(Ex.paginator);

    // render the UI Component, passing an arbitrary string (the ID of the
    // destination container by convention)
    pageReportNode = pageReport.render('report');

    // Append the generated node into the container
    report.appendChild(pageReportNode);
});


// Render the UI
Ex.table.load(Ex.data.inventory).render('tbl');

// Render the Paginator controls into the off DOM div passed as a container
// just to illustrate that it is possible to do so.
Ex.paginator.render();

// Add the Paginator's configured container to the table's tfoot.
Ex.DOM.add(Ex.table.tfoot.rows[0].cells[0],Ex.paginator.getContainerNodes()[0]);

});
</textarea>

<h3>CSS</h3>
<p>Custom positioning and style were added to the UI Components used.  You'll see the Sam skin overrides as the rules with selectors beginning with <code>.yui-skin-sam</code>.</p>

<textarea name="code" class="CSS" rows="1" cols="60">
/* Sam skin rule overrides */
.yui-skin-sam .yui-pg-container { margin: 0; }
.yui-skin-sam .yui-pg-current   { margin-right: 15px; }

.yui-skin-sam .yui-pg-previous {
    float: left;
    padding: 3px 5px;
}
.yui-skin-sam .yui-pg-next {
    float: right;
    padding: 3px 5px;
}
.yui-skin-sam span.yui-pg-next,
.yui-skin-sam span.yui-pg-previous {
    display: none;
}

/* content specific styles */
#tbl,
#report,
#paging {
    width: 400px;
    margin: 0 auto;
}
#report {
    color: #fff;
    background: #ccc;
    font-size: 200%;
    margin-bottom: 1em;
    text-align: right;
}
#demo table {
    border-collapse: collapse;
    color: #333;
    width: 100%;
}
#demo th {
    border-bottom: 4px solid #999;
    color: #444;
    font: normal 125%/100% Trebuchet MS, Arial, sans-serif;
    padding: 0 6px;
}
#demo tbody {
    background: #fff;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
#demo tbody td {
    border-bottom: 1px solid #eee;
    padding: 5px;
}
#demo tfoot td {
    overflow: hidden;
}
</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/?paginator&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="pag_manual_render.html">Reload with logging<br />and debugging disabled.</a></span></span></p>
							</div>
						</div>
					
				
					<div id="examples">
						<h3>Paginator Examples:</h3>
	
						<div id="exampleToc">
							<ul>
								<li><a href='../paginator/pag_getting_started.html'>Getting started with Paginator</a></li><li><a href='../paginator/pag_multiple_containers.html'>Rendering controls into multiple containers</a></li><li class='selected'><a href='../paginator/pag_manual_render.html'>Manually rendering Paginator UI Components</a></li><li><a href='../paginator/pag_configuration.html'>Configuring the Paginator</a></li><li><a href='../datatable/dt_clientpagination.html'>Client-side Pagination (included with examples for DataTable Control)</a></li><li><a href='../datatable/dt_dynamicdata.html'>Server-side Pagination and Sorting for Dynamic Data (included with examples for DataTable Control)</a></li><li><a href='../datatable/dt_complex.html'>Complex Example of Multiple Features (included with examples for DataTable Control)</a></li>							</ul>
						</div>
					</div>
					
					<div id="module">
						<h3>More Paginator Resources:</h3>
						<ul>
							<li><a href="http://developer.yahoo.com/yui/paginator/">User's Guide</a> (external)</li>
						<li><a href="../../docs/module_paginator.html">API Documentation</a></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="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="selected "><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; 2011 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>