--- /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