Button, ComboButton, DropDownButton

Submitted by dipen on Tue, 05/29/2007 - 00:00.

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

            "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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

            "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:

Edit

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

            "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:

Save

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

            "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

Checkboxes and Radio buttons are implemented using the standard input type=checkbox and type=radio elements respectively. CSS is used to overlay the unique theme over the actual input elements. Thus, the keyboard behavior of checkboxes and radio buttons mimics the behavior in the browser.

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.

Even though the dropdown and combo buttons are marked with the ARIA haspopup property, the screen readers do not indicate this to the user in Firefox 2. In Firefox 3 the dropdown and combo buttons will be announced as "menu button".

Updates for 1.0

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.

Can we disable them?

Submitted by sirber on Tue, 03/04/2008 - 14:33.

Like html elements, can we disable them?

Yes. http://dojotoolkit.org/b

Submitted by frankf on Wed, 03/05/2008 - 03:08.

Yes.

http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/form-validation-s...

Upps. Not working in Safari 3.1?

Submitted by suedmann on Tue, 03/18/2008 - 17:32.

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!

Submitted by suedmann on Tue, 03/18/2008 - 18:26.

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

Submitted by clogan on Fri, 03/28/2008 - 20:00.

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)

#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

Submitted by clfh on Sun, 04/06/2008 - 10:41.

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.

Unwanted check mark in button

Submitted by clfh on Sun, 04/06/2008 - 10:45.

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?

I have tried setting 'selected: false' before building it - has no effect.

Hack for check showing in Button...

Submitted by clfh on Sun, 04/06/2008 - 11:42.

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

Submitted by frankf on Sun, 04/06/2008 - 15:59.

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.

Re: Unwanted check mark in button

Submitted by sorbitol on Thu, 10/30/2008 - 16:25.

The button appears normally when I paste the first example's code in, but if I remove the section (the CSS), I see a check mark on the left side of the button. I am running Bon Echo 2.0.0.6 with Firebug on Fedora Core 3. Also, the check mark appears when my page consists entirely of the following:

<button dojoType="dijit.form.Button">Hello World</button>

I've seen the same checkmark

Submitted by Cidolfas on Mon, 04/14/2008 - 18:47.

I've seen the same checkmark in the markup code (through Firebug View Source), but never displayed. Not sure what's happening there.

tool tip icon using a button

Submitted by usabilitus_maximus on Tue, 05/06/2008 - 14:51.

I would like to add an accessible and brandable icon to the end of fields and form elements. For example:

Htr 5869 deductible |_____________| (?)

Where the (?) is an icon that the user can roll over or click to find out more about that field or form element.

Yes, I can attach the tool tip to the field but having an icon gives an indication that there is a tip.
Also I'd ideally like to associate them in the dom with something similar to "title for=" but really a "hint for=" but I don't think that is part of W3.

The main issue is some elements have hints but they need to be obvious so that people can find them. Tool tips are hard to find when they are not on every object.

I am trying to use the button widget so that I can use the iconClass and the accessibility features but need to hide the button styling and show only the icon. Is there a way to hide the button style similar to how it is used in a toolbar? Am I going in the right direction or is there a better path to take?

--
Thanks,
James

IE, forms, and buttons

Submitted by betz on Thu, 05/15/2008 - 15:35.

Under IE, if you have buttons embedded in a form, and you use

dijit.byId('frmForm').setValues(response);

The button labels are cleared.

This is one workaround

/* Equivalent */
var Desc=dijit.byId('frmForm').getDescendants();
var l=Desc.length,i,n;
for (i=0;i<l;i++)
{
n=Desc[i].name;
if (typeof response[n] != 'undefined')
Desc[i].setValue(response[n]);
}

Programatically Creating a Button

Submitted by wzhao6898 on Tue, 06/24/2008 - 00:12.

Programatically Creating a Button" sample codes won't work if I modified the code to create <div> programmatically:

Programatically Creating a Button" sample codes won't work if

Submitted by wzhao6898 on Tue, 06/24/2008 - 00:14.

Programatically Creating a Button" sample codes won't work if I modified the code to create the

tag programmatically:

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 div = document.createElement("div");
div.id = "button-placeholder";

var button_dynamic = new dijit.form.Button(
params,div
);
}
dojo.addOnLoad(create_button);

Could someone tell me why this won't work, the button is not showing at all.
Thanks very much!

David

I didn't study your code

Submitted by frankf on Tue, 08/19/2008 - 17:14.

I didn't study your code above, but, since the div was not added to the document, that may be the reason the button is not displaying.

Opera failed to find disabled button

Submitted by yale on Wed, 11/05/2008 - 15:46.

It's found that, in Opera, disabled buttons cannot be access via neither dijit.byId() nor document.getElementById(). But they are still accessible via ID directly. So, my code looks like this:

Search

The Book of Dojo