toolbar - 如何在 dijit 工具栏中一次只切换一个按钮？

Question

我有一个带有 3 个切换按钮的工具栏（我使用切换是因为我想要点击按钮的效果）

但是，一旦我单击一个按钮，我就想取消其余按钮，因为一次只能激活一个按钮（例如，您不能同时放大和缩小）

我该怎么做 ？

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);