287 lines
11 KiB
HTML
287 lines
11 KiB
HTML
|
<!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>
|