d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <meta http-equiv="content-type" content="text/html; charset=utf-8">
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <link type="text/css" rel="stylesheet" href="/build/cssreset/cssreset.css">
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <link type="text/css" rel="stylesheet" href="/build/cssfonts/cssfonts.css">
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <link type="text/css" rel="stylesheet" href="/build/cssgrids/cssgrids.css">
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <link type="text/css" rel="stylesheet" href="/build/slider-base/assets/skins/night/slider-base.css">
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <link type="text/css" rel="stylesheet" href="/build/tabview/assets/skins/night/tabview.css">
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <link type="text/css" rel="stylesheet" href="/build/datatable-base/assets/skins/night/datatable-base.css">
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <link type="text/css" rel="stylesheet" href="/build/dial/assets/skins/night/dial.css">
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <link type="text/css" rel="stylesheet" href="/build/scrollview-list/assets/skins/night/scrollview-list.css">
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <link type="text/css" rel="stylesheet" href="/build/panel/assets/skins/night/panel.css" charset="utf-8">
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <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">
d909360e6d2b72521cc26a0cd458a68cb4337b66Jeff Conniff <link type="text/css" rel="stylesheet" href="http://derek.io/~/fixedbutton.css" charset="utf-8">
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff .yui3-js-enabled .yui3-widget-loading {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff display: none;
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff .yui3-panel form li {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff list-style: none;
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff .yui3-panel label {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff display: block;
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff margin-top: 1em;
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff .yui3-widget {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff margin: 15px;
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff .yui3-tabview {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff width: 400px;
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff #buttons-dir,
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff #buttons-skin {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff margin: 0 2em;
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff .button-group {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff text-align: center;
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff .yui3-panel {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff position: static !important;
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff /* workaround site CSS */
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff .yui3-datatable th,
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff .yui3-calendar th,
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff .yui3-calendar h4 {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff background: transparent;
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff border: none;
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff color: inherit;
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff font-size: inherit;
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff/* Jeff CSS recommendations */
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniffhtml .yui3-skin-sam .yui3-panel-content {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff box-shadow: 0 0 20px rgba(0,0,0,0.5);
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff/* un-comment this to check the panel box-shadow when over other objects
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff background: url(assets/images/background_components_panel_shadow_check.png);
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniffhtml .yui3-skin-sam .yui3-scrollview-vert .yui3-scrollview-content .yui3-scrollview-item {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff /*background-color: #151515;*/
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff border-bottom: 1px solid #cccccc;
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniffhtml .yui3-skin-sam .yui3-scrollview {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff border: solid 1px #808080;
d4d14f7a32ecfb7612287c3c3202a731a32d079eJeff Conniffhtml .yui3-skin-night .yui3-calendar-content {
d4d14f7a32ecfb7612287c3c3202a731a32d079eJeff Conniff background: #494A4A;
d4d14f7a32ecfb7612287c3c3202a731a32d079eJeff Conniff /*border: 1px solid gray;*/
d4d14f7a32ecfb7612287c3c3202a731a32d079eJeff Conniff border-radius: 5px 5px 5px 5px;
d4d14f7a32ecfb7612287c3c3202a731a32d079eJeff Conniff color: #fff;
d4d14f7a32ecfb7612287c3c3202a731a32d079eJeff Conniff font-family: "Lucida Grande","Lucida Sans",Calibri,Helvetica,Arial,sans-serif;
d4d14f7a32ecfb7612287c3c3202a731a32d079eJeff Conniff font-size: 0.8em;
d4d14f7a32ecfb7612287c3c3202a731a32d079eJeff Conniff padding: 10px;
d4d14f7a32ecfb7612287c3c3202a731a32d079eJeff Conniffhtml .yui3-skin-night .yui3-calendar-day,
d4d14f7a32ecfb7612287c3c3202a731a32d079eJeff Conniffhtml .yui3-skin-night .yui3-calendar-prevmonth-day,
d4d14f7a32ecfb7612287c3c3202a731a32d079eJeff Conniffhtml .yui3-skin-night .yui3-calendar-nextmonth-day {
d4d14f7a32ecfb7612287c3c3202a731a32d079eJeff Conniff background: none repeat scroll 0 0 #585959;
d4d14f7a32ecfb7612287c3c3202a731a32d079eJeff Conniff border: 1px solid #414342;
d4d14f7a32ecfb7612287c3c3202a731a32d079eJeff Conniff text-align: center;
d4d14f7a32ecfb7612287c3c3202a731a32d079eJeff Conniffhtml .yui3-skin-night .yui3-calendar-weekdayrow{
d4d14f7a32ecfb7612287c3c3202a731a32d079eJeff Conniff color:#969696;
d4d14f7a32ecfb7612287c3c3202a731a32d079eJeff Conniffhtml .yui3-skin-night .yui3-calendar-day-selected {
d4d14f7a32ecfb7612287c3c3202a731a32d079eJeff Conniff background-color: #70A4EB;
d4d14f7a32ecfb7612287c3c3202a731a32d079eJeff Conniff color: #000000;
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <button id="sam" class="yui3-button yui3-button-selected">Sam</button>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <button id="night" class="yui3-button">Night</button>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <button id="rtl" class="yui3-button">RTL</button>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <button id="ltr" class="yui3-button yui3-button-selected">LTR</button>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <div class="yui3-widget-loading" id="demo-tabview">
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <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>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <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>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <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>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <div class="yui3-u"><div id="demo-datatable"></div></div>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <div class="yui3-panel yui3-widget" id="demo-panel">
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <div class="yui3-panel-content yui3-widget-stdmod">
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <div class="yui3-widget-hd">Add A New Product</div>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <input type="text" name="productId" id="productId">
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <button class="yui3-button">Remove All Items</button>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://developer.yahoo.com/">Developer Network</a></li>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Mail</a></li>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.zimbra.com">Zimbra</a></li>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://addressbook.yahoo.com">Address Book</a></li>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://calendar.yahoo.com">Calendar</a></li>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Notepad</a></li>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://messenger.yahoo.com">Messenger</a></li>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://profiles.yahoo.com">Profiles</a> </li>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com">Mobile</a></li>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mybloglog.yahoo.com/">MyBlogLog</a></li>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pride.yahoo.com/">Pride</a></li>
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/">Upcoming</a></li>
d79d8fca28a2d4563975b00455409069bc4968abJeff ConniffYUI({filter: 'raw'}).use('tabview', 'datatable-sort', 'calendar', 'panel', 'dial', 'node-menunav', 'node-event-delegate', 'slider', 'scrollview', 'scrollview-list', function(Y) {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff var buttonHandlers = {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff sam: function(e) {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff Y.one('body').replaceClass('yui3-skin-night', 'yui3-skin-sam');
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff night: function(e) {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff Y.one('body').replaceClass('yui3-skin-sam', 'yui3-skin-night');
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff rtl: function(e) {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff Y.one('body').setAttribute('dir', 'rtl');
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff ltr: function(e) {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff Y.one('body').setAttribute('dir', 'ltr');
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff function buttonGroupHandler(e) {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff handler = buttonHandlers[button.get('id')],
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff selectedClass = Y.ClassNameManager.getClassName('button', 'selected');
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff if (handler) {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff button.addClass(selectedClass);
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff button.siblings().removeClass(selectedClass);
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff srcNode: '#demo-tabview'
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff }).render();
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff // what if...
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff // Y.TabView('#demo-tabview');
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff // Y.one('#demo-tabview').plug('tabs');
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff srcNode: '#demo-datatable',
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff columnset: [
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff {key:"Company", label:"Column A", sortable:true},
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff {key:"Phone", label:"Column B", sortable:true},
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff {key:"Contact", label:"Column C", sortable:true}
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff recordset: [
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff {Company:"Company Bee", Phone:"415-555-1234", Contact:"Sally Spencer"},
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff {Company:"Acme Company", Phone:"650-555-4444", Contact:"John Jones"},
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff {Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff caption: "Example table with sortable columns"
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff }).plug(Y.Plugin.DataTableSort).render();
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff // what if...
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff // plug('sort').render();
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff render: "#demo-calendar"
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff render: "#demo-dial"
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff render: '#demo-yslider'
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff render: '#demo-xslider'
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff height: '150px',
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff contentBox: '#demo-scrollview'
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff }).plug(Y.Plugin.ScrollViewList).render();
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff // what if...
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff // Y.Calendar('#demo-calendar');
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff // Y.Dial('#demo-dial');
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff // Y.Dial('#demo-dial');
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff // new Y.Slider('#demo-yslider', {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff // axis: 'y',
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff Y.one('#demo-menunav').plug(Y.Plugin.NodeMenuNav);
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff // what if...
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff // Y.Menu('#demo-menu');
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff // handle button groups
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff Y.one('.button-group').delegate('click', buttonGroupHandler, 'button');
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff /* what if...
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff Y.RadioButtons('.button-group', {
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff '#sam': buttonHandlers['sam'],
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff '#night': buttonHandlers['night'],
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff '#ltr': buttonHandlers['ltr'],
d79d8fca28a2d4563975b00455409069bc4968abJeff Conniff '#rtl': buttonHandlers['rtl']