0

Dojoを使用してツールバー内にDropDownButtonを作成しています。ツールバーとボタンは、次のように動的に作成されます。

this.widget = new Toolbar({ style: "background:black;" }, "toolbar");
this.dropMenu = new DropDownMenu({tooltip : "ToolTip", style: "display: none;"});
this.button = new DropDownButton({dropDown: this.dropMenu});
this.button.set('label', '<img src="data:image/png;base64,'+ this.icon + '"/>');
this.widget.addChild(this.button);

上記のコードは、ボタンのlabelプロパティにimg srcを設定することにより、base64でエンコードされた文字列からボタンの一部としてアイコンを動的に作成していることに注意してください。

DropDownButtonの「label」要素のクリックとボタンの下矢印のクリックを区別したいのですが、これが可能かどうかはわかりません。つまり、ラベルをクリックすると、onClickがキャプチャされますが、ドロップダウンは表示されません。ただし、下矢印をクリックするか、ボタンの他​​の場所をクリックすると、ドロップダウンが表示されます。

1つの代替方法は、これを標準のボタンに分割し、次にそれに隣接するドロップダウンボタンを分割することですが、単一の標準のDropDownButtonからこれを行う方法があるかどうか疑問に思っています。

4

1 に答える 1

3

クリックされた要素のdownarrowまたはbuttontextクラスかどうかを確認します。イベントの「フロー」に適切にフックするには、クラス関数_onDropDownMouseDownをオーバーライドする必要があります

var customDropDownButton = declare("customDropDownButton", [ DropDownButton ], {

    toggleDropDown: function() {
        console.log('toggling'); 
        this.inherited(arguments); 
    },
    _onDropDownMouseDown: function(evt) {
        console.log(arguments, evt.srcElement.className);

        if (/dijitButtonText/.test(evt.srcElement.className)) {
            // negate popup functionality 
            console.log('negating');
            return false;
        }
        this.inherited(arguments);
        return true;
    }

});
var b = new customDropDownButton({
    label: "hello!",
    name: "programmatic1",
    dropDown: someMenu
});

または、ポップアップを表示してすぐに閉じることができる場合、簡単な方法は次のとおりです。

var b = new DropDownButton({
    label: 'hello!',
    name: "programmatic2",
    dropDown: someMenu,

    onClick: function(evt) {
        if(/dijitButtonText/.test(evt.srcElement.className)) {
             // negate popup
             popup.close(this.dropDown);
        }
    }
}, 'button');
于 2012-09-25T21:03:57.967 に答える