skins.html revision 283a7ee219d2fefddeb34c0def9f6a3c8410e85b
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <meta http-equiv="content-type" content="text/html; charset=utf-8">
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <link type="text/css" rel="stylesheet" href="/build/cssreset/cssreset.css">
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <link type="text/css" rel="stylesheet" href="/build/cssfonts/cssfonts.css">
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <link type="text/css" rel="stylesheet" href="/build/cssgrids/cssgrids.css">
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <link type="text/css" rel="stylesheet" href="/build/slider-base/assets/skins/night/slider-base.css">
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <link type="text/css" rel="stylesheet" href="/build/tabview/assets/skins/night/tabview.css">
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <link type="text/css" rel="stylesheet" href="/build/datatable-base/assets/skins/night/datatable-base.css">
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <link type="text/css" rel="stylesheet" href="/build/dial/assets/skins/night/dial.css">
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <link type="text/css" rel="stylesheet" href="/build/scrollview-list/assets/skins/night/scrollview-list.css">
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <link type="text/css" rel="stylesheet" href="/build/panel/assets/skins/night/panel.css" charset="utf-8">
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <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">
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney .yui3-js-enabled .yui3-widget-loading {
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney display: none;
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney .yui3-panel form li {
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney list-style: none;
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney .yui3-panel label {
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney display: block;
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney margin-top: 1em;
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney .yui3-widget {
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney margin: 15px;
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney .yui3-tabview {
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney width: 400px;
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney #buttons-dir,
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney #buttons-skin {
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney margin: 0 2em;
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney .button-group {
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney text-align: center;
dba22eabcfca7e9fe626abbad1494c3a0200dde0Matt Sweeney .yui3-panel {
dba22eabcfca7e9fe626abbad1494c3a0200dde0Matt Sweeney position: static !important;
dba22eabcfca7e9fe626abbad1494c3a0200dde0Matt Sweeney /* workaround site CSS */
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney .yui3-datatable th,
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney .yui3-calendar th,
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney .yui3-calendar h4 {
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney background: transparent;
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney border: none;
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney color: inherit;
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney font-size: inherit;
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <button id="sam" class="yui3-button yui3-button-selected">Sam</button>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <button id="night" class="yui3-button">Night</button>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <button id="rtl" class="yui3-button">RTL</button>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <button id="ltr" class="yui3-button yui3-button-selected">LTR</button>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <div class="yui3-widget-loading" id="demo-tabview">
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <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. Kielbasa filet mignon beef ribs, brisket ham ribeye pig ground round jerky flank turkey ham hock. Bacon swine jowl, pancetta salami boudin rump venison meatloaf strip steak. Fatback shoulder beef capicola.</p>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <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. Kielbasa pancetta t-bone ham. Brisket tenderloin meatball turducken, hamburger ball tip rump pork flank ground round spare ribs kielbasa beef ribs bacon.</p>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <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. Pastrami beef ribs meatball tri-tip, chuck jerky prosciutto beef rump drumstick bresaola jowl. Hamburger leberkäse pork chop, ball tip meatball ham andouille fatback corned beef pork loin shoulder boudin. Shoulder short loin flank filet mignon tri-tip.</p>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <div class="yui3-u"><div id="demo-datatable"></div></div>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <div class="yui3-panel yui3-widget" id="demo-panel">
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <div class="yui3-panel-content yui3-widget-stdmod">
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <div class="yui3-widget-hd">Add A New Product</div>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <input type="text" name="productId" id="productId">
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <button class="yui3-button">Remove All Items</button>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://developer.yahoo.com/">Developer Network</a></li>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Mail</a></li>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.zimbra.com">Zimbra</a></li>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://addressbook.yahoo.com">Address Book</a></li>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://calendar.yahoo.com">Calendar</a></li>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Notepad</a></li>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://messenger.yahoo.com">Messenger</a></li>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://profiles.yahoo.com">Profiles</a> </li>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com">Mobile</a></li>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mybloglog.yahoo.com/">MyBlogLog</a></li>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pride.yahoo.com/">Pride</a></li>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/">Upcoming</a></li>
57944bee374767ef401f984a0136afb3822f22f7Matt SweeneyYUI({filter: 'raw'}).use('tabview', 'datatable-sort', 'calendar', 'panel', 'dial', 'node-menunav', 'node-event-delegate', 'slider', 'scrollview', 'scrollview-list', function(Y) {
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney var buttonHandlers = {
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney sam: function(e) {
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney Y.one('body').replaceClass('yui3-skin-night', 'yui3-skin-sam');
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney night: function(e) {
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney Y.one('body').replaceClass('yui3-skin-sam', 'yui3-skin-night');
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney rtl: function(e) {
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney Y.one('body').setAttribute('dir', 'rtl');
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney ltr: function(e) {
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney Y.one('body').setAttribute('dir', 'ltr');
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney function buttonGroupHandler(e) {
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney handler = buttonHandlers[button.get('id')],
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney selectedClass = Y.ClassNameManager.getClassName('button', 'selected');
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney if (handler) {
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney button.addClass(selectedClass);
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney button.siblings().removeClass(selectedClass);
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney srcNode: '#demo-tabview'
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney }).render();
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney // what if...
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney // Y.TabView('#demo-tabview');
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney // Y.one('#demo-tabview').plug('tabs');
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney srcNode: '#demo-datatable',
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney columnset: [
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney {key:"Company", label:"Column A", sortable:true},
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney {key:"Phone", label:"Column B", sortable:true},
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney {key:"Contact", label:"Column C", sortable:true}
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney recordset: [
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney {Company:"Company Bee", Phone:"415-555-1234", Contact:"Sally Spencer"},
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney {Company:"Acme Company", Phone:"650-555-4444", Contact:"John Jones"},
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney {Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney caption: "Example table with sortable columns"
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney }).plug(Y.Plugin.DataTableSort).render();
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney // what if...
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney // plug('sort').render();
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney render: "#demo-calendar"
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney render: "#demo-dial"
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney render: '#demo-yslider'
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney render: '#demo-xslider'
283a7ee219d2fefddeb34c0def9f6a3c8410e85bSatyen Desai height: 150,
283a7ee219d2fefddeb34c0def9f6a3c8410e85bSatyen Desai srcNode: '#demo-scrollview',
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney // what if...
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney // Y.Calendar('#demo-calendar');
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney // Y.Dial('#demo-dial');
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney // Y.Dial('#demo-dial');
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney // new Y.Slider('#demo-yslider', {
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney // axis: 'y',
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney Y.one('#demo-menunav').plug(Y.Plugin.NodeMenuNav);
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney // what if...
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney // Y.Menu('#demo-menu');
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney // handle button groups
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney Y.one('.button-group').delegate('click', buttonGroupHandler, 'button');
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney /* what if...
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney Y.RadioButtons('.button-group', {
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney '#sam': buttonHandlers['sam'],
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney '#night': buttonHandlers['night'],
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney '#ltr': buttonHandlers['ltr'],
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney '#rtl': buttonHandlers['rtl']