+++ /dev/null
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"\r
- "http://www.w3.org/TR/html4/strict.dtd">\r
-<html>\r
- <head>\r
- <title>Dojo Button Widget Test</title>\r
-\r
- <style type="text/css">\r
- @import "../../../dojo/resources/dojo.css";\r
- @import "../css/dijitTests.css";\r
-\r
- /* group multiple buttons in a row */\r
- .box {\r
- display: block;\r
- text-align: center;\r
- }\r
- .box .dijit {\r
- margin-right: 10px;\r
- }\r
- </style>\r
-\r
- <script type="text/javascript" src="../../../dojo/dojo.js"\r
- djConfig="isDebug: true, parseOnLoad: true"></script>\r
- <script type="text/javascript" src="../_testCommon.js"></script>\r
-\r
- <script type="text/javascript">\r
- dojo.require("dijit.ColorPalette");\r
- dojo.require("dijit.Menu");\r
- dojo.require("dijit.Tooltip");\r
- dojo.require("dijit.form.Button");\r
- dojo.require("dojo.parser");\r
- </script>\r
- </head>\r
-<body>\r
- <h1 class="testTitle">Dijit Button Test</h1>\r
- <h2>Simple, drop down & combo buttons</h2>\r
- <p>\r
- Buttons can do an action, display a menu, or both:\r
- </p>\r
- <div class="box">\r
- <button id="1465" dojoType="dijit.form.Button" onClick='console.log("clicked simple")' iconClass="plusIcon">\r
- Create\r
- </button>\r
- <span dojoType="dijit.Tooltip" connectId="1465">tooltip on button</span>\r
- <div dojoType="dijit.form.DropDownButton" iconClass="noteIcon">\r
- <span>Edit<b>!</b></span>\r
- <div dojoType="dijit.Menu">\r
- <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut"\r
- onClick="console.log('not actually cutting anything, just a test!')">Cut</div>\r
- <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy"\r
- onClick="console.log('not actually copying anything, just a test!')">Copy</div>\r
- <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste"\r
- onClick="console.log('not actually pasting anything, just a test!')">Paste</div>\r
- <div dojoType="dijit.MenuSeparator"></div>\r
- <div dojoType="dijit.PopupMenuItem">\r
- <span>Submenu</span>\r
- <div dojoType="dijit.Menu" id="submenu2">\r
- <div dojoType="dijit.MenuItem" onClick="console.log('Submenu 1!')">Submenu Item One</div>\r
- <div dojoType="dijit.MenuItem" onClick="console.log('Submenu 2!')">Submenu Item Two</div>\r
- <div dojoType="dijit.PopupMenuItem">\r
- <span>Deeper Submenu</span>\r
- <div dojoType="dijit.Menu" id="submenu4">\r
- <div dojoType="dijit.MenuItem" onClick="console.log('Sub-submenu 1!')">Sub-sub-menu Item One</div>\r
- <div dojoType="dijit.MenuItem" onClick="console.log('Sub-submenu 2!')">Sub-sub-menu Item Two</div>\r
- </div>\r
- </div>\r
- </div>\r
- </div>\r
- </div>\r
- </div>\r
- <div dojoType="dijit.form.DropDownButton" iconClass="noteIcon">\r
- <span>Color</span>\r
- <div dojoType="dijit.ColorPalette" id="colorPalette" style="display: none" palette="3x4"\r
- onChange="console.log(this.value);"></div>\r
- </div>\r
- <div dojoType="dijit.form.ComboButton" optionsTitle='save options' onClick='console.log("clicked combo save")'\r
- iconClass="plusBlockIcon">\r
- <span>Save</span>\r
- <div dojoType="dijit.Menu" id="saveMenu" style="display: none;">\r
- <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconSave"\r
- onClick="console.log('not actually saving anything, just a test!')">Save</div>\r
- <div dojoType="dijit.MenuItem"\r
- onClick="console.log('not actually saving anything, just a test!')">Save As</div>\r
- </div>\r
- </div>\r
- <button dojoType="dijit.form.Button" onClick='console.log("clicked simple")' disabled='true' iconClass="plusIcon">\r
- Disabled\r
- </button>\r
- </div>\r
- <br clear=both>\r
- <h2>Buttons with no text label</h2>\r
- <p>Buttons have showLabel=false so text is not displayed. Should have title attribute displayed on mouse over</p>\r
- <div class="box">\r
- <button id="1466" dojoType="dijit.form.Button" onClick='console.log("clicked simple button with no text label")' \r
- iconClass="plusIcon" showLabel="false">\r
- <span><b>Rich</b><i> Text</i> Test!</span>\r
- </button>\r
- <div dojoType="dijit.form.DropDownButton" iconClass="noteIcon" showLabel="false">\r
- <span>Color</span>\r
- <div dojoType="dijit.ColorPalette" id="colorPalette2" style="display: none" palette="3x4"\r
- onChange="console.log(this.value);">\r
- </div>\r
- </div>\r
- <div dojoType="dijit.form.ComboButton" optionsTitle='save options' onClick='console.log("clicked combo save")'\r
- iconClass="plusBlockIcon" showLabel="false">\r
- <span>Save</span>\r
- <div dojoType="dijit.Menu" id="saveMenu2" style="display: none;">\r
- <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconSave"\r
- onClick="console.log('not actually saving anything, just a test!')">Save</div>\r
- <div dojoType="dijit.MenuItem"\r
- onClick="console.log('not actually saving anything, just a test!')">Save As</div>\r
- </div>\r
- </div> \r
- </div>\r
- <br clear=both> \r
- <h2>Toggle buttons</h2>\r
- <p>The button CSS as well as the icon CSS can change on toggle </p>\r
- <div class="box">\r
- <button dojoType="dijit.form.ToggleButton" checked onChange="console.log('toggled button checked='+arguments[0]);" iconClass="dijitCheckBoxIcon">\r
- Toggle me\r
- </button>\r
- <button dojoType="dijit.form.ToggleButton" onChange="console.log('toggled button checked='+arguments[0]);" iconClass="dijitRadioIcon">\r
- Toggle me\r
- </button>\r
- </div>\r
- <br clear=both>\r
- <h2>Sizing</h2>\r
- <p>Short button, tall buttons, big buttons, small buttons...\r
- These buttons size to their content (just like <button>).</p>\r
- <div class="box">\r
- <button dojoType="dijit.form.Button" onclick='console.log("big");' iconClass="flatScreenIcon">\r
- <span style="font-size:xx-large">big</span>\r
- </button>\r
- <button id="smallButton1" dojoType="dijit.form.Button" onclick='console.log("small");'>\r
- <img src="../images/arrowSmall.gif" width="15" height="5">\r
- <span style="font-size:x-small">small</span>\r
- </button>\r
- <button dojoType="dijit.form.Button" onclick='console.log("long");'>\r
- <img src="../images/tube.gif" width="150" height="16">\r
- long\r
- </button>\r
- <button dojoType="dijit.form.Button" onclick='console.log("tall");' width2height="0.1">\r
- <img src="../images/tubeTall.gif" height="75" width="35"><br>\r
- <span style="font-size:medium">tall</span>\r
- </button>\r
- <div style="clear: both;"></div>\r
- </div>\r
- <br clear=both>\r
- <h2>Customized buttons</h2>\r
- <p>Dojo users can customize styles. Here's an example:</p>\r
- <style>\r
- .acmeButton .dijitButtonNode {\r
- background: rgb(96,96,96) !important;\r
- color: white !important;\r
- padding: 10px !important;\r
- font-size: x-large !important;\r
- padding-top: 10px !important;\r
- padding-bottom: 10px !important;\r
- border: 2px inset rgb(96,96,96);\r
- }\r
- .acmeButtonHover .dijitButtonNode {\r
- background-color: rgb(89,94,111) !important;\r
- color: cyan !important;\r
- }\r
- .acmeButtonFocused .dijitButtonNode {\r
- border: yellow inset 2px;\r
- }\r
- .acmeButtonActive .dijitButtonNode {\r
- background-color: white !important;\r
- color: black !important;\r
- border: 2px solid black !important;\r
- }\r
- </style>\r
- <div class="box">\r
- <button baseClass="acmeButton" dojoType="dijit.form.Button" onclick='console.log("short");'>\r
- short\r
- </button>\r
- <button baseClass="acmeButton" dojoType="dijit.form.Button" onclick='console.log("longer");'>\r
- bit longer\r
- </button>\r
- <button baseClass="acmeButton" dojoType="dijit.form.Button" onclick='console.log("longer yet");'>\r
- ridiculously long\r
- </button>\r
- <div style="clear: both;"></div>\r
- </div>\r
- <h2>Toggling the display test</h2>\r
- <p>\r
- (Ticket <a href="http://trac.dojotoolkit.org/ticket/403">#403</a>)\r
- </p>\r
- <div class="box">\r
- <button dojoType="dijit.form.Button" onclick='dojo.byId("hiddenNode").style.display="inline";'>\r
- Show Hidden Buttons\r
- </button>\r
- </div>\r
- <div class="box" style="display:none;" id="hiddenNode">\r
- <button dojoType="dijit.form.Button" onclick='console.log("clicked simple")' iconClass="plusIcon">\r
- Create\r
- </button>\r
- <button dojoType="dijit.form.Button" onclick='console.log("clicked simple")' iconClass="plusIcon">\r
- Create\r
- </button>\r
- </div>\r
- <div style="clear: both;"></div>\r
- <h2>Programatically changing buttons</h2>\r
- <p>clicking the buttons below will change the buttons above</p>\r
- <script type="text/javascript">\r
- // FIXME: doesn't the manager have a function for filtering by type?\r
- function forEachButton(func){\r
- dijit.registry.filter(function(widget){ return widget instanceof dijit.form.Button; }).forEach(func);\r
- }\r
- var disabled=false;\r
- function toggleDisabled(){ \r
- disabled=!disabled;\r
- forEachButton(function(widget){ widget.setAttribute('disabled',disabled); });\r
- dojo.byId("toggle").innerHTML= disabled ? "Enable all" : "Disable all";\r
- }\r
- var labels=["<img src='../images/note.gif' width='20' height='20'>All", "<i>work</i>", "and no", "<h1>play</h1>",\r
- "<span style='color: red'>makes</span>", "Jack", "<h3>a</h3>", "dull",\r
- "<img src='../images/plus.gif' width='16' height='16'>boy"];\r
- var idx=0;\r
- function changeLabels(){\r
- forEachButton(function(widget){\r
- widget.setLabel( labels[idx++ % labels.length]);\r
- });\r
- }\r
- </script>\r
- <div>\r
- <button id="toggle" onclick='toggleDisabled()'>Disable all</button>\r
- <button onclick='changeLabels()'>Change labels</button>\r
- <button onclick='location.reload()'>Revert</button>\r
- </div>\r
- <h3>Button instantiated via javacript:</h3>\r
- <div id="buttonContainer"></div>\r
- <script type="text/javascript">\r
- // See if we can make a button in script and attach it to the DOM ourselves.\r
- dojo.addOnLoad(function(){\r
- var params = {\r
- label: "hello!",\r
- name: "programmatic"\r
- };\r
- var widget = new dijit.form.Button(params, document.getElementById("buttonContainer"));\r
- });\r
- </script>\r
- <h3>DropDownButton instantiated via javacript:</h3>\r
- <div id="dropdownButtonContainer"></div>\r
- <script type="text/javascript">\r
- // See if we can make a drop down button in script and attach it to the DOM ourselves.\r
- function createButton(){\r
- var menu = new dijit.Menu({ });\r
- menu.domNode.style.display="none";\r
- var menuItem1 = new dijit.MenuItem({\r
- label: "Save",\r
- iconClass:"dijitEditorIcon dijitEditorIconSave",\r
- onClick: function(){ alert('save'); }\r
- });\r
- menu.addChild(menuItem1);\r
-\r
- var menuItem2 = new dijit.MenuItem({\r
- label: "Cut",\r
- iconClass:"dijitEditorIcon dijitEditorIconCut",\r
- onClick: function(){ alert('cut'); }\r
- });\r
- menu.addChild(menuItem2);\r
-\r
- var params = {\r
- label: "hello!",\r
- name: "programmatic2",\r
- dropDown: menu,\r
- id: "progButton"\r
- };\r
- var widget = new dijit.form.DropDownButton(params);\r
- dojo.byId("dropdownButtonContainer").appendChild(widget.domNode);\r
- dojo.byId("createButton").disabled = true;\r
- dojo.byId("destroyButton").disabled = false;\r
- }\r
- function destroyButton(){\r
- var button = dijit.byId("progButton");\r
- button.destroyRecursive();\r
- dojo.byId("createButton").disabled = false;\r
- dojo.byId("destroyButton").disabled = true;\r
- }\r
- </script>\r
- <button id="createButton" onclick="createButton();">create dropdown button</button>\r
- <button id="destroyButton" onclick="destroyButton();">destroy dropdown button</button>\r
-\r
-</body>\r
-</html>\r
projects / eow / blobdiff