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.
217 lines
7.2 KiB
217 lines
7.2 KiB
2 years ago
|
<!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>
|