skins.html revision 07ad9ab2be0e01d9fe09926c37a65a867aa6f401
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore<html>
3196419a9bc437f0c1d6429213ecaa16b4c7569cAdam Moore<head>
266bfbd67fc220029bdadabd3c49e733f9f39360Luke Smith <meta http-equiv="content-type" content="text/html; charset=utf-8">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <title>Widget Skins Test Page</title>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <script src="/build/yui/yui-min.js"></script>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <link type="text/css" rel="stylesheet" href="/build/cssreset/cssreset.css">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <link type="text/css" rel="stylesheet" href="/build/cssfonts/cssfonts.css">
525f1907a1db0a892ea2a2e2abe27082f7484204Adam Moore <link type="text/css" rel="stylesheet" href="/build/cssgrids/cssgrids.css">
525f1907a1db0a892ea2a2e2abe27082f7484204Adam Moore <link type="text/css" rel="stylesheet" href="/build/autocomplete-list/assets/skins/night/autocomplete-list.css">
525f1907a1db0a892ea2a2e2abe27082f7484204Adam Moore <link type="text/css" rel="stylesheet" href="/build/slider-base/assets/skins/night/slider-base.css">
525f1907a1db0a892ea2a2e2abe27082f7484204Adam Moore <link type="text/css" rel="stylesheet" href="/build/tabview/assets/skins/night/tabview.css">
525f1907a1db0a892ea2a2e2abe27082f7484204Adam Moore <link type="text/css" rel="stylesheet" href="/build/datatable-base/assets/skins/night/datatable-base.css">
525f1907a1db0a892ea2a2e2abe27082f7484204Adam Moore <link type="text/css" rel="stylesheet" href="/build/dial/assets/skins/night/dial.css">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <link type="text/css" rel="stylesheet" href="/build/scrollview-list/assets/skins/night/scrollview-list.css">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <link type="text/css" rel="stylesheet" href="/build/scrollview-scrollbars/assets/skins/night/scrollview-scrollbars.css">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <link type="text/css" rel="stylesheet" href="/build/panel/assets/skins/night/panel.css" charset="utf-8">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <link type="text/css" rel="stylesheet" href="/build/node-menunav/assets/skins/night/node-menunav.css" charset="utf-8">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore
b4f1241a5618c650677ee9396e8229fef5e8977fLuke Smith <!--
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/gallery-2011.08.04-15-16/build/gallerycss-cssbutton/gallerycss-cssbutton.css" charset="utf-8">
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore -->
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <link type="text/css" rel="stylesheet" href="http://derek.io/~/fixedbutton.css" charset="utf-8">
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <style>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore .yui3-js-enabled .yui3-widget-loading {
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore display: none;
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore }
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore .yui3-panel form li {
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore list-style: none;
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore }
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore .yui3-panel label {
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore display: block;
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore margin-top: 1em;
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore }
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore .yui3-menu,
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore .yui3-widget {
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore margin: 15px;
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore }
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore .yui3-tabview {
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore width: 300px;
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore }
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore #buttons-dir,
0dd2ce2702cb49626c42d19bff27c7b58738dc05Adam Moore #buttons-skin {
0dd2ce2702cb49626c42d19bff27c7b58738dc05Adam Moore margin: 0 2em;
0dd2ce2702cb49626c42d19bff27c7b58738dc05Adam Moore }
0dd2ce2702cb49626c42d19bff27c7b58738dc05Adam Moore
4002f3e3d5b27aeaeda15e32b8e8b237fe61fd48Adam Moore .button-group {
0dd2ce2702cb49626c42d19bff27c7b58738dc05Adam Moore text-align: center;
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore }
0dd2ce2702cb49626c42d19bff27c7b58738dc05Adam Moore
0dd2ce2702cb49626c42d19bff27c7b58738dc05Adam Moore .yui3-panel {
0dd2ce2702cb49626c42d19bff27c7b58738dc05Adam Moore position: static !important;
0dd2ce2702cb49626c42d19bff27c7b58738dc05Adam Moore }
0dd2ce2702cb49626c42d19bff27c7b58738dc05Adam Moore
0dd2ce2702cb49626c42d19bff27c7b58738dc05Adam Moore /* workaround site CSS */
0dd2ce2702cb49626c42d19bff27c7b58738dc05Adam Moore .yui3-datatable th,
0dd2ce2702cb49626c42d19bff27c7b58738dc05Adam Moore .yui3-calendar th,
0dd2ce2702cb49626c42d19bff27c7b58738dc05Adam Moore .yui3-calendar h4 {
0dd2ce2702cb49626c42d19bff27c7b58738dc05Adam Moore background: transparent;
0dd2ce2702cb49626c42d19bff27c7b58738dc05Adam Moore border: none;
0dd2ce2702cb49626c42d19bff27c7b58738dc05Adam Moore color: inherit;
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore font-size: inherit;
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore }
0dd2ce2702cb49626c42d19bff27c7b58738dc05Adam Moore
0dd2ce2702cb49626c42d19bff27c7b58738dc05Adam Moore </style>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <body class="yui3-skin-sam">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div id="skin-demo">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div class="yui3-g button-group">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div id="buttons-skin" class="yui3-u">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <button id="sam" class="yui3-button yui3-button-selected">Sam</button>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <button id="night" class="yui3-button">Night</button>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <button id="togglebkg" class="yui3-button">Toggle HTML Bkg Color</button>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore </div>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div id="buttons-dir" class="yui3-u">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <button id="rtl" class="yui3-button">RTL</button>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <button id="ltr" class="yui3-button yui3-button-selected">LTR</button>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div class="yui3-g">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore<!-- TabView -->
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div class="yui3-u">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div class="yui3-widget-loading" id="demo-tabview">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <ul>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <a href="#pork">Pork</a>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <a href="#meatball">Meatball</a>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <a href="#salami">Salami</a>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </ul>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div id="pork">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <p>Pork tail short loin ground round. Spare ribs bresaola cow prosciutto. Ground round shoulder shankle venison tongue, beef ribs spare ribs salami frankfurter bacon turducken tri-tip tail ribeye pork chop. Chicken tail bacon, biltong corned beef shankle pancetta shoulder brisket pork belly ham pork bresaola pig.</p>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <div id="meatball">
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <p>Meatball cow leberkäse, tenderloin sirloin spare ribs beef ribs turkey ball tip flank pork loin fatback andouille strip steak tri-tip. Kielbasa drumstick pastrami tongue, strip steak shank tail beef ribs pork turducken pork loin pork chop. Capicola ground round tail t-bone pork chop kielbasa, chicken prosciutto bacon brisket sausage jowl. Andouille shoulder pork pig swine. Venison beef ribs turducken pork chop, sausage turkey drumstick sirloin ham swine chicken.</p>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore </div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div id="salami">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <p>Salami short ribs corned beef, pancetta ham hock jowl frankfurter tail rump flank capicola tri-tip andouille sirloin. Biltong bresaola sausage hamburger ground round, pork loin tri-tip pig andouille fatback short ribs pork jowl. Capicola boudin sirloin tongue, beef prosciutto spare ribs shankle ball tip ham beef ribs turducken tenderloin. Drumstick tenderloin ribeye leberkäse, pork belly pancetta turducken frankfurter bresaola pig biltong.</p>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div class="yui3-u"><div id="demo-datatable"></div></div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div class="yui3-u">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div class="yui3-panel yui3-widget" id="demo-panel">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div class="yui3-panel-content yui3-widget-stdmod">
d32cc429960e4473bb98b1533dd05a9893f7a6c8Adam Moore <div class="yui3-widget-hd">Add A New Product</div>
d32cc429960e4473bb98b1533dd05a9893f7a6c8Adam Moore <div class="yui3-widget-bd">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <form>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <fieldset>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <ul>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <label for="productId">ID</label>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <input type="text" name="productId" id="productId">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <label for="name">Name</label>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <input type="text" name="name" id="name">
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore </li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <!--<li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <label for="price">Price</label>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <input type="text" name="price" id="price">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </li>-->
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </ul>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </fieldset>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </form>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div class="yui3-widget-ft">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <button class="yui3-button">Cancel</button>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <button class="yui3-button">Add</button>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore </div>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <div class="yui3-u">
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <div id="demo-calendar"></div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div class="yui3-u">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div id="demo-dial"></div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div class="yui3-u">
847451b874697fc7df2c96af3935bcdc4c32f105Ryan Grove <div id="demo-xslider"></div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
847451b874697fc7df2c96af3935bcdc4c32f105Ryan Grove <div class="yui3-u">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div id="demo-yslider"></div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
847451b874697fc7df2c96af3935bcdc4c32f105Ryan Grove
847451b874697fc7df2c96af3935bcdc4c32f105Ryan Grove <div class="yui3-u">
847451b874697fc7df2c96af3935bcdc4c32f105Ryan Grove <div id="demo-scrollview">
847451b874697fc7df2c96af3935bcdc4c32f105Ryan Grove <ul>
847451b874697fc7df2c96af3935bcdc4c32f105Ryan Grove <li>Sir DZL</li>
847451b874697fc7df2c96af3935bcdc4c32f105Ryan Grove <li>Casual</li>
847451b874697fc7df2c96af3935bcdc4c32f105Ryan Grove <li>A-Plus</li>
847451b874697fc7df2c96af3935bcdc4c32f105Ryan Grove <li>Opio</li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li>Phesto</li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li>Tajai</li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li>Pep Love</li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li>Domino</li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li>Toure</li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li>Bukue One</li>
b416c92a5cae43a05878fd286aecf0523cfbca40Adam Moore <li>Z-Man</li>
f6baa527839e75655081768c365a749c59edc80dAdam Moore </ul>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore </div>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore </div>
b416c92a5cae43a05878fd286aecf0523cfbca40Adam Moore<!-- menunav -->
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div class="yui3-u">
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <div id="demo-menunav" class="yui3-menu">
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <div class="yui3-menu-content">
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <ul class="first-of-type">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://developer.yahoo.com/">Developer Network</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <a class="yui3-menu-label" href="#pim">Mail</a>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <div id="pim" class="yui3-menu">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div class="yui3-menu-content">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <ul>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Mail</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Contact Lists</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </ul>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <ul>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://addressbook.yahoo.com">Address Book</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://calendar.yahoo.com">Calendar</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Notepad</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </ul>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <ul>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://messenger.yahoo.com">Messenger</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </ul>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://news.yahoo.com">News</a> </li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com">Mobile</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://finance.yahoo.com/">Finance</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://shine.yahoo.com/">Shine</a></li>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://shopping.yahoo.com/">Shopping</a></li>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore </ul>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore </div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore<!-- MenuNav horiz -->
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div class="yui3-u">
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <div id="demo-menunav-horiz" class="yui3-menu yui3-menu-horizontal">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div class="yui3-menu-content">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <ul class="first-of-type">
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.yahoo.com/">Home</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <a class="yui3-menu-label" href="#connect">Connect</a>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div id="connect" class="yui3-menu">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div class="yui3-menu-content">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <ul>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://yahoo.com/">Yahoo!</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <a class="yui3-menu-label" href="#pim">PIM</a>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <div id="pim" class="yui3-menu">
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <div class="yui3-menu-content">
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <ul>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Mail</a></li>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://calendar.yahoo.com">Calendar</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </ul>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <ul>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://addressbook.yahoo.com">Address Book</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://calendar.yahoo.com">What's New</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Notepad</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </ul>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <ul>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://messenger.yahoo.com">Messenger</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </ul>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore </div>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore </div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </li>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://movies.yahoo.com">Movies</a> </li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com">Mobile</a></li>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://travel.yahoo.com/">Travel</a></li>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://sports.yahoo.com/">Sports</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://finance.yahoo.com/">Finance</a></li>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore </ul>
77233109ecd5f5823f64aed88ebfbae24c2d402fAdam Moore </div>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore </div>
77233109ecd5f5823f64aed88ebfbae24c2d402fAdam Moore </li>
77233109ecd5f5823f64aed88ebfbae24c2d402fAdam Moore
77233109ecd5f5823f64aed88ebfbae24c2d402fAdam Moore <li>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <a class="yui3-menu-label" href="#find-info">Find Info</a>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div id="find-info" class="yui3-menu">
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <div class="yui3-menu-content">
77233109ecd5f5823f64aed88ebfbae24c2d402fAdam Moore <ul>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://search.yahoo.com">Yahoo! Search</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://babelfish.yahoo.com/">Babel Fish Translations</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://info.yahoo.com/">Company Info</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://search.yahoo.com/cc">Creative Commons Search</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://dir.yahoo.com/">Directory</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://hotjobs.yahoo.com/">Jobs</a></li>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://local.yahoo.com">Local</a></li>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://maps.yahoo.com/">Maps</a></li>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://realestate.yahoo.com">Real Estate</a></li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://education.yahoo.com/reference/">Reference</a></li>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore </ul>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore </li>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </ul>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
bb9912c86249bf7dec59ddc9d28434cabba9309aAdam Moore </div>
77233109ecd5f5823f64aed88ebfbae24c2d402fAdam Moore<!-- end menu nav horizontal-->
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore<!-- MenuNav horiz split button-->
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <div class="yui3-u">
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <div id="menu-1" class="yui3-menu yui3-menu-horizontal yui3-splitbuttonnav"><!-- Bounding box -->
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <div class="yui3-menu-content"><!-- Content box -->
a0e486c33f9e4fae413b80adc659a906586f1ed3Adam Moore <ul>
77233109ecd5f5823f64aed88ebfbae24c2d402fAdam Moore <li>
<span class="yui3-menu-label"><!-- menu label root node -->
<a href="http://travel.yahoo.com">Travel</a><!-- menu label default action -->
<a href="#travel-options" class="yui3-menu-toggle">Travel Options</a><!-- menu label submenu toggle -->
</span>
<div id="travel-options" class="yui3-menu">
<div class="yui3-menu-content">
<ul>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://travel.yahoo.com/beach;_ylt=AtWGJZLM73jp52fJNMJcOwGhpYMA">Beach</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://travel.yahoo.com/honeymoon;_ylt=ArJByEt5iYogEYMdhsWy_sWhpYMA">Honeymoon</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://travel.yahoo.com/national-parks;_ylt=Aisxea9BMnUZdmrYv.sOYk2hpYMA">National Parks</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://travel.yahoo.com/family;_ylt=Aiz4pI2rCCo6cy7G0XqfdPehpYMA">Family</a></li>
</ul>
</div>
</div>
</li>
<li>
<span class="yui3-menu-label"><!-- menu label root node -->
<a href="http://news.yahoo.com">News</a><!-- menu label default action -->
<a href="#news-options" class="yui3-menu-toggle">News Options</a><!-- menu label submenu toggle -->
</span>
<div id="news-options" class="yui3-menu">
<div class="yui3-menu-content">
<ul>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://news.yahoo.com/">News</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://news.yahoo.com/world">World</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://news.yahoo.com/tech">Tech</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://news.yahoo.com/sports">Sports</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- end menu nav horizontal split button-->
<!-- Autocomplete -->
<div class="yui3-u">
<div id="autocomplete" class="yui3-widget">
<label for="ac-input">Enter the name of a US state:</label><br>
<input id="ac-input" type="text">
</div>
</div>
</div>
</div>
<script>
YUI({filter: 'raw'}).use('autocomplete', 'autocomplete-filters', 'autocomplete-highlighters', 'tabview', 'datatable-sort', 'calendar', 'panel', 'dial', 'node-menunav', 'node-event-delegate', 'slider', 'scrollview', 'scrollview-list', function(Y) {
var buttonHandlers = {
sam: function(e) {
Y.one('body').replaceClass('yui3-skin-night', 'yui3-skin-sam');
},
night: function(e) {
Y.one('body').replaceClass('yui3-skin-sam', 'yui3-skin-night');
},
togglebkg: function(e) {
if(Y.one('html').getStyle('backgroundColor') === "rgb(255, 255, 255)"){
Y.one('html').setStyle('backgroundColor', "rgb(0, 0, 0)");
//Y.one('html').setStyle('color', "rgb(255, 255, 255)");
}else{
Y.one('html').setStyle('backgroundColor', "rgb(255, 255, 255)");
// Y.one('html').setStyle('color', "rgb(0, 0, 0)"); the default
}
},
rtl: function(e) {
Y.one('body').setAttribute('dir', 'rtl');
},
ltr: function(e) {
Y.one('body').setAttribute('dir', 'ltr');
}
};
function buttonGroupHandler(e) {
var button = e.currentTarget,
handler = buttonHandlers[button.get('id')],
selectedClass = Y.ClassNameManager.getClassName('button', 'selected');
if (handler) {
button.addClass(selectedClass);
button.siblings().removeClass(selectedClass);
handler.call(this, e);
}
}
/////////// autocomplete
var states = [
'Alabama',
'Alaska',
'Arizona',
'Arkansas',
'California',
'Colorado',
'Connecticut',
'Delaware',
'Florida',
'Georgia',
'Hawaii',
'Idaho',
'Illinois',
'Indiana',
'Iowa',
'Kansas',
'Kentucky',
'Louisiana',
'Maine',
'Maryland',
'Massachusetts',
'Michigan',
'Minnesota',
'Mississippi',
'Missouri',
'Montana',
'Nebraska',
'Nevada',
'New Hampshire',
'New Jersey',
'New Mexico',
'New York',
'North Dakota',
'North Carolina',
'Ohio',
'Oklahoma',
'Oregon',
'Pennsylvania',
'Rhode Island',
'South Carolina',
'South Dakota',
'Tennessee',
'Texas',
'Utah',
'Vermont',
'Virginia',
'Washington',
'West Virginia',
'Wisconsin',
'Wyoming'
];
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
resultFilters : 'phraseMatch',
resultHighlighter: 'phraseMatch',
source : states
});
/////////// end autocomplete
new Y.TabView({
srcNode: '#demo-tabview'
}).render();
// what if...
// Y.TabView('#demo-tabview');
// Y.one('#demo-tabview').plug('tabs');
new Y.DataTable.Base({
srcNode: '#demo-datatable',
columnset: [
{key:"Company", label:"Column A", sortable:true},
{key:"Phone", label:"Column B", sortable:true},
{key:"Contact", label:"Column C", sortable:true}
],
recordset: [
{Company:"Company Bee", Phone:"415-555-1234", Contact:"Sally Spencer"},
{Company:"Acme Company", Phone:"650-555-4444", Contact:"John Jones"},
{Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}
],
caption: "Example table with sortable columns"
}).plug(Y.Plugin.DataTableSort).render();
// what if...
// plug('sort').render();
new Y.Calendar({
render: "#demo-calendar"
});
new Y.Dial({
render: "#demo-dial"
});
new Y.Slider({
axis: 'y',
render: '#demo-yslider'
});
new Y.Slider({
render: '#demo-xslider'
});
new Y.ScrollView({
height: 150,
width: 150,
srcNode: '#demo-scrollview',
plugins:[Y.Plugin.ScrollViewList],
render:true
});
// what if...
// Y.Calendar('#demo-calendar');
// Y.Dial('#demo-dial');
// Y.Dial('#demo-dial');
// new Y.Slider('#demo-yslider', {
// axis: 'y',
// });
Y.one('#demo-menunav').plug(Y.Plugin.NodeMenuNav);
Y.one('#demo-menunav-horiz').plug(Y.Plugin.NodeMenuNav);
var menu = Y.one("#menu-1");
menu.plug(Y.Plugin.NodeMenuNav, { autoSubmenuDisplay: false, mouseOutHideDelay: 0 });
// what if...
// Y.Menu('#demo-menu');
// handle button groups
Y.one('.button-group').delegate('click', buttonGroupHandler, 'button');
/* what if...
Y.RadioButtons('.button-group', {
'#sam': buttonHandlers['sam'],
'#night': buttonHandlers['night'],
'#ltr': buttonHandlers['ltr'],
'#rtl': buttonHandlers['rtl']
});
*/
});
</script>
</body>
</html>