如何在dijit ToolBar中一次只切換一個按鈕？

Question

我有3個切換按鈕（我用的切換，因爲我想點擊按鈕的效果）

但是一個工具欄，一旦我點擊一個按鈕，我想untoggle休息，因爲只有1個按鈕，可以在同一時間內（例如，您無法同時放大和縮小）

我該怎麼做？

http://77.235.53.170/split/split.htm 

而且例如的jsfiddle測試：

http://jsfiddle.net/SDN2e/

謝謝。

Answer 1

對於相同的情況下，我曾經創造了一個自定義窗口小部件一樣（我叫它按鈕選擇器）：

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