You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
216 lines
7.2 KiB
216 lines
7.2 KiB
<!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> |
|
<link rel="stylesheet" type="text/css" href="css/demos.css" /> |
|
<script type="text/javascript"> |
|
var djConfig = {isDebug: true , baseScriptUri: "../../", debugAtAllCosts: false }; |
|
</script> |
|
|
|
<script type="text/javascript" src="../../dojo.js"></script> |
|
<script type="text/javascript"> |
|
dojo.require("dojo.widget.Button"); |
|
dojo.require("dojo.widget.Menu2"); |
|
dojo.require("dojo.widget.Manager"); |
|
</script> |
|
|
|
<script> |
|
// Load user custom button |
|
|
|
// 1. set directory for acme package (which contains widgets) |
|
// The path is relative to the dojo/ directory, so typically |
|
// it's something like "../acme" |
|
dojo.registerModulePath('acme', 'tests/widget/acme'); |
|
|
|
// 2. load the user defined button |
|
dojo.require("acme.Button"); |
|
|
|
function widgetClick() { |
|
dojo.debug('widget [' + this.widgetId + '] was clicked'); |
|
} |
|
|
|
dojo.hostenv.writeIncludes(); |
|
</script> |
|
<style> |
|
/* group multiple buttons in a row */ |
|
.box { |
|
display: block; |
|
text-align: center; |
|
} |
|
.box .dojoButton { |
|
float: left; |
|
margin-right: 10px; |
|
} |
|
.dojoButton .dojoButtonContents { |
|
font-size: medium; |
|
} |
|
|
|
/* todo: find good color for disabled menuitems, and teset */ |
|
.dojoMenuItem2Disabled .dojoMenuItem2Label span, |
|
.dojoMenuItem2Disabled .dojoMenuItem2Accel span { |
|
color: ThreeDShadow; |
|
} |
|
|
|
.dojoMenuItem2Disabled .dojoMenuItem2Label span span, |
|
.dojoMenuItem2Disabled .dojoMenuItem2Accel span span { |
|
color: ThreeDHighlight; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<h2>Simple, drop down & combo buttons</h2> |
|
<p> |
|
Buttons can do an action, display a menu, or both: |
|
</p> |
|
<div class="box"> |
|
<button dojoType="Button" onclick='dojo.debug("clicked simple")'> |
|
<img src="images/plus.gif" width="16" height="16"> Create |
|
</button> |
|
<button dojoType="Button" onclick='dojo.debug("clicked simple")'> |
|
<img src="images/plus.gif" width="16" height="16"><br>Create |
|
</button> |
|
<button dojoType="DropDownButton" menuId='editMenu'> |
|
<img src="images/note.gif" width="20" height="20"> Edit |
|
</button> |
|
<button dojoType="DropDownButton" menuId='editMenu'> |
|
<img src="images/note.gif" width="20" height="20"><br>Edit |
|
</button> |
|
<button dojoType="comboButton" menuId='saveMenu' onClick='dojo.debug("clicked combo save");'> |
|
<img src="images/note.gif" width="20" height="20"> Save |
|
</button> |
|
<button dojoType="comboButton" menuId='saveMenu' onClick='dojo.debug("clicked combo save");'> |
|
<img src="images/note.gif" width="20" height="20"><br>Save |
|
</button> |
|
</div> |
|
<br clear=both> |
|
|
|
<h2>Sizing</h2> |
|
<p>Short buttons, tall buttons, big buttons, small buttons... |
|
These buttons size to their content (just like <button>).</p> |
|
<div class="box"> |
|
<button dojoType="Button" onclick='dojo.debug("big");'> |
|
<img src="images/flatScreen.gif" width="32" height="32"> |
|
<span style="font-size:xx-large">big</span> |
|
</button> |
|
<button id="smallButton1" dojoType="Button" onclick='dojo.debug("small");'> |
|
<img src="images/arrowSmall.gif" width="15" height="5"> |
|
<span style="font-size:x-small">small</span> |
|
</button> |
|
<button dojoType="Button" onclick='dojo.debug("long");'> |
|
<img src="images/tube.gif" width="150" height="16"> |
|
long |
|
</button> |
|
<button dojoType="Button" onclick='dojo.debug("tall");' width2height="0.1"> |
|
<div> |
|
<img src="images/tubeTall.gif" height="75" width="35"><br> |
|
<span style="font-size:medium">tall</span> |
|
</div> |
|
</button> |
|
<div style="clear: both;"></div> |
|
</div> |
|
<br clear=both> |
|
|
|
<h2>User defined button</h2> |
|
<p>Dojo users can extend the button class and define their own background images. |
|
Here's an example:</p> |
|
<style> |
|
.dc { |
|
font-size: x-large; |
|
padding-top: 10px; |
|
padding-bottom: 10px; |
|
} |
|
</style> |
|
<div class="box"> |
|
<button dojoType="acme:Button" onclick='dojo.debug("short");'> |
|
<div class="dc">short</div> |
|
</button> |
|
<button dojoType="acme:Button" onclick='dojo.debug("longer");'> |
|
<div class="dc">bit longer</div> |
|
</button> |
|
<button dojoType="acme:Button" onclick='dojo.debug("longer yet");'> |
|
<div class="dc">ridiculously long</div> |
|
</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="Button" onclick='dojo.byId("hiddenNode").style.display="inline";'> |
|
Show Hidden Buttons |
|
</button> |
|
</div> |
|
<div class="box" style="display:none;" id="hiddenNode"> |
|
<button dojoType="Button" onclick='dojo.debug("clicked simple")'> |
|
<img src="images/plus.gif" width="16" height="16"> Create |
|
</button> |
|
<button dojoType="Button" onclick='dojo.debug("clicked simple")'> |
|
<img src="images/plus.gif" width="16" height="16"> 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> |
|
function forEachButton(func){ |
|
dojo.lang.forEach( |
|
dojo.lang.unnest( |
|
dojo.widget.manager.getWidgetsByType("Button"), |
|
dojo.widget.manager.getWidgetsByType("DropDownButton"), |
|
dojo.widget.manager.getWidgetsByType("ComboButton"), |
|
dojo.widget.manager.getWidgetsByType("acme:Button") |
|
), |
|
func |
|
); |
|
} |
|
|
|
var disabled=false; |
|
function toggleDisabled(){ |
|
disabled=!disabled; |
|
forEachButton(function(widget){ widget.setDisabled(disabled); }); |
|
dojo.byId("toggle").innerHTML= disabled ? "Enable all" : "Disable all"; |
|
} |
|
var captions=["<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 changeCaptions(){ |
|
forEachButton(function(widget){ widget.setCaption( captions[idx++ % captions.length]); }); |
|
} |
|
</script> |
|
<div> |
|
<button id="toggle" onclick='toggleDisabled()'>Disable all</button> |
|
<button onclick='changeCaptions()'>Change caption</button> |
|
<button onclick='location.reload()'>Revert</button> |
|
</div> |
|
|
|
<div dojoType="PopupMenu2" id="editMenu" toggle="wipe"> |
|
<div dojoType="MenuItem2" iconSrc="../../src/widget/templates/buttons/cut.gif" caption="Cut" accelKey="Ctrl+C" |
|
onClick="dojo.debug('not actually cutting anything, just a test!')"></div> |
|
<div dojoType="MenuItem2" iconSrc="../../src/widget/templates/buttons/copy.gif" caption="Copy" accelKey="Ctrl+X" |
|
onClick="dojo.debug('not actually copying anything, just a test!')"></div> |
|
<div dojoType="MenuItem2" iconSrc="../../src/widget/templates/buttons/paste.gif" caption="Paste" accelKey="Ctrl+V" |
|
onClick="dojo.debug('not actually pasting anything, just a test!')"></div> |
|
</div> |
|
|
|
<div dojoType="PopupMenu2" id="saveMenu" toggle="wipe"> |
|
<div dojoType="MenuItem2" iconSrc="../../src/widget/templates/buttons/save.gif" caption="Save" accelKey="Ctrl+S" |
|
onClick="dojo.debug('not actually saving anything, just a test!')"></div> |
|
<div dojoType="MenuItem2" iconSrc="../../src/widget/templates/buttons/save.gif" caption="Save As" accelKey="Ctrl+A" |
|
onClick="dojo.debug('not actually saving anything, just a test!')"></div> |
|
</div> |
|
|
|
<h3>Instantiation from Script:</h3> |
|
<div id="buttonContainer"></div> |
|
<script type="text/javascript"> |
|
dojo.addOnLoad(function(){ |
|
var params = {caption: "script test"}; |
|
var widget = dojo.widget.createWidget("Button", params, document.getElementById("buttonContainer")); |
|
}); |
|
</script> |
|
|
|
</body> |
|
</html>
|
|
|