0

jQuery UI のMenuを拡張してカスタム ウィジェットを作成しました。基本的にui.selectmenu<select>のように HTML 要素を操作する必要がありますが、サブメニューにオプションを表示します。

$.widget("market.myMenu",$.ui.menu, {
// ...
_attachEvents: function(){
    var self = this;
    // menu is initially hidden
    self.menuWrapper.hide();
    self.button.on('click', function(){
        if (self.originalSelect.is(':disabled')) {
            self.disable();
        } else {                
            self.menuWrapper.toggle();
        }
        return false;
    });

    $(document).on('click', function(){
        self.menuWrapper.hide();
    });             
},
//...
  }
}

このウィジェットが次のような複数の要素に接続されている場合に問題が発生します。

someSelect.myMenu();
//...
anotherSelect.myMenu();

_attachEvents()問題はタイトルに記載されており、メソッドで確認できます。

  1. ユーザーがクリックすると、必要に応じsomeSelectて開きます
  2. ユーザーがクリックすると、anotherSelectそれも開きます
  3. someSelectafter ステップ2は閉じる必要がありますが、そうではありません。

では、そのようなケースを確認してこの問題を解決するにはどうすればよいでしょうか?

編集：

  1. this.originalSelect<select>HTML要素です
  2. this.buttondiv要素です。選択したオプションのテキストが表示される場所 (基本的には表示されるものと同じui.selectmenu);
4

2 に答える 2

1

クラスを使用してメニューの状態を追跡し、開いているインスタンスを対象にすることができます。たとえば、次のようなものです。

_attachEvents: function(){
    var self = this;
    // menu is initially hidden
    self.menuWrapper.hide();
    self.button.on('click', function(){
        if (self.originalSelect.is(':disabled')) {
            self.disable();
        } else {
            // before you open a menu, you close the opened ones
            $('menu-opened').each(function(){
                $(this).myMenu('instance').hideWrapper();
            });
            self.menuWrapper.toggleClass('menu-opened');                
            self.menuWrapper.toggle();
        }
        return false;
    });

    $(document).on('click', function(){
        self.menuWrapper.hide();
    });             
},

hideWrapper: function(){
    var self = this;
    self.menuWrapper.hide();
    self.menuWrapper.removeClass('menu-opened');
}
于 2015-10-24T12:35:36.830 に答える
0

私は解決策を見つけました。これは、css マーカー クラスを使用するというJulien Grégoireの提案に基づいています。

私がやっていることは、要素にクラスui-mymenu-wrapを追加することです。self.menuWrapperしたがって、すべてのウィジェットにはこれらの識別子があります。次に行うことは、1 つのウィジェットをクリックした後、他のすべてのメニューを閉じてから、クリックしたウィジェットを開いたり閉じたりすることです。

_attachEvents: function(){
    var self = this;
    // menu is initially hidden
    self.menuWrapper.hide();
    self.button.on('click', function(event){
        if (self.originalSelect.is(':disabled')) {
            self.disable();
        } else {
            // hide all opened menus
            $('.ui-mymenu-wrap').not(self.menuWrapper).hide();
            self.menuWrapper.toggle();                  
        }
        return false;
    });

    $(document).on('click', function(){
        self.menuWrapper.hide();
    });             
},
于 2015-10-29T08:34:46.693 に答える