skins.html revision 433c6e4d8b64100e84f0a4d37768706d5951994f
f79d43bbe70a01454049b77d6f15f6369744959eStéphane Graber<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano<html>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano<head>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <meta http-equiv="content-type" content="text/html; charset=utf-8">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <title>Widget Skins Test Page</title>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <script src="/build/yui/yui-min.js"></script>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <link type="text/css" rel="stylesheet" href="/build/cssreset/cssreset.css">
9afe19d634946d50eab30e3b90cb5cebcde39eeaDaniel Lezcano <link type="text/css" rel="stylesheet" href="/build/cssfonts/cssfonts.css">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <link type="text/css" rel="stylesheet" href="/build/cssgrids/cssgrids.css">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <link type="text/css" rel="stylesheet" href="/build/autocomplete-list/assets/skins/night/autocomplete-list.css">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <link type="text/css" rel="stylesheet" href="/build/slider-base/assets/skins/night/slider-base.css">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <link type="text/css" rel="stylesheet" href="/build/tabview/assets/skins/night/tabview.css">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <link type="text/css" rel="stylesheet" href="/build/datatable-base/assets/skins/night/datatable-base.css">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <link type="text/css" rel="stylesheet" href="/build/dial/assets/skins/night/dial.css">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <link type="text/css" rel="stylesheet" href="/build/scrollview-list/assets/skins/night/scrollview-list.css">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <link type="text/css" rel="stylesheet" href="/build/scrollview-scrollbars/assets/skins/night/scrollview-scrollbars.css">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <link type="text/css" rel="stylesheet" href="/build/panel/assets/skins/night/panel.css" charset="utf-8">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <link type="text/css" rel="stylesheet" href="/build/node-menunav/assets/skins/night/node-menunav.css" charset="utf-8">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <link type="text/css" rel="stylesheet" href="/build/cssbuttons/cssbuttons.css">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber <style>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano body {
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano margin: 0em;
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano }
7f95145833bb24f54e037f73ecc37444d6635697Dwight Engen
99e4008cad9e959b683c6f48411fcf15a92be3b5Michel Normand /* night button */
10fba81b9d0221b8e47aa1e0b43236413b7d28dfMichel Normand .yui3-skin-night .yui3-button {
99e4008cad9e959b683c6f48411fcf15a92be3b5Michel Normand background-color: #343536;
99e4008cad9e959b683c6f48411fcf15a92be3b5Michel Normand color: #DCDCDC; /* top edge highlight was 0.30 */
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano 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);
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano }
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano .yui3-skin-night .yui3-button-selected {
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano background-color: #747576;
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano }
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano /*end night button*/
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano /* sam button */
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano .yui3-skin-sam .yui3-button {
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano /* top edge highlight was 0.30 */
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano 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);
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano }
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano .yui3-skin-sam .yui3-button-selected {
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano background-color: #345FCB;
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano color: #fff;
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano 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);
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano }
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano /*end sam button*/
b4578c5b380130a41a69b5b49c970157acaf1dbbDwight Engen
b4578c5b380130a41a69b5b49c970157acaf1dbbDwight Engen .yui3-js-enabled .yui3-widget-loading {
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn display: none;
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn }
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn .yui3-panel form li {
84fbfcb434f5a59680b7f017bbc1d0db0b81a39dDwight Engen list-style: none;
84fbfcb434f5a59680b7f017bbc1d0db0b81a39dDwight Engen }
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano .yui3-panel label {
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano display: block;
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano margin-top: 1em;
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano }
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano .yui3-menu,
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn .yui3-widget {
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn margin: 15px;
f0f1d8c076ae93d8ecf735c2eeae471e27ca6abdDwight Engen }
f0f1d8c076ae93d8ecf735c2eeae471e27ca6abdDwight Engen
f0f1d8c076ae93d8ecf735c2eeae471e27ca6abdDwight Engen .yui3-tabview {
f0f1d8c076ae93d8ecf735c2eeae471e27ca6abdDwight Engen width: 300px;
f0f1d8c076ae93d8ecf735c2eeae471e27ca6abdDwight Engen }
936762f3fb6cf10e0756719f03aebe052d5c31a8Bogdan Purcareata
936762f3fb6cf10e0756719f03aebe052d5c31a8Bogdan Purcareata #buttons-dir,
936762f3fb6cf10e0756719f03aebe052d5c31a8Bogdan Purcareata #buttons-skin {
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano margin: 1em;
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn }
84fbfcb434f5a59680b7f017bbc1d0db0b81a39dDwight Engen
84fbfcb434f5a59680b7f017bbc1d0db0b81a39dDwight Engen .button-group {
84fbfcb434f5a59680b7f017bbc1d0db0b81a39dDwight Engen text-align: center;
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn }
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn .yui3-panel {
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn position: static !important;
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn }
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano /* workaround site CSS */
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn .yui3-datatable th,
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn .yui3-calendar th,
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn .yui3-calendar h4 {
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn background: transparent;
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn border: none;
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn color: inherit;
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn font-size: inherit;
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn }
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn/* ====================== temp. MAKE SURE TO DELETE THESE CALENDAR REMOMMENDATIONS BEFORE TESTING ==============================*/
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallynhtml .yui3-calendar-content{
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn font-size: 100% !important;
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn font-family: !inherit;
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn}
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallynhtml .yui3-skin-night .yui3-calendar-day,
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallynhtml .yui3-skin-night .yui3-calendar-prevmonth-day,
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallynhtml .yui3-skin-night .yui3-calendar-nextmonth-day {
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn padding: 0.3em !important;
84fbfcb434f5a59680b7f017bbc1d0db0b81a39dDwight Engen
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn}
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallynhtml .yui3-skin-night .yui3-calendar-content {
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn background: #494A4A;
84fbfcb434f5a59680b7f017bbc1d0db0b81a39dDwight Engen /*border: 1px solid gray;*/
84fbfcb434f5a59680b7f017bbc1d0db0b81a39dDwight Engen border-radius: 5px 5px 5px 5px;
84fbfcb434f5a59680b7f017bbc1d0db0b81a39dDwight Engen color: #fff;
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn /*font-family: "Lucida Grande","Lucida Sans",Calibri,Helvetica,Arial,sans-serif;*/
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn padding: 10px;
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn}
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallynhtml .yui3-skin-night .yui3-calendar-day,
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallynhtml .yui3-skin-night .yui3-calendar-prevmonth-day,
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallynhtml .yui3-skin-night .yui3-calendar-nextmonth-day {
84fbfcb434f5a59680b7f017bbc1d0db0b81a39dDwight Engen background: none repeat scroll 0 0 #585959;
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn border: 1px solid #414342;
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn text-align: center;
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn}
84fbfcb434f5a59680b7f017bbc1d0db0b81a39dDwight Engenhtml .yui3-skin-night .yui3-calendar-weekdayrow{
84fbfcb434f5a59680b7f017bbc1d0db0b81a39dDwight Engen color:#969696;
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn}
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallynhtml .yui3-skin-night .yui3-calendar-day-selected {
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn background-color: #70A4EB;
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn color: #000000;
8face1de22e8cf3bab2d6cdf33cdcc7476f9217bSerge Hallyn}
8face1de22e8cf3bab2d6cdf33cdcc7476f9217bSerge Hallyn/* ====================== end temp. MAKE SURE TO DELETE THESE CALENDAR REMOMMENDATIONS BEFORE TESTING ==============================*/
8face1de22e8cf3bab2d6cdf33cdcc7476f9217bSerge Hallyn
8face1de22e8cf3bab2d6cdf33cdcc7476f9217bSerge Hallyn
8face1de22e8cf3bab2d6cdf33cdcc7476f9217bSerge Hallyn </style>
8face1de22e8cf3bab2d6cdf33cdcc7476f9217bSerge Hallyn
8face1de22e8cf3bab2d6cdf33cdcc7476f9217bSerge Hallyn <body class="yui3-skin-sam">
8face1de22e8cf3bab2d6cdf33cdcc7476f9217bSerge Hallyn <div id="skin-demo">
8face1de22e8cf3bab2d6cdf33cdcc7476f9217bSerge Hallyn <div class="yui3-g button-group">
8face1de22e8cf3bab2d6cdf33cdcc7476f9217bSerge Hallyn <div id="buttons-skin" class="yui3-u">
8face1de22e8cf3bab2d6cdf33cdcc7476f9217bSerge Hallyn <button id="sam" class="yui3-button yui3-button-selected">Sam</button>
8face1de22e8cf3bab2d6cdf33cdcc7476f9217bSerge Hallyn <button id="night" class="yui3-button">Night</button>
8face1de22e8cf3bab2d6cdf33cdcc7476f9217bSerge Hallyn <button id="togglebkg" class="yui3-button">Toggle HTML Bkg Color</button>
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn </div>
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn <div id="buttons-dir" class="yui3-u">
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn <button id="rtl" class="yui3-button">RTL</button>
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn <button id="ltr" class="yui3-button yui3-button-selected">LTR</button>
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn </div>
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn </div>
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn <div class="yui3-u">
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn <div id="button-demo">
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn <div class="yui3-u">
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn <button class="yui3-button">Button</button>
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn <button class="yui3-button yui3-button-selected">Selected</button>
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn <button class="yui3-button yui3-button-disabled">Disabled</button>
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn </div>
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn </div>
25070b660187b61aa4e969db01b55d1360639543Serge Hallyn </div>
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn <div class="yui3-g">
3e625e2d2e12b919dd9590b97badc6108ee67b1aSerge Hallyn<!-- TabView -->
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <div class="yui3-u">
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <div class="yui3-widget-loading" id="demo-tabview">
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <ul>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <li>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <a href="#pork">Pork</a>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn </li>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <li>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <a href="#meatball">Meatball</a>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn </li>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <li>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <a href="#salami">Salami</a>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn </li>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn </ul>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <div>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <div id="pork">
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <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>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn </div>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <div id="meatball">
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <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>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn </div>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <div id="salami">
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <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>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn </div>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn </div>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn </div>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn </div>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <div class="yui3-u"><div id="demo-datatable"></div></div>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <div class="yui3-u">
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <div class="yui3-panel yui3-widget" id="demo-panel">
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <div class="yui3-panel-content yui3-widget-stdmod">
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <div class="yui3-widget-hd">Add A New Product</div>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <div class="yui3-widget-bd">
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <form>
13bc2fd2370f8e3778d81f58ac8dda5746550a4fSerge Hallyn <fieldset>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <ul>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <li>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <label for="productId">ID</label>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <input type="text" name="productId" id="productId">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano </li>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <li>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <label for="name">Name</label>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <input type="text" name="name" id="name">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano </li>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <!--<li>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <label for="price">Price</label>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <input type="text" name="price" id="price">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano </li>-->
f79d43bbe70a01454049b77d6f15f6369744959eStéphane Graber </ul>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano </fieldset>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano </form>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano </div>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <div class="yui3-widget-ft">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <button class="yui3-button">Cancel</button>
99e4008cad9e959b683c6f48411fcf15a92be3b5Michel Normand <button class="yui3-button">Add</button>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano </div>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano </div>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano </div>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano </div>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano<!-- for panel from JS
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <div class="yui3-u">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <div id="myPanelContent">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <div class="yui3-widget-hd">I'm from JS</div>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <div class="yui3-widget-bd">My buttons have no margin. Why?</div>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <div class="yui3-widget-ft"></div>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano </div>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano </div>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano-->
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <div class="yui3-u">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <div id="demo-calendar"></div>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano </div>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <div class="yui3-u">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <div id="demo-dial"></div>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano </div>
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <div class="yui3-u">
d823d5b966f49d975a09a8512d084389d6d7ffc7dlezcano <div id="demo-xslider"></div>
</div>
<div class="yui3-u">
<div id="demo-yslider"></div>
</div>
<div class="yui3-u">
<div id="demo-scrollview">
<ul>
<li>Sir DZL</li>
<li>Casual</li>
<li>A-Plus</li>
<li>Opio</li>
<li>Phesto</li>
<li>Tajai</li>
<li>Pep Love</li>
<li>Domino</li>
<li>Toure</li>
<li>Bukue One</li>
<li>Z-Man</li>
</ul>
</div>
</div>
<!-- menunav -->
<div class="yui3-u">
<div id="demo-menunav" class="yui3-menu">
<div class="yui3-menu-content">
<ul class="first-of-type">
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://developer.yahoo.com/">Developer Network</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li>
<li>
<a class="yui3-menu-label" href="#pim">Mail</a>
<div id="pim" class="yui3-menu">
<div class="yui3-menu-content">
<ul>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Mail</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Contact Lists</a></li>
</ul>
<ul>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://addressbook.yahoo.com">Address Book</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://calendar.yahoo.com">Calendar</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Notepad</a></li>
</ul>
<ul>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://messenger.yahoo.com">Messenger</a></li>
</ul>
</div>
</div>
</li>
<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://mobile.yahoo.com">Mobile</a></li>
</ul>
<ul>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://finance.yahoo.com/">Finance</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://shine.yahoo.com/">Shine</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://shopping.yahoo.com/">Shopping</a></li>
</ul>
</div>
</div>
</div>
<!-- MenuNav horiz -->
<div class="yui3-u">
<div id="demo-menunav-horiz" class="yui3-menu yui3-menu-horizontal">
<div class="yui3-menu-content">
<ul class="first-of-type">
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.yahoo.com/">Home</a></li>
<li>
<a class="yui3-menu-label" href="#connect">Connect</a>
<div id="connect" class="yui3-menu">
<div class="yui3-menu-content">
<ul>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://yahoo.com/">Yahoo!</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li>
<li>
<a class="yui3-menu-label" href="#pim">Mail</a>
<div id="pim" class="yui3-menu">
<div class="yui3-menu-content">
<ul>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Mail</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://calendar.yahoo.com">Calendar</a></li>
</ul>
<ul>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://addressbook.yahoo.com">Address Book</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://calendar.yahoo.com">What's New</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Notepad</a></li>
</ul>
<ul>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://messenger.yahoo.com">Messenger</a></li>
</ul>
</div>
</div>
</li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://movies.yahoo.com">Movies</a> </li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com">Mobile</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://travel.yahoo.com/">Travel</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://sports.yahoo.com/">Sports</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://finance.yahoo.com/">Finance</a></li>
</ul>
</div>
</div>
</li>
<li>
<a class="yui3-menu-label" href="#find-info">Find Info</a>
<div id="find-info" class="yui3-menu">
<div class="yui3-menu-content">
<ul>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://search.yahoo.com">Yahoo! Search</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://babelfish.yahoo.com/">Babel Fish Translations</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://info.yahoo.com/">Company Info</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://search.yahoo.com/cc">Creative Commons Search</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://dir.yahoo.com/">Directory</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://hotjobs.yahoo.com/">Jobs</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://local.yahoo.com">Local</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://maps.yahoo.com/">Maps</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://realestate.yahoo.com">Real Estate</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://education.yahoo.com/reference/">Reference</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- end menu nav horizontal-->
<!-- MenuNav horiz split button-->
<div class="yui3-u">
<div id="menu-1" class="yui3-menu yui3-menu-horizontal yui3-splitbuttonnav"><!-- Bounding box -->
<div class="yui3-menu-content"><!-- Content box -->
<ul>
<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']
});
*/
/*panel from JS
var panel = new Y.Panel({
srcNode : '#myPanelContent',
width : 200,
centered: true,
render : true,
// Make changes to the buttons through the `buttons` attribute,
// which takes an Array of Objects.
buttons: [
{
// Each object has a `value` property,
// which can be text or an HTML string.
value: "Okay",
// The `section` property tells where to render the button and
// should be `Y.WidgetStdMod.HEADER` or `Y.WidgetStdMod.FOOTER`.
section: Y.WidgetStdMod.FOOTER
},
{
value: "Nope",
section: Y.WidgetStdMod.FOOTER
}
]
});
*/
});
</script>
</body>
</html>