1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
\r
2 "http://www.w3.org/TR/html4/strict.dtd">
\r
5 <title>Dojo Button Widget Test</title>
\r
7 <style type="text/css">
\r
8 @import "../../../dojo/resources/dojo.css";
\r
9 @import "../css/dijitTests.css";
\r
11 /* group multiple buttons in a row */
\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
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
34 <h1 class="testTitle">Dijit Button Test</h1>
\r
35 <h2>Simple, drop down & combo buttons</h2>
\r
37 Buttons can do an action, display a menu, or both:
\r
40 <button id="1465" dojoType="dijit.form.Button" onClick='console.log("clicked simple")' iconClass="plusIcon">
\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
70 <div dojoType="dijit.form.DropDownButton" iconClass="noteIcon">
\r
72 <div dojoType="dijit.ColorPalette" id="colorPalette" style="display: none" palette="3x4"
\r
73 onChange="console.log(this.value);"></div>
\r
75 <div dojoType="dijit.form.ComboButton" optionsTitle='save options' onClick='console.log("clicked combo save")'
\r
76 iconClass="plusBlockIcon">
\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
85 <button dojoType="dijit.form.Button" onClick='console.log("clicked simple")' disabled='true' iconClass="plusIcon">
\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
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
97 <div dojoType="dijit.form.DropDownButton" iconClass="noteIcon" showLabel="false">
\r
99 <div dojoType="dijit.ColorPalette" id="colorPalette2" style="display: none" palette="3x4"
\r
100 onChange="console.log(this.value);">
\r
103 <div dojoType="dijit.form.ComboButton" optionsTitle='save options' onClick='console.log("clicked combo save")'
\r
104 iconClass="plusBlockIcon" showLabel="false">
\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
115 <h2>Toggle buttons</h2>
\r
116 <p>The button CSS as well as the icon CSS can change on toggle </p>
\r
118 <button dojoType="dijit.form.ToggleButton" checked onChange="console.log('toggled button checked='+arguments[0]);" iconClass="dijitCheckBoxIcon">
\r
121 <button dojoType="dijit.form.ToggleButton" onChange="console.log('toggled button checked='+arguments[0]);" iconClass="dijitRadioIcon">
\r
127 <p>Short button, tall buttons, big buttons, small buttons...
\r
128 These buttons size to their content (just like <button>).</p>
\r
130 <button dojoType="dijit.form.Button" onclick='console.log("big");' iconClass="flatScreenIcon">
\r
131 <span style="font-size:xx-large">big</span>
\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
137 <button dojoType="dijit.form.Button" onclick='console.log("long");'>
\r
138 <img src="../images/tube.gif" width="150" height="16">
\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
145 <div style="clear: both;"></div>
\r
148 <h2>Customized buttons</h2>
\r
149 <p>Dojo users can customize styles. Here's an example:</p>
\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
160 .acmeButtonHover .dijitButtonNode {
\r
161 background-color: rgb(89,94,111) !important;
\r
162 color: cyan !important;
\r
164 .acmeButtonFocused .dijitButtonNode {
\r
165 border: yellow inset 2px;
\r
167 .acmeButtonActive .dijitButtonNode {
\r
168 background-color: white !important;
\r
169 color: black !important;
\r
170 border: 2px solid black !important;
\r
174 <button baseClass="acmeButton" dojoType="dijit.form.Button" onclick='console.log("short");'>
\r
177 <button baseClass="acmeButton" dojoType="dijit.form.Button" onclick='console.log("longer");'>
\r
180 <button baseClass="acmeButton" dojoType="dijit.form.Button" onclick='console.log("longer yet");'>
\r
183 <div style="clear: both;"></div>
\r
185 <h2>Toggling the display test</h2>
\r
187 (Ticket <a href="http://trac.dojotoolkit.org/ticket/403">#403</a>)
\r
190 <button dojoType="dijit.form.Button" onclick='dojo.byId("hiddenNode").style.display="inline";'>
\r
191 Show Hidden Buttons
\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
198 <button dojoType="dijit.form.Button" onclick='console.log("clicked simple")' iconClass="plusIcon">
\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
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
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
220 function changeLabels(){
\r
221 forEachButton(function(widget){
\r
222 widget.setLabel( labels[idx++ % labels.length]);
\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
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
238 name: "programmatic"
\r
240 var widget = new dijit.form.Button(params, document.getElementById("buttonContainer"));
\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
252 iconClass:"dijitEditorIcon dijitEditorIconSave",
\r
253 onClick: function(){ alert('save'); }
\r
255 menu.addChild(menuItem1);
\r
257 var menuItem2 = new dijit.MenuItem({
\r
259 iconClass:"dijitEditorIcon dijitEditorIconCut",
\r
260 onClick: function(){ alert('cut'); }
\r
262 menu.addChild(menuItem2);
\r
266 name: "programmatic2",
\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
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
282 <button id="createButton" onclick="createButton();">create dropdown button</button>
\r
283 <button id="destroyButton" onclick="destroyButton();">destroy dropdown button</button>
\r