skins_tutorial_test.html revision d6ac1282b7aebe50016ff2242315c34ac60422c8
38c817b94e0a5b1ae94178b1075c187e07bcc5e1Christian Maeder<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2cff1f0e5a572a33bc692c96ce2a1590f160eed7cmaeder <meta http-equiv="content-type" content="text/html; charset=utf-8">
b53688bfed888214b485cf76439d57262d80e0a7Christian Maeder <script src="/build/yui/yui-min.js"></script>
34bff097c14521b5e57ce37279a34256e1f78aa5Klaus Luettich <link type="text/css" rel="stylesheet" href="/build/cssreset/cssreset.css">
b53688bfed888214b485cf76439d57262d80e0a7Christian Maeder <link type="text/css" rel="stylesheet" href="/build/cssfonts/cssfonts.css">
2cff1f0e5a572a33bc692c96ce2a1590f160eed7cmaeder <link type="text/css" rel="stylesheet" href="/build/cssgrids/cssgrids.css">
46c318705d1532d90572abf9ee869016583d985bTill Mossakowski <link type="text/css" rel="stylesheet" href="/build/slider-base/assets/skins/night/slider-base.css">
4c8d3c5a9e938633f6147b5a595b9b93bfca99e6Christian Maeder <link type="text/css" rel="stylesheet" href="/build/tabview/assets/skins/night/tabview.css">
b53688bfed888214b485cf76439d57262d80e0a7Christian Maeder <link type="text/css" rel="stylesheet" href="/build/datatable-base/assets/skins/night/datatable-base.css">
b53688bfed888214b485cf76439d57262d80e0a7Christian Maeder <link type="text/css" rel="stylesheet" href="/build/dial/assets/skins/night/dial.css">
66771c3723200a54eceaf0d82de861ca4b917b05Christian Maeder <link type="text/css" rel="stylesheet" href="/build/scrollview-list/assets/skins/night/scrollview-list.css">
66771c3723200a54eceaf0d82de861ca4b917b05Christian Maeder <link type="text/css" rel="stylesheet" href="/build/scrollview-scrollbars/assets/skins/night/scrollview-scrollbars.css">
66771c3723200a54eceaf0d82de861ca4b917b05Christian Maeder <link type="text/css" rel="stylesheet" href="/build/panel/assets/skins/night/panel.css" charset="utf-8">
66771c3723200a54eceaf0d82de861ca4b917b05Christian Maeder <link type="text/css" rel="stylesheet" href="/build/node-menunav/assets/skins/night/node-menunav.css" charset="utf-8">
66771c3723200a54eceaf0d82de861ca4b917b05Christian Maeder <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">
ea2dff2ba7790f5c9f8f5454181f86f45d2674d2Christian Maeder <link type="text/css" rel="stylesheet" href="http://derek.io/~/fixedbutton.css" charset="utf-8">
66771c3723200a54eceaf0d82de861ca4b917b05Christian Maeder .yui3-js-enabled .yui3-widget-loading {
b53688bfed888214b485cf76439d57262d80e0a7Christian Maeder display: none;
254df6f22d01eacf7c57b85729e0445747b630d9Christian Maeder .yui3-panel form li {
bbcb456803d40f9b48dd43b1c84bdf8932d2672bChristian Maeder list-style: none;
4c8d3c5a9e938633f6147b5a595b9b93bfca99e6Christian Maeder .yui3-panel label {
b0b5ce95f738d35e520c20d1b0bd253f152a677fChristian Maeder display: block;
ef9e8535c168d3f774d9e74368a2317a9eda5826Christian Maeder margin-top: 1em;
b53688bfed888214b485cf76439d57262d80e0a7Christian Maeder .yui3-widget {
ffd2214759f0055aa5dfa95583a6060516ad766fChristian Maeder margin: 15px;
91eeff7b19b22d7e5c5d83fa6e357496e291c718Christian Maeder .yui3-tabview {
91a356d176c7e9b4eef6e8734559bfb858d5e630Christian Maeder width: 400px;
b53688bfed888214b485cf76439d57262d80e0a7Christian Maeder #buttons-dir,
897a04683fb30873e84dc3360dea770a4435971cChristian Maeder #buttons-skin {
be43c3fa0292555bd126784ae27ff5c1d23438cbChristian Maeder margin: 0 2em;
be43c3fa0292555bd126784ae27ff5c1d23438cbChristian Maeder .button-group {
91eeff7b19b22d7e5c5d83fa6e357496e291c718Christian Maeder text-align: center;
649fdc0d0502d62d160c150684356fef2c273484Eugen Kuksa .yui3-panel {
bcd35fcdda4233c42766519772b2e9fbab57f975Christian Maeder position: static !important;
3753288339ad80053053d92409bd37b335a96197Christian Maeder /* workaround site CSS */
3753288339ad80053053d92409bd37b335a96197Christian Maeder .yui3-datatable th,
897a04683fb30873e84dc3360dea770a4435971cChristian Maeder .yui3-calendar th,
3753288339ad80053053d92409bd37b335a96197Christian Maeder .yui3-calendar h4 {
897a04683fb30873e84dc3360dea770a4435971cChristian Maeder background: transparent;
897a04683fb30873e84dc3360dea770a4435971cChristian Maeder border: none;
3753288339ad80053053d92409bd37b335a96197Christian Maeder color: inherit;
897a04683fb30873e84dc3360dea770a4435971cChristian Maeder font-size: inherit;
897a04683fb30873e84dc3360dea770a4435971cChristian Maeder <button id="sam" class="yui3-button yui3-button-selected">Sam</button>
9a7f7c6399a1014e51abc7049a5fbd265461e1a7Christian Maeder <button id="night" class="yui3-button">Night</button>
9a7f7c6399a1014e51abc7049a5fbd265461e1a7Christian Maeder <button id="togglebkg" class="yui3-button">Toggle HTML Bkg Color</button>
dab742f3b90c81f4a926ef2cdb096d358fb72c12Christian Maeder <button id="rtl" class="yui3-button">RTL</button>
c3d02da98e2806333eacf170309abff7a1377e14notanartist <button id="ltr" class="yui3-button yui3-button-selected">LTR</button>
9a7f7c6399a1014e51abc7049a5fbd265461e1a7Christian Maeder <div class="yui3-widget-loading" id="demo-tabview">
254df6f22d01eacf7c57b85729e0445747b630d9Christian Maeder <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>
60e6795dd310e10194e12bb660575aadf941328bEugen Kuksa <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>
38c817b94e0a5b1ae94178b1075c187e07bcc5e1Christian Maeder <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>
254df6f22d01eacf7c57b85729e0445747b630d9Christian Maeder <div class="yui3-u"><div id="demo-datatable"></div></div>
254df6f22d01eacf7c57b85729e0445747b630d9Christian Maeder <div class="yui3-panel yui3-widget" id="demo-panel">
b53688bfed888214b485cf76439d57262d80e0a7Christian Maeder <div class="yui3-panel-content yui3-widget-stdmod">
2a9702a373738717c83824512bd9389b5870fc92Christian Maeder <div class="yui3-widget-hd">Add A New Product</div>
a081d56252673c9e4a017e6282f59766f0cbcd42Christian Maeder <input type="text" name="productId" id="productId">
7968d3a131e5a684ec1ff0c6d88aae638549153dChristian Maeder <input type="text" name="price" id="price">
f997c50e79d277ae8d7d3bc536a276d67b75f953Simon Ulbricht <button class="yui3-button">Add Item</button>
be43c3fa0292555bd126784ae27ff5c1d23438cbChristian Maeder <button class="yui3-button">Remove All Items</button>
0130083f314580170af1195037be3325f125fbceChristian Maeder<!-- menunav -->
649fdc0d0502d62d160c150684356fef2c273484Eugen Kuksa <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://developer.yahoo.com/">Developer Network</a></li>
7bb0a9e92bc7a6f868eaa0b9c3212c0af4f96b7fEugen Kuksa <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li>
23b1f89c05c67d7778e2736bd24fdec33212f323cmaeder <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Mail</a></li>
0130083f314580170af1195037be3325f125fbceChristian Maeder <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.zimbra.com">Zimbra</a></li>
0130083f314580170af1195037be3325f125fbceChristian Maeder <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://addressbook.yahoo.com">Address Book</a></li>
0130083f314580170af1195037be3325f125fbceChristian Maeder <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://calendar.yahoo.com">Calendar</a></li>
c4b508b43eb5e3a92e464b5f85b5a2b5ecd7d3c3cmaeder <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Notepad</a></li>
649fdc0d0502d62d160c150684356fef2c273484Eugen Kuksa <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://messenger.yahoo.com">Messenger</a></li>
2cff1f0e5a572a33bc692c96ce2a1590f160eed7cmaeder <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://profiles.yahoo.com">Profiles</a> </li>
2cff1f0e5a572a33bc692c96ce2a1590f160eed7cmaeder <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com">Mobile</a></li>
2cff1f0e5a572a33bc692c96ce2a1590f160eed7cmaeder <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mybloglog.yahoo.com/">MyBlogLog</a></li>
fb9ec1e4dd1877781ec2b491fb0a6bcd38a7b04dcmaeder <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pride.yahoo.com/">Pride</a></li>
2ccdb81b4018e0a76f6dad3a940ba1241e98f6d9cmaeder <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/">Upcoming</a></li>
91eeff7b19b22d7e5c5d83fa6e357496e291c718Christian Maeder<!-- MenuNav horiz -->
91eeff7b19b22d7e5c5d83fa6e357496e291c718Christian Maeder <div id="demo-menunav-horiz" class="yui3-menu yui3-menu-horizontal">
2ccdb81b4018e0a76f6dad3a940ba1241e98f6d9cmaeder <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.yahoo.com/">Home</a></li>
2ccdb81b4018e0a76f6dad3a940ba1241e98f6d9cmaeder <a class="yui3-menu-label" href="#connect">Connect</a>
ea2dff2ba7790f5c9f8f5454181f86f45d2674d2Christian Maeder <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://developer.yahoo.com/">Developer Network</a></li>
1c4dfa148603d4fcf4cdd2ed66c8b6e1de0dd696Till Mossakowski <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li>
ea2dff2ba7790f5c9f8f5454181f86f45d2674d2Christian Maeder <a class="yui3-menu-label" href="#pim">PIM</a>
f448ac6b7846addfe6041275edf1fb90962e76eacmaeder <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Mail</a></li>
f448ac6b7846addfe6041275edf1fb90962e76eacmaeder <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.zimbra.com">Zimbra</a></li>
f448ac6b7846addfe6041275edf1fb90962e76eacmaeder <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://addressbook.yahoo.com">Address Book</a></li>
f448ac6b7846addfe6041275edf1fb90962e76eacmaeder <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>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://messenger.yahoo.com">Messenger</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://profiles.yahoo.com">Profiles</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://mybloglog.yahoo.com/">MyBlogLog</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pride.yahoo.com/">Pride</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/">Upcoming</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com">Answers</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>
<a href="#answers-options" class="yui3-menu-toggle">Answers Options</a><!-- menu label submenu toggle -->
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com/dir/">Answer</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answersonthestreet.yahoo.com/">Answers on the Street</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com/question/;_ylt=Av3Nt22Mr7YNs651NWFv8YUPzKIX;_ylv=3?link=ask">Ask</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com/dir/;_ylt=Aqp_jJlsYDP7urcq2WGC6HBJxQt.;_ylv=3?link=over&amp;more=y">Discover</a></li>
<a href="#answers-options" class="yui3-menu-toggle">Answers Options</a><!-- menu label submenu toggle -->
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com/dir/">Answer</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answersonthestreet.yahoo.com/">Answers on the Street</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com/question/;_ylt=Av3Nt22Mr7YNs651NWFv8YUPzKIX;_ylv=3?link=ask">Ask</a></li>
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com/dir/;_ylt=Aqp_jJlsYDP7urcq2WGC6HBJxQt.;_ylv=3?link=over&amp;more=y">Discover</a></li>
YUI({filter: 'raw'}).use('tabview', 'datatable-sort', 'calendar', 'panel', 'dial', 'node-menunav', 'node-event-delegate', 'slider', 'scrollview', 'scrollview-list', function(Y) {
Y.one('body').replaceClass('yui3-skin-night', 'yui3-skin-sam');
Y.one('body').replaceClass('yui3-skin-sam', 'yui3-skin-night');
if(Y.one('html').getStyle('backgroundColor') === "rgb(255, 255, 255)"){
Y.one('html').setStyle('backgroundColor', "rgb(0, 0, 0)");
Y.one('html').setStyle('backgroundColor', "rgb(255, 255, 255)");
Y.one('body').setAttribute('dir', 'rtl');
Y.one('body').setAttribute('dir', 'ltr');
var button = e.currentTarget,
handler = buttonHandlers[button.get('id')],
selectedClass = Y.ClassNameManager.getClassName('button', 'selected');
button.addClass(selectedClass);
button.siblings().removeClass(selectedClass);
handler.call(this, e);
new Y.TabView({
// Y.TabView('#demo-tabview');
// Y.one('#demo-tabview').plug('tabs');
new Y.DataTable.Base({
}).plug(Y.Plugin.DataTableSort).render();
new Y.Calendar({
new Y.Dial({
new Y.Slider({
new Y.Slider({
new Y.ScrollView({
plugins:[Y.Plugin.ScrollViewList],
// Y.Calendar('#demo-calendar');
// Y.Dial('#demo-dial');
// Y.Dial('#demo-dial');
// new Y.Slider('#demo-yslider', {
var menu = Y.one("#menu-1");
// Y.Menu('#demo-menu');
Y.one('.button-group').delegate('click', buttonGroupHandler, 'button');
Y.RadioButtons('.button-group', {