git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/form/test_Button.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"\r
   2                 "http://www.w3.org/TR/html4/strict.dtd">\r
   3 <html>\r
   4         <head>\r
   5                 <title>Dojo Button Widget Test</title>\r
   6 \r
   7                 <style type="text/css">\r
   8                         @import "../../../dojo/resources/dojo.css";\r
   9                         @import "../css/dijitTests.css";\r
  10 \r
  11                         /* group multiple buttons in a row */\r
  12                         .box {\r
  13                                 display: block;\r
  14                                 text-align: center;\r
  15                         }\r
  16                         .box .dijit {\r
  17                                 margin-right: 10px;\r
  18                         }\r
  19                 </style>\r
  20 \r
  21                 <script type="text/javascript" src="../../../dojo/dojo.js"\r
  22                         djConfig="isDebug: true, parseOnLoad: true"></script>\r
  23                 <script type="text/javascript" src="../_testCommon.js"></script>\r
  24 \r
  25                 <script type="text/javascript">\r
  26                         dojo.require("dijit.ColorPalette");\r
  27                         dojo.require("dijit.Menu");\r
  28                         dojo.require("dijit.Tooltip");\r
  29                         dojo.require("dijit.form.Button");\r
  30                         dojo.require("dojo.parser");\r
  31                 </script>\r
  32         </head>\r
  33 <body>\r
  34         <h1 class="testTitle">Dijit Button Test</h1>\r
  35         <h2>Simple, drop down &amp; combo buttons</h2>\r
  36         <p>\r
  37         Buttons can do an action, display a menu, or both:\r
  38         </p>\r
  39         <div class="box">\r
  40                 <button id="1465" dojoType="dijit.form.Button" onClick='console.log("clicked simple")' iconClass="plusIcon">\r
  41                         Create\r
  42                 </button>\r
  43                 <span dojoType="dijit.Tooltip" connectId="1465">tooltip on button</span>\r
  44                 <div dojoType="dijit.form.DropDownButton" iconClass="noteIcon">\r
  45                         <span>Edit<b>!</b></span>\r
  46                         <div dojoType="dijit.Menu">\r
  47                                 <div dojoType="dijit.MenuItem"  iconClass="dijitEditorIcon dijitEditorIconCut"\r
  48                                         onClick="console.log('not actually cutting anything, just a test!')">Cut</div>\r
  49                                 <div dojoType="dijit.MenuItem"  iconClass="dijitEditorIcon dijitEditorIconCopy"\r
  50                                         onClick="console.log('not actually copying anything, just a test!')">Copy</div>\r
  51                                 <div dojoType="dijit.MenuItem"  iconClass="dijitEditorIcon dijitEditorIconPaste"\r
  52                                         onClick="console.log('not actually pasting anything, just a test!')">Paste</div>\r
  53                                 <div dojoType="dijit.MenuSeparator"></div>\r
  54                                 <div dojoType="dijit.PopupMenuItem">\r
  55                                         <span>Submenu</span>\r
  56                                         <div dojoType="dijit.Menu" id="submenu2">\r
  57                                                 <div dojoType="dijit.MenuItem" onClick="console.log('Submenu 1!')">Submenu Item One</div>\r
  58                                                 <div dojoType="dijit.MenuItem" onClick="console.log('Submenu 2!')">Submenu Item Two</div>\r
  59                                                 <div dojoType="dijit.PopupMenuItem">\r
  60                                                         <span>Deeper Submenu</span>\r
  61                                                         <div dojoType="dijit.Menu" id="submenu4">\r
  62                                                                 <div dojoType="dijit.MenuItem" onClick="console.log('Sub-submenu 1!')">Sub-sub-menu Item One</div>\r
  63                                                                 <div dojoType="dijit.MenuItem" onClick="console.log('Sub-submenu 2!')">Sub-sub-menu Item Two</div>\r
  64                                                         </div>\r
  65                                                 </div>\r
  66                                         </div>\r
  67                                 </div>\r
  68                         </div>\r
  69                 </div>\r
  70                 <div dojoType="dijit.form.DropDownButton" iconClass="noteIcon">\r
  71                         <span>Color</span>\r
  72                         <div dojoType="dijit.ColorPalette" id="colorPalette" style="display: none" palette="3x4"\r
  73                                 onChange="console.log(this.value);"></div>\r
  74                 </div>\r
  75                 <div dojoType="dijit.form.ComboButton" optionsTitle='save options' onClick='console.log("clicked combo save")'\r
  76                                 iconClass="plusBlockIcon">\r
  77                         <span>Save</span>\r
  78                         <div dojoType="dijit.Menu" id="saveMenu" style="display: none;">\r
  79                                 <div dojoType="dijit.MenuItem"  iconClass="dijitEditorIcon dijitEditorIconSave"\r
  80                                         onClick="console.log('not actually saving anything, just a test!')">Save</div>\r
  81                                 <div dojoType="dijit.MenuItem"\r
  82                                         onClick="console.log('not actually saving anything, just a test!')">Save As</div>\r
  83                         </div>\r
  84                 </div>\r
  85                 <button dojoType="dijit.form.Button" onClick='console.log("clicked simple")' disabled='true' iconClass="plusIcon">\r
  86                         Disabled\r
  87                 </button>\r
  88         </div>\r
  89         <br clear=both>\r
  90         <h2>Buttons with no text label</h2>\r
  91         <p>Buttons have showLabel=false so text is not displayed.  Should have title attribute displayed on mouse over</p>\r
  92         <div class="box">\r
  93                 <button id="1466" dojoType="dijit.form.Button" onClick='console.log("clicked simple button with no text label")' \r
  94                 iconClass="plusIcon" showLabel="false">\r
  95                 <span><b>Rich</b><i> Text</i> Test!</span>\r
  96                 </button>\r
  97                                 <div dojoType="dijit.form.DropDownButton" iconClass="noteIcon" showLabel="false">\r
  98                         <span>Color</span>\r
  99                         <div dojoType="dijit.ColorPalette" id="colorPalette2" style="display: none" palette="3x4"\r
 100                                 onChange="console.log(this.value);">\r
 101                         </div>\r
 102         </div>\r
 103         <div dojoType="dijit.form.ComboButton" optionsTitle='save options' onClick='console.log("clicked combo save")'\r
 104                                 iconClass="plusBlockIcon" showLabel="false">\r
 105                         <span>Save</span>\r
 106                         <div dojoType="dijit.Menu" id="saveMenu2" style="display: none;">\r
 107                                 <div dojoType="dijit.MenuItem"  iconClass="dijitEditorIcon dijitEditorIconSave"\r
 108                                         onClick="console.log('not actually saving anything, just a test!')">Save</div>\r
 109                                 <div dojoType="dijit.MenuItem"\r
 110                                         onClick="console.log('not actually saving anything, just a test!')">Save As</div>\r
 111                         </div>\r
 112                 </div>  \r
 113         </div>\r
 114         <br clear=both> \r
 115         <h2>Toggle buttons</h2>\r
 116         <p>The button CSS as well as the icon CSS can change on toggle </p>\r
 117         <div class="box">\r
 118                 <button dojoType="dijit.form.ToggleButton" checked onChange="console.log('toggled button checked='+arguments[0]);" iconClass="dijitCheckBoxIcon">\r
 119                         Toggle me\r
 120                 </button>\r
 121                 <button dojoType="dijit.form.ToggleButton" onChange="console.log('toggled button checked='+arguments[0]);" iconClass="dijitRadioIcon">\r
 122                         Toggle me\r
 123                 </button>\r
 124         </div>\r
 125         <br clear=both>\r
 126         <h2>Sizing</h2>\r
 127         <p>Short button, tall buttons, big buttons, small buttons...\r
 128         These buttons size to their content (just like &lt;button&gt;).</p>\r
 129         <div class="box">\r
 130                 <button dojoType="dijit.form.Button" onclick='console.log("big");' iconClass="flatScreenIcon">\r
 131                         <span style="font-size:xx-large">big</span>\r
 132                 </button>\r
 133                 <button id="smallButton1" dojoType="dijit.form.Button" onclick='console.log("small");'>\r
 134                         <img src="../images/arrowSmall.gif" width="15" height="5">\r
 135                         <span style="font-size:x-small">small</span>\r
 136                 </button>\r
 137                 <button dojoType="dijit.form.Button" onclick='console.log("long");'>\r
 138                         <img src="../images/tube.gif" width="150" height="16">\r
 139                         long\r
 140                 </button>\r
 141                 <button dojoType="dijit.form.Button" onclick='console.log("tall");' width2height="0.1">\r
 142                         <img src="../images/tubeTall.gif" height="75" width="35"><br>\r
 143                         <span style="font-size:medium">tall</span>\r
 144                 </button>\r
 145                 <div style="clear: both;"></div>\r
 146         </div>\r
 147         <br clear=both>\r
 148         <h2>Customized buttons</h2>\r
 149         <p>Dojo users can customize styles.  Here's an example:</p>\r
 150         <style>\r
 151                 .acmeButton .dijitButtonNode {\r
 152                         background: rgb(96,96,96) !important;\r
 153                         color: white !important;\r
 154                         padding: 10px !important;\r
 155                         font-size: x-large !important;\r
 156                         padding-top: 10px !important;\r
 157                         padding-bottom: 10px !important;\r
 158                         border: 2px inset rgb(96,96,96);\r
 159                 }\r
 160                 .acmeButtonHover .dijitButtonNode {\r
 161                         background-color: rgb(89,94,111) !important;\r
 162                         color: cyan !important;\r
 163                 }\r
 164                 .acmeButtonFocused .dijitButtonNode {\r
 165                         border: yellow inset 2px;\r
 166                 }\r
 167                 .acmeButtonActive .dijitButtonNode {\r
 168                         background-color: white !important;\r
 169                         color: black !important;\r
 170                         border: 2px solid black !important;\r
 171                 }\r
 172         </style>\r
 173         <div class="box">\r
 174                 <button baseClass="acmeButton" dojoType="dijit.form.Button" onclick='console.log("short");'>\r
 175                         short\r
 176                 </button>\r
 177                 <button baseClass="acmeButton" dojoType="dijit.form.Button" onclick='console.log("longer");'>\r
 178                         bit longer\r
 179                 </button>\r
 180                 <button baseClass="acmeButton" dojoType="dijit.form.Button" onclick='console.log("longer yet");'>\r
 181                         ridiculously long\r
 182                 </button>\r
 183                 <div style="clear: both;"></div>\r
 184         </div>\r
 185                 <h2>Toggling the display test</h2>\r
 186         <p>\r
 187         (Ticket <a href="http://trac.dojotoolkit.org/ticket/403">#403</a>)\r
 188         </p>\r
 189         <div class="box">\r
 190                 <button dojoType="dijit.form.Button" onclick='dojo.byId("hiddenNode").style.display="inline";'>\r
 191                         Show Hidden Buttons\r
 192                 </button>\r
 193         </div>\r
 194         <div class="box" style="display:none;" id="hiddenNode">\r
 195                 <button dojoType="dijit.form.Button" onclick='console.log("clicked simple")' iconClass="plusIcon">\r
 196                         Create\r
 197                 </button>\r
 198                 <button dojoType="dijit.form.Button" onclick='console.log("clicked simple")' iconClass="plusIcon">\r
 199                         Create\r
 200                 </button>\r
 201         </div>\r
 202         <div style="clear: both;"></div>\r
 203         <h2>Programatically changing buttons</h2>\r
 204         <p>clicking the buttons below will change the buttons above</p>\r
 205         <script type="text/javascript">\r
 206                 // FIXME: doesn't the manager have a function for filtering by type?\r
 207                 function forEachButton(func){\r
 208                         dijit.registry.filter(function(widget){ return widget instanceof dijit.form.Button; }).forEach(func);\r
 209                 }\r
 210                         var disabled=false;\r
 211                 function toggleDisabled(){      \r
 212                         disabled=!disabled;\r
 213                         forEachButton(function(widget){ widget.setAttribute('disabled',disabled); });\r
 214                         dojo.byId("toggle").innerHTML= disabled ? "Enable all" : "Disable all";\r
 215                 }\r
 216                 var labels=["<img src='../images/note.gif' width='20' height='20'>All", "<i>work</i>", "and no", "<h1>play</h1>",\r
 217                                          "<span style='color: red'>makes</span>", "Jack", "<h3>a</h3>", "dull",\r
 218                                          "<img src='../images/plus.gif' width='16' height='16'>boy"];\r
 219                 var idx=0;\r
 220                 function changeLabels(){\r
 221                         forEachButton(function(widget){\r
 222                                 widget.setLabel( labels[idx++ % labels.length]);\r
 223                         });\r
 224                 }\r
 225         </script>\r
 226         <div>\r
 227                 <button id="toggle" onclick='toggleDisabled()'>Disable all</button>\r
 228                 <button onclick='changeLabels()'>Change labels</button>\r
 229                 <button onclick='location.reload()'>Revert</button>\r
 230         </div>\r
 231         <h3>Button instantiated via javacript:</h3>\r
 232         <div id="buttonContainer"></div>\r
 233         <script type="text/javascript">\r
 234         // See if we can make a button in script and attach it to the DOM ourselves.\r
 235         dojo.addOnLoad(function(){\r
 236                 var params = {\r
 237                         label: "hello!",\r
 238                         name: "programmatic"\r
 239                 };\r
 240                 var widget = new dijit.form.Button(params, document.getElementById("buttonContainer"));\r
 241         });\r
 242         </script>\r
 243     <h3>DropDownButton instantiated via javacript:</h3>\r
 244         <div id="dropdownButtonContainer"></div>\r
 245         <script type="text/javascript">\r
 246             // See if we can make a drop down button in script and attach it to the DOM ourselves.\r
 247         function createButton(){\r
 248             var menu = new dijit.Menu({ });\r
 249             menu.domNode.style.display="none";\r
 250             var menuItem1 = new dijit.MenuItem({\r
 251                 label: "Save",\r
 252                 iconClass:"dijitEditorIcon dijitEditorIconSave",\r
 253                 onClick: function(){ alert('save'); }\r
 254             });\r
 255             menu.addChild(menuItem1);\r
 256 \r
 257             var menuItem2 = new dijit.MenuItem({\r
 258                 label: "Cut",\r
 259                 iconClass:"dijitEditorIcon dijitEditorIconCut",\r
 260                 onClick: function(){ alert('cut'); }\r
 261             });\r
 262             menu.addChild(menuItem2);\r
 263 \r
 264             var params = {\r
 265                 label: "hello!",\r
 266                 name: "programmatic2",\r
 267                 dropDown: menu,\r
 268                 id: "progButton"\r
 269             };\r
 270             var widget = new dijit.form.DropDownButton(params);\r
 271             dojo.byId("dropdownButtonContainer").appendChild(widget.domNode);\r
 272             dojo.byId("createButton").disabled = true;\r
 273             dojo.byId("destroyButton").disabled = false;\r
 274             }\r
 275         function destroyButton(){\r
 276             var button = dijit.byId("progButton");\r
 277             button.destroyRecursive();\r
 278             dojo.byId("createButton").disabled = false;\r
 279             dojo.byId("destroyButton").disabled = true;\r
 280         }\r
 281     </script>\r
 282     <button id="createButton" onclick="createButton();">create dropdown button</button>\r
 283     <button id="destroyButton" onclick="destroyButton();">destroy dropdown button</button>\r
 284 \r
 285 </body>\r
 286 </html>\r