Button Set/Button Bar in Dojo

Question

I need to present my users with a choice of two options.

I want these to be nice big buttons to click, as opposed to a RadioButton, where the label is usually not a clickable element but just a traditional small circle to click.

e.g.

As the user clicks each one, a function is called with a different variable, so that some other magic can happen elsewhere in my application.

I saw how this can be done in jQuery, so that is going to be my backup plan.

Seeing as im trying to learn Dojo and 90% of the app is currently built on Dojo (1.7), I was hoping there would be a similar component to this within Dojo.

I assume I could place two separate Dojo buttons alongside each other, and have a global variable catch which one has currently been last clicked, and when it has, ensure the other button becomes disabled, but this does not sound that elegant.

What is the best way to achieve a choice of two buttons, where when one is clicked, the other button becomes disabled, and a function is fired with a particular value?

Answer 1

you could use something like this (note that i havent run the code)

<button data-dojo-type="dijit/form/ToggleButton" id='toggle1' data-dojo-props="iconClass:'dijitCheckBoxIcon', checked: true">
<button data-dojo-type="dijit/form/ToggleButton" id='toggle2' data-dojo-props="iconClass:'dijitCheckBoxIcon', checked: false">​

and this javascript:

​dojo.require('dojo.parser');
dojo.require('dojo.form.ToggleButton');

dojo.ready(function(){
    dojo.parser.parse();
    dojo.connect(dijit.byId('toggle1'),'onChange',function(){
        dijit.byId('toggle2').set('checked',false);
        //what you want to do
    });
    dojo.connect(dijit.byId('toggle1'),'onChange',function(){
        dijit.byId('toggle2').set('checked',false);
        //what you want to do
    });

});​

note that I havent checked the code, so it may need some modifications