Button, ComboButton, DropDownButton
Buttons are very popular UI elements, and Dijit has a bunch of them, from a simple click and go button to a DropDownButton, and much more.
Examples
Creating a Click and Go Button
A normal click-and-go button is simple to make and can be enhanced by using image icons, for example. The following markup creates a normal click-and-go button that calls a single JavaScript function:

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Click and Go Button Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
function call_function() {
console.debug("Button was clicked.");
}
</script>
</head>
<body class="tundra">
<button dojoType="dijit.form.Button" onclick="call_function">
Hi I am the One !!
</button>
</body></html>
You can set text on a button by using the label attribute. To display an image on the button, you use the iconClass attribute, then set up a CSS class which uses that icon as a background-image. See Toolbar for a description of sprites, a technique which can make multiple icons load faster.
Programatically Creating a Button
The following code creates a button programatically:
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Click and Go Button Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/0.9.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/0.9.0/dojo/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/0.9.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
function call_function() {
console.debug("Button was clicked.");
}
function create_button()
{
var params = {
label: "Hi I am the Second one",
// Note here, when creating programmatically, this is a function, not a string
onClick: call_function
};
var button_dynamic = new dijit.form.Button(
params,dojo.byId("button-placeholder")
);
}
dojo.addOnLoad(create_button);
</script>
</head>
<body class="tundra">
<div id="button-placeholder"> </div>
</body></html>
The created button will take the place of the provided DIV node; in the example, this is the DIV with the ID "button-placeholder". Alternatively, you can use the DOM's createElement() call to create the DIV programmatically, then pass it to the dijit.form.Button constructor.
Creating DropDownButtons
There are, of course, fancier buttons that can be used to make a Web application more like a desktop application, thus providing the power of web 2.0 UI. DropDownButtons provide a drop-down menu when clicked, which is rendered using the dijit.Menu widget of the dijit system and follows the Menu rules. A PopupMenuItem always has two child nodes: a tag with the displayed label (usually in a SPAN tag), and a widget to be popped up, typically a dijit.Menu widget. For example:

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DropDownButton Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Menu");
function call_function(choice) {
console.debug(choice+" was clicked.");
}
</script>
</head>
<body class="tundra">
<div dojoType="dijit.form.DropDownButton">
<span>Edit</span>
<div dojoType="dijit.Menu" id="Edit">
<div dojoType="dijit.MenuItem" label="Copy"
onclick="call_function('copy');"></div>
<div dojoType="dijit.MenuItem" label="Cut"
onclick="call_function('cut');"></div>
<div dojoType="dijit.MenuItem" label="Paste"
onclick="call_function('paste');"></div>
</div>
</div>
</body></html>
In the preceding example, you need to require dijit.Menu alone to source dijit.Menu and dijit.MenuItem. DropDownButtons are used in Web applications like the rich text editor where you need a menu.
Creating ComboButtons
ComboButtons are one step ahead of DropDownButtons as they can be clicked and also offer present menu options like a DropDownButton. The following example shows a ComboButton being created:

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ComboButton Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Menu");
function save_function() {
console.debug("Save was clicked.");
}
function save_as_function(choice) {
console.debug("Save As was clicked. Dialog box should go here.");
}
</script>
</head>
<body class="tundra">
<div dojoType="dijit.form.ComboButton" onclick="save_function">
<span>Save</span>
<div dojoType="dijit.Menu" id="saveMenu" toggle="fade" style="display: none;">
<div dojoType="dijit.MenuItem"
iconClass="dijitEditorIcon dijitEditorIconSave" onclick="save_function">
Save
</div>
<div dojoType="dijit.MenuItem" onclick="save_as_function">
Save As
</div>
</div>
</div>
</body></html>
The ComboButton class is declared in the Button.js file, so you only need to require the Button and Menu Classes.
dijit.form.Button, dijit.form.DropDownButton,
dijit.form.ComboButton,
Basically the same thing as a normal HTML button, but with special styling.
|
||
Attributes
|
||
iconClass | String | class to apply to div in button to make it display an icon |
label | String | text to display in button. Use setLabel() to change after creation time. |
optionsTitle | String | text that describes the options menu (accessibility) |
showLabel | Boolean | whether or not to display the text label in button |
Methods
|
||
addChild | Process the given child widget, inserting it's dom node as a child of our dom node | |
getChildren | returns array of children widgets | |
setLabel | reset the label (text) of the button; takes an HTML string | |
hasChildren | returns true if widget has children | |
removeChild | removes the passed widget instance from this widget but does not destroy it | |
Extension Points
|
||
onClick | callback for when button is clicked; user can override this function for some reason type=submit buttons don't automatically submit the form; do it manually |
Accessibility
Keyboard
Action | Key |
---|---|
Navigate to a button | tab - all buttons are in the tab order |
Activate the button | enter or space key |
Close an open drop down | escape key - focus returns to button |
With drop down open, navigate to the next element on page | tab will close drop down and set focus back to the button, tab again to navigate to next element |
Navigate to a checkbox | tab - all checkboxes are in the tab order |
toggle a checkbox | space |
Navigate to a radio button or group of radio buttons | tab - see below for browser differences |
select a radio in a group | tab to the radio group, up down arrow to the desired radio item |
Radio buttons in Firefox 2: When radio buttons are grouped the selected radio button is in the tab order. If no radio is selected, each radio button in the group is in the tab order until one of the radios is selected by navigating to it using an arrow key or navigating to it using the tab key and pressing space.
Radio buttons in Internet Explorer 6 & 7: When radio buttons are grouped the selected radio button is in the tab order. If no radio is selected only one radio in the group is in the tab order. The first radio in the group is in the tab order when navigating forward to the radio group. The last radio in the group is in the tab order when navigating backward to the radio group. Once focus is in the radio group, use the arrow keys to select one of the radio buttons.
High Contrast Mode
All buttons should include a label parameter with text for the button even if the showLabel parameter is set to false. The label parameter is used to identify the button in high contrast mode when the icon for the button will no longer be displayed and is also used to identify the button to a screen reader.
Screen Reader
In order to identify the button description to the screen reader, all buttons should include a label parameter even if the showLabel parameter is set to false.
All Combo Buttons should include a optionsTitle parameter to identify the function of the drop down button. The optionsTitle parameter is used by the screen reader to speak the information about the drop down portion of the button. Note that the Window-Eyes screen reader will speak "question" and then the optionsTitle text when the drop down portion of the Combo button receives focus. The "question" is spoken because Window-Eyes does not recognize the html entity character that is used to provide the visual drop down arrow in the button.
Updates for 1.0
Accessibility - Keyboard
Accessibility - Keyboard
When navigating to a ComboButton using the keyboard the focus is not visible using Firefox 2. The current versions of Firefox 3, however, do show a visible focus rectangle for the pieces of the ComboButton so the focus problem in Firefox 2 was not addressed within the dijit button code.
- Printer-friendly version
- Login or register to post comments
- Unsubscribe post
Can we disable them?
Like html elements, can we disable them?
Yes. http://dojotoolkit.org/b
Yes.
http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/form-validation-s...
Upps. Not working in Safari 3.1?
Seems that combobuttons are not working with Safari 3.1.
Sorry, I missed to test it with Safari 3.0 before the update.
Sure working with Safari!
It is just the referenced version of dojo in this examples (0.9) that is not working. Actual versions will do without any error.
Sure working with Safari!
It is just the referenced version of dojo in this examples (0.9) that is not working. Actual versions will do without any error.
showLabel
It seems that when I use an image on a regular button. The width in IE6 goes wider to accommodate text of which there is none. (In FF, all is well.)
I thought that maybe using showLabel would make it stop mis-calcing the width. Instead showLabel="false" causes many other problems.
Is there something else I should be doing here.
(snippits)
<button id="ResultsGridRefreshButton"
dojoType="dijit.form.Button"
iconClass="refreshButton"
onClick="Grid.render();"
></button>
#ResultsGridRefreshButton {
width: 26px;
height: 26px;
position: absolute;
top: 31px;
left: 168px;
padding: 0px;
margin: 0px;
}
.refreshButton {
background-image: url('../images/refresh2.gif');
background-repeat: no-repeat;
width: 20px;
height: 20px;
}
Thanks.
Unwanted check mark in button
Putting Hello world
into a page generates a Button with a check mark in the label area.
Why?
Inspecting it, the check mark is enclosed in a SPAN of class 'dijitReset dijitToggleButtonIconChar' , which implies it is something to do with a toggle action on the button, yet I can see no methods associated with toggling in the Button API.
I have tried setting 'selected: false' before building it - has no effect.
Unwanted check mark in button
Repost with correct use of entityRefs - sorry!...
Putting <button dojoType="dijit.form.Button" onClick="alert('Hi!')">Hello world</button>
into a page generates a Button with a check mark in the label area.
Why?
Inspecting it, the check mark is enclosed in a SPAN of class 'dijitReset dijitToggleButtonIconChar' , which implies it is something to do with a toggle action on the button, yet I can see no methods associated with toggling in the Button API.
I have tried setting 'selected: false' before building it - has no effect.
Hack for check showing in Button...
I've found my own hack, when constructing programatically:
var button = new new dijit.form.Button(...);
button.iconNode.style.display = 'none';
but working through the source code for Button and superclasses I can't work out:
1) Why this 'feature' is in the templates in such a way that it is visible by default,
2) Which API is supposed to turn it off.
I'm in my first few days of investigating DOJO for possible production use; I'm not impressed with this failure of the most simple of classes to 'do what it says on the tin'!
I copied and pasted the
I copied and pasted the first example code at the top of the page, and it displays just fine--no checkmark. I use dijit.form.Buttons in plenty of code, and a checkmark is never displayed. You may want to go to the support Forums, and post a very small, but complete version of your html code, so others can review it and see why you are seeing checkmarks.