| 1 | <html> |
|---|
| 2 | <head> |
|---|
| 3 | <title>dojox.html.style Dynamic Style Sheets Test</title> |
|---|
| 4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|---|
| 5 | |
|---|
| 6 | <style type="text/css"> |
|---|
| 7 | @import "../../../dojo/resources/dojo.css"; |
|---|
| 8 | @import "../../../dijit/tests/css/dijitTests.css"; |
|---|
| 9 | </style> |
|---|
| 10 | <link id="themeStyles" title="tundra" rel="stylesheet" href="../../../dijit/themes/tundra/tundra.css"> |
|---|
| 11 | <link id="themeStyles" title="nihilo" rel="alternate stylesheet" href="../../../dijit/themes/nihilo/nihilo.css"> |
|---|
| 12 | <link id="themeStyles" title="soria" rel="alternate stylesheet" href="../../../dijit/themes/soria/soria.css"> |
|---|
| 13 | <link id="themeStyles" title="claro" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"> |
|---|
| 14 | |
|---|
| 15 | |
|---|
| 16 | <script type="text/javascript"> |
|---|
| 17 | var djConfig = { |
|---|
| 18 | isDebug: false, |
|---|
| 19 | parseOnLoad: true, |
|---|
| 20 | debugAtAllCosts:false |
|---|
| 21 | //popup:true, |
|---|
| 22 | //forceFirebugLite:true |
|---|
| 23 | }; |
|---|
| 24 | </script> |
|---|
| 25 | |
|---|
| 26 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, fontSizeWatch: true"></script> |
|---|
| 27 | |
|---|
| 28 | <script type="text/javascript"> |
|---|
| 29 | |
|---|
| 30 | dojo.require("dojox.html.styles"); |
|---|
| 31 | dojo.require("dijit.Menu"); |
|---|
| 32 | dojo.require("dijit.Calendar"); |
|---|
| 33 | dojo.require("dijit.form.Button"); |
|---|
| 34 | dojo.require("dijit.form.DropDownButton"); |
|---|
| 35 | dojo.require("dijit.form.ComboButton"); |
|---|
| 36 | dojo.require("dijit.form.ToggleButton"); |
|---|
| 37 | dojo.require("dijit.Calendar"); |
|---|
| 38 | changeStyle = function(title){ |
|---|
| 39 | dojox.html.activeStyleSheet(title); |
|---|
| 40 | } |
|---|
| 41 | |
|---|
| 42 | dojo.addOnLoad(function(){ |
|---|
| 43 | console.log(dojo.version.toString()); |
|---|
| 44 | var sheets = dojox.html.getToggledStyleSheets(); |
|---|
| 45 | |
|---|
| 46 | var holder = dojo.byId("sheetSwitches"); |
|---|
| 47 | dojo.forEach(sheets, function(s){ |
|---|
| 48 | holder.innerHTML += '<button onclick="changeStyle(\''+s.title+'\');">'+s.title+'</button>'; |
|---|
| 49 | }); |
|---|
| 50 | |
|---|
| 51 | }); |
|---|
| 52 | |
|---|
| 53 | </script> |
|---|
| 54 | <style> |
|---|
| 55 | #sheetSwitches{ |
|---|
| 56 | margin-bottom:15px; |
|---|
| 57 | } |
|---|
| 58 | |
|---|
| 59 | </style> |
|---|
| 60 | |
|---|
| 61 | |
|---|
| 62 | </head> |
|---|
| 63 | |
|---|
| 64 | <body class="tundra nihilo soria claro"> |
|---|
| 65 | <h1>dojox.html.style Dynamic Style Sheets</h1> |
|---|
| 66 | <p>The Theme buttons are dymanically generated based on the the link (or style) tag's title attribute. <em>rel="stylesheet"</em> is the preferred, enabled style sheet, and all style sheets with <em>rel="alternate stylesheet"</em> are disabled. Clicking the buttons toggles which style sheet is enabled. Any style sheet without a title attribute is persistent (always enabled). This is based on the W3C spec: http://www.w3.org/TR/html401/present/styles.html#h-14.3.2</p> |
|---|
| 67 | <div id="sheetSwitches"><strong>Switch me: </strong></div> |
|---|
| 68 | |
|---|
| 69 | <button dojoType="dijit.form.Button" iconClass="plusIcon" onClick='console.debug("clicked simple")'> |
|---|
| 70 | Simple |
|---|
| 71 | </button> |
|---|
| 72 | |
|---|
| 73 | <button dojoType="dijit.form.DropDownButton" iconClass="noteIcon"> |
|---|
| 74 | <span>Drop Down</span> |
|---|
| 75 | <div dojoType="dijit.Menu" id="editMenu1" style="display: none;"> |
|---|
| 76 | <div dojoType="dijit.MenuItem" |
|---|
| 77 | iconClass="dijitEditorIcon dijitEditorIconCut" |
|---|
| 78 | onClick="console.debug('not actually cutting anything, just a test!')"> |
|---|
| 79 | Cut |
|---|
| 80 | </div> |
|---|
| 81 | |
|---|
| 82 | <div dojoType="dijit.MenuItem" |
|---|
| 83 | iconClass="dijitEditorIcon dijitEditorIconCopy" |
|---|
| 84 | onClick="console.debug('not actually copying anything, just a test!')"> |
|---|
| 85 | Copy |
|---|
| 86 | </div> |
|---|
| 87 | |
|---|
| 88 | <div dojoType="dijit.MenuItem" |
|---|
| 89 | iconClass="dijitEditorIcon dijitEditorIconPaste" |
|---|
| 90 | onClick="console.debug('not actually pasting anything, just a test!')"> |
|---|
| 91 | Paste |
|---|
| 92 | </div> |
|---|
| 93 | </div> |
|---|
| 94 | </button> |
|---|
| 95 | |
|---|
| 96 | <button dojoType="dijit.form.ComboButton" iconClass="noteIcon" |
|---|
| 97 | optionsTitle='save options' |
|---|
| 98 | onClick='console.debug("clicked combo save")'> |
|---|
| 99 | <span>Combo</span> |
|---|
| 100 | <div dojoType="dijit.Menu" id="saveMenu1" style="display: none;"> |
|---|
| 101 | <div dojoType="dijit.MenuItem" |
|---|
| 102 | iconClass="dijitEditorIcon dijitEditorIconSave" |
|---|
| 103 | onClick="console.debug('not actually saving anything, just a test!')"> |
|---|
| 104 | Save |
|---|
| 105 | </div> |
|---|
| 106 | <div dojoType="dijit.MenuItem" |
|---|
| 107 | onClick="console.debug('not actually saving anything, just a test!')"> |
|---|
| 108 | Save As |
|---|
| 109 | </div> |
|---|
| 110 | </div> |
|---|
| 111 | </button> |
|---|
| 112 | |
|---|
| 113 | <button dojoType="dijit.form.ToggleButton" checked onChange="console.log('toggled button checked='+arguments[0]);" iconClass="dijitCheckBoxIcon"> |
|---|
| 114 | Toggle |
|---|
| 115 | </button> |
|---|
| 116 | |
|---|
| 117 | <div dojoType="dijit.Calendar"></div> |
|---|
| 118 | |
|---|
| 119 | <p> |
|---|
| 120 | This form of style switching is more effective than changing an attribute in the body tag. It makes coding CSS easier, because less emphasis is placed on targeting through the body tag class, and all CSS theme's could theoretically have the exact same selector names. |
|---|
| 121 | </p> |
|---|
| 122 | |
|---|
| 123 | </body> |
|---|
| 124 | </html> |
|---|
