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