skins.html revision 433c6e4d8b64100e84f0a4d37768706d5951994f
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">
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff <link type="text/css" rel="stylesheet" href="/build/autocomplete-list/assets/skins/night/autocomplete-list.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">
6797a96aa17cfbc2eb9b3f90f564a29c01519324Satyen Desai <link type="text/css" rel="stylesheet" href="/build/scrollview-scrollbars/assets/skins/night/scrollview-scrollbars.css">
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <link type="text/css" rel="stylesheet" href="/build/panel/assets/skins/night/panel.css" charset="utf-8">
d3b7b73e5ca50ba0821b439d4f9a12cfaaf38870Jeff Conniff <link type="text/css" rel="stylesheet" href="/build/node-menunav/assets/skins/night/node-menunav.css" charset="utf-8">
6340fd3eeb615e0720d218535598b6627a3d4c71Jeff Conniff <link type="text/css" rel="stylesheet" href="/build/cssbuttons/cssbuttons.css">
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff margin: 0em;
6340fd3eeb615e0720d218535598b6627a3d4c71Jeff Conniff /* night button */
6340fd3eeb615e0720d218535598b6627a3d4c71Jeff Conniff .yui3-skin-night .yui3-button {
6340fd3eeb615e0720d218535598b6627a3d4c71Jeff Conniff background-color: #343536;
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff color: #DCDCDC; /* top edge highlight was 0.30 */
6340fd3eeb615e0720d218535598b6627a3d4c71Jeff Conniff box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 2px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.15);
6340fd3eeb615e0720d218535598b6627a3d4c71Jeff Conniff .yui3-skin-night .yui3-button-selected {
6340fd3eeb615e0720d218535598b6627a3d4c71Jeff Conniff background-color: #747576;
6340fd3eeb615e0720d218535598b6627a3d4c71Jeff Conniff text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
6340fd3eeb615e0720d218535598b6627a3d4c71Jeff Conniff /*end night button*/
6340fd3eeb615e0720d218535598b6627a3d4c71Jeff Conniff /* sam button */
6340fd3eeb615e0720d218535598b6627a3d4c71Jeff Conniff .yui3-skin-sam .yui3-button {
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff /* top edge highlight was 0.30 */
6340fd3eeb615e0720d218535598b6627a3d4c71Jeff Conniff box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 2px 0 rgba(255, 255, 255, 0.5) inset, 0 1px 2px rgba(0, 0, 0, 0.15);
6340fd3eeb615e0720d218535598b6627a3d4c71Jeff Conniff .yui3-skin-sam .yui3-button-selected {
6340fd3eeb615e0720d218535598b6627a3d4c71Jeff Conniff background-color: #345FCB;
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff color: #fff;
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
6340fd3eeb615e0720d218535598b6627a3d4c71Jeff Conniff box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 2px 0 rgba(255, 255, 255, 0.17) inset, 0 1px 2px rgba(0, 0, 0, 0.15);
6340fd3eeb615e0720d218535598b6627a3d4c71Jeff Conniff /*end sam button*/
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 {
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff width: 300px;
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney #buttons-dir,
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney #buttons-skin {
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff margin: 1em;
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;
719d5bf86fc9cfc087ec8bf8cc7e1ad78bbf9ccfJeff Conniff/* ====================== temp. MAKE SURE TO DELETE THESE CALENDAR REMOMMENDATIONS BEFORE TESTING ==============================*/
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniffhtml .yui3-calendar-content{
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff font-size: 100% !important;
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff font-family: !inherit;
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniffhtml .yui3-skin-night .yui3-calendar-day,
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniffhtml .yui3-skin-night .yui3-calendar-prevmonth-day,
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniffhtml .yui3-skin-night .yui3-calendar-nextmonth-day {
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff padding: 0.3em !important;
719d5bf86fc9cfc087ec8bf8cc7e1ad78bbf9ccfJeff Conniffhtml .yui3-skin-night .yui3-calendar-content {
719d5bf86fc9cfc087ec8bf8cc7e1ad78bbf9ccfJeff Conniff background: #494A4A;
719d5bf86fc9cfc087ec8bf8cc7e1ad78bbf9ccfJeff Conniff /*border: 1px solid gray;*/
719d5bf86fc9cfc087ec8bf8cc7e1ad78bbf9ccfJeff Conniff border-radius: 5px 5px 5px 5px;
719d5bf86fc9cfc087ec8bf8cc7e1ad78bbf9ccfJeff Conniff color: #fff;
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff /*font-family: "Lucida Grande","Lucida Sans",Calibri,Helvetica,Arial,sans-serif;*/
719d5bf86fc9cfc087ec8bf8cc7e1ad78bbf9ccfJeff Conniff padding: 10px;
719d5bf86fc9cfc087ec8bf8cc7e1ad78bbf9ccfJeff Conniffhtml .yui3-skin-night .yui3-calendar-day,
719d5bf86fc9cfc087ec8bf8cc7e1ad78bbf9ccfJeff Conniffhtml .yui3-skin-night .yui3-calendar-prevmonth-day,
719d5bf86fc9cfc087ec8bf8cc7e1ad78bbf9ccfJeff Conniffhtml .yui3-skin-night .yui3-calendar-nextmonth-day {
719d5bf86fc9cfc087ec8bf8cc7e1ad78bbf9ccfJeff Conniff background: none repeat scroll 0 0 #585959;
719d5bf86fc9cfc087ec8bf8cc7e1ad78bbf9ccfJeff Conniff border: 1px solid #414342;
719d5bf86fc9cfc087ec8bf8cc7e1ad78bbf9ccfJeff Conniff text-align: center;
719d5bf86fc9cfc087ec8bf8cc7e1ad78bbf9ccfJeff Conniffhtml .yui3-skin-night .yui3-calendar-weekdayrow{
719d5bf86fc9cfc087ec8bf8cc7e1ad78bbf9ccfJeff Conniff color:#969696;
719d5bf86fc9cfc087ec8bf8cc7e1ad78bbf9ccfJeff Conniffhtml .yui3-skin-night .yui3-calendar-day-selected {
719d5bf86fc9cfc087ec8bf8cc7e1ad78bbf9ccfJeff Conniff background-color: #70A4EB;
719d5bf86fc9cfc087ec8bf8cc7e1ad78bbf9ccfJeff Conniff color: #000000;
719d5bf86fc9cfc087ec8bf8cc7e1ad78bbf9ccfJeff Conniff/* ====================== end temp. MAKE SURE TO DELETE THESE CALENDAR REMOMMENDATIONS BEFORE TESTING ==============================*/
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <button id="sam" class="yui3-button yui3-button-selected">Sam</button>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <button id="night" class="yui3-button">Night</button>
d40e32ef6c95cddf35e9cc056dfdd259ba314fa2Jeff Conniff <button id="togglebkg" class="yui3-button">Toggle HTML Bkg Color</button>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <button id="rtl" class="yui3-button">RTL</button>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <button id="ltr" class="yui3-button yui3-button-selected">LTR</button>
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff <button class="yui3-button yui3-button-selected">Selected</button>
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff <button class="yui3-button yui3-button-disabled">Disabled</button>
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff<!-- TabView -->
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <div class="yui3-widget-loading" id="demo-tabview">
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff 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.</p>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff 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.</p>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff 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.</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 <label for="price">Price</label>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <input type="text" name="price" id="price">
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff<!-- for panel from JS
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff <div class="yui3-u">
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff <div id="myPanelContent">
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff <div class="yui3-widget-hd">I'm from JS</div>
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff <div class="yui3-widget-bd">My buttons have no margin. Why?</div>
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff <div class="yui3-widget-ft"></div>
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff<!-- menunav -->
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>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <a class="yui3-menu-label" href="#pim">Mail</a>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Mail</a></li>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Contact Lists</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>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://news.yahoo.com">News</a> </li>
57944bee374767ef401f984a0136afb3822f22f7Matt Sweeney <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com">Mobile</a></li>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://finance.yahoo.com/">Finance</a></li>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://shine.yahoo.com/">Shine</a></li>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://shopping.yahoo.com/">Shopping</a></li>
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff<!-- MenuNav horiz -->
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff <div id="demo-menunav-horiz" class="yui3-menu yui3-menu-horizontal">
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.yahoo.com/">Home</a></li>
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff <a class="yui3-menu-label" href="#connect">Connect</a>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://yahoo.com/">Yahoo!</a></li>
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li>
719d5bf86fc9cfc087ec8bf8cc7e1ad78bbf9ccfJeff Conniff <a class="yui3-menu-label" href="#pim">Mail</a>
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Mail</a></li>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://calendar.yahoo.com">Calendar</a></li>
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://addressbook.yahoo.com">Address Book</a></li>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://calendar.yahoo.com">What's New</a></li>
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Notepad</a></li>
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://messenger.yahoo.com">Messenger</a></li>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://movies.yahoo.com">Movies</a> </li>
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com">Mobile</a></li>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://travel.yahoo.com/">Travel</a></li>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://sports.yahoo.com/">Sports</a></li>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://finance.yahoo.com/">Finance</a></li>
d3b7b73e5ca50ba0821b439d4f9a12cfaaf38870Jeff Conniff <a class="yui3-menu-label" href="#find-info">Find Info</a>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://search.yahoo.com">Yahoo! Search</a></li>
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://babelfish.yahoo.com/">Babel Fish Translations</a></li>
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://info.yahoo.com/">Company Info</a></li>
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://search.yahoo.com/cc">Creative Commons Search</a></li>
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://dir.yahoo.com/">Directory</a></li>
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://hotjobs.yahoo.com/">Jobs</a></li>
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://local.yahoo.com">Local</a></li>
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://maps.yahoo.com/">Maps</a></li>
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://realestate.yahoo.com">Real Estate</a></li>
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://education.yahoo.com/reference/">Reference</a></li>
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff<!-- end menu nav horizontal-->
d3b7b73e5ca50ba0821b439d4f9a12cfaaf38870Jeff Conniff<!-- MenuNav horiz split button-->
d3b7b73e5ca50ba0821b439d4f9a12cfaaf38870Jeff Conniff <div id="menu-1" class="yui3-menu yui3-menu-horizontal yui3-splitbuttonnav"><!-- Bounding box -->
d3b7b73e5ca50ba0821b439d4f9a12cfaaf38870Jeff Conniff <div class="yui3-menu-content"><!-- Content box -->
d3b7b73e5ca50ba0821b439d4f9a12cfaaf38870Jeff Conniff <span class="yui3-menu-label"><!-- menu label root node -->
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <a href="http://travel.yahoo.com">Travel</a><!-- menu label default action -->
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <a href="#travel-options" class="yui3-menu-toggle">Travel Options</a><!-- menu label submenu toggle -->
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://travel.yahoo.com/beach;_ylt=AtWGJZLM73jp52fJNMJcOwGhpYMA">Beach</a></li>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://travel.yahoo.com/honeymoon;_ylt=ArJByEt5iYogEYMdhsWy_sWhpYMA">Honeymoon</a></li>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://travel.yahoo.com/national-parks;_ylt=Aisxea9BMnUZdmrYv.sOYk2hpYMA">National Parks</a></li>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://travel.yahoo.com/family;_ylt=Aiz4pI2rCCo6cy7G0XqfdPehpYMA">Family</a></li>
d3b7b73e5ca50ba0821b439d4f9a12cfaaf38870Jeff Conniff <span class="yui3-menu-label"><!-- menu label root node -->
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <a href="http://news.yahoo.com">News</a><!-- menu label default action -->
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <a href="#news-options" class="yui3-menu-toggle">News Options</a><!-- menu label submenu toggle -->
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://news.yahoo.com/">News</a></li>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://news.yahoo.com/world">World</a></li>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://news.yahoo.com/tech">Tech</a></li>
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://news.yahoo.com/sports">Sports</a></li>
d3b7b73e5ca50ba0821b439d4f9a12cfaaf38870Jeff Conniff<!-- end menu nav horizontal split button-->
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff<!-- Autocomplete -->
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff <label for="ac-input">Enter the name of a US state:</label><br>
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff ConniffYUI({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) {
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');
d40e32ef6c95cddf35e9cc056dfdd259ba314fa2Jeff Conniff togglebkg: function(e) {
d40e32ef6c95cddf35e9cc056dfdd259ba314fa2Jeff Conniff if(Y.one('html').getStyle('backgroundColor') === "rgb(255, 255, 255)"){
d40e32ef6c95cddf35e9cc056dfdd259ba314fa2Jeff Conniff Y.one('html').setStyle('backgroundColor', "rgb(0, 0, 0)");
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff //Y.one('html').setStyle('color', "rgb(255, 255, 255)");
d40e32ef6c95cddf35e9cc056dfdd259ba314fa2Jeff Conniff Y.one('html').setStyle('backgroundColor', "rgb(255, 255, 255)");
07ad9ab2be0e01d9fe09926c37a65a867aa6f401Jeff Conniff // Y.one('html').setStyle('color', "rgb(0, 0, 0)"); the default
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);
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff/////////// autocomplete
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff var states = [
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff 'California',
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff 'Connecticut',
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff 'Louisiana',
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff 'Massachusetts',
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff 'Minnesota',
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff 'Mississippi',
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff 'New Hampshire',
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff 'New Jersey',
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff 'New Mexico',
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff 'North Dakota',
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff 'North Carolina',
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff 'Pennsylvania',
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff 'Rhode Island',
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff 'South Carolina',
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff 'South Dakota',
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff 'Tennessee',
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff 'Washington',
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff 'West Virginia',
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff 'Wisconsin',
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff resultFilters : 'phraseMatch',
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff resultHighlighter: 'phraseMatch',
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff source : states
d6ac1282b7aebe50016ff2242315c34ac60422c8Jeff Conniff/////////// end autocomplete
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);
b4f14fb8425b05925652295a6e65a98b2448f70fJeff Conniff Y.one('#demo-menunav-horiz').plug(Y.Plugin.NodeMenuNav);
d3b7b73e5ca50ba0821b439d4f9a12cfaaf38870Jeff Conniff var menu = Y.one("#menu-1");
d3b7b73e5ca50ba0821b439d4f9a12cfaaf38870Jeff Conniff menu.plug(Y.Plugin.NodeMenuNav, { autoSubmenuDisplay: false, mouseOutHideDelay: 0 });
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']
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff /*panel from JS
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff var panel = new Y.Panel({
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff srcNode : '#myPanelContent',
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff width : 200,
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff centered: true,
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff render : true,
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff // Make changes to the buttons through the `buttons` attribute,
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff // which takes an Array of Objects.
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff // Each object has a `value` property,
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff // which can be text or an HTML string.
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff value: "Okay",
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff // The `section` property tells where to render the button and
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff // should be `Y.WidgetStdMod.HEADER` or `Y.WidgetStdMod.FOOTER`.
433c6e4d8b64100e84f0a4d37768706d5951994fJeff Conniff value: "Nope",