toolbar - dijit ToolBar で一度に 1 つのボタンのみをトグルするにはどうすればよいですか?

Question

3 つのトグル ボタンを備えたツールバーがあります (クリックしたボタンの効果が必要なため、トグルを使用しました)

しかし、ボタンをクリックすると、一度にアクティブにできるボタンは 1 つだけなので、残りのボタンの切り替えを解除したい (たとえば、ズームインとズームアウトを同時に行うことはできません)。

どうすればできますか？

http://77.235.53.170/split/split.htm

テスト用の JSFiddle の例:

http://jsfiddle.net/SDN2e/

ありがとうございました。

Answer 1

同じシナリオで、次のようなカスタマイズ ウィジェットを作成していました (これを ButtonSelector と呼びます)。

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/form/ToggleButton",
    "put-selector/put"
], function (declare, _WidgetBase, ToggleButton, put) {


    ///////////////////////////////////////////////////
    //
    // Define a generic Button style selector
    //
    ////////////////////////////////////////////////////
    return declare([_WidgetBase], {

        valueAttr: 'value',
        labelAttr: 'label',
        titleAttr: 'title',
        data: [],
        selectedValue: null,

        postCreate: function () {

            this.inherited(arguments);

            this.containerDiv = put(this.domNode, "div.wpt-button-selector");
            this.buttons = [];

            var getClickHandler = function (_this, _item){
                return function(evt){
                    _this.setSelectedValue(_item[_this.valueAttr]);
                };    
            } ;   

            for (var index = 0; index < this.data.length; index++) {
                var item = this.data[index];

                this.buttons.push( new ToggleButton({
                    label:item[this.labelAttr] || "",
                    title:item[this.titleAttr]||"",
                    iconClass: item.iconClass,
                    checked: item[this.valueAttr] === this.selectedValue,
                    onClick:getClickHandler(this,item)
                }, put(this.containerDiv, "span")));
            }
        },

        getSelectedValue: function () {
            return this.selectedValue;
        },

        setSelectedValue: function (newValue) {
            if (this.selectedValue != newValue) {
                this.selectedValue = newValue;
                this.selectionChanged(newValue);
            }
            this.refresh();
        },

        getSelectedIndex: function () {

            for (var i = 0; i < this.data.length; i++) {
                if (this.data[i][this.valueAttr] === this.selectedValue) {
                    return i;
                }
            }
            return -1;
        },

        refresh: function () {

            for (var i = 0; i < this.data.length; i++) {
                this.buttons[i].set("checked", 
                    this.data[i][this.valueAttr] === this.selectedValue);
            }
        },

        //please overwrite o provide really handler
        selectionChanged: function (selectedValue) {

        }
    }); // End of ButtonSelector Definition

});

次に、次のように使用できます。

    new ButtonSelector({
        data: [{
            value: value1,  
            iconClass: img1,
            title: Title1
        }, {
            value: value2,
            iconClass: img2,
            title: Title2
        }, {
            value: value3,
            iconClass: img3,
            title: Title3
        }],
        selectionChanged: function (value) {
              // you logic to handle change
        }
    }, put(toolBar.containerNode, "div div"))
    .setSelectedValue(yourInitialvalue);