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, 0 insertions, 286 deletions
diff --git a/includes/js/dijit/tests/form/test_Button.html b/includes/js/dijit/tests/form/test_Button.html deleted file mode 100644 index 7c04f50..0000000 --- a/includes/js/dijit/tests/form/test_Button.html +++ /dev/null @@ -1,286 +0,0 @@ -<!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>
|