4

jQuery UI メニュー ウィジェットを使用してポップアップ メニューを作成する方法を理解しようとしています。

探し回った後、最終的に、私が望むことを行う次のデモを見つけました。

http://view.jqueryui.com/menubar/demos/popup/popup-menu.html

ただし、このデモを理解するのに少し苦労しています。例えば：

  1. ボタンがクリックされる前にメニューが非表示になっているのは何ですか?
  2. メニューが開いているときにページの別の場所をクリックすると、メニューが閉じてしまう原因は何ですか?

どんな助けでも感謝します。

4

3 に答える 3

2

このデモでは、jquery.ui.menu.js の修正バージョンとポップアップ ウィジェットを使用しています: http://view.jqueryui.com/menubar/ui/jquery.ui.popup.js

1.9 でリリースされたメニュー自体には、ポップアップとして表示するためのコードがありません。安定したリリースで適切な解決策が提供されるまで、ポップアップ メニューを作成するカスタム コードを作成することをお勧めします。

于 2012-12-05T13:49:02.900 に答える
0

私はこれがあなたが探しているものかもしれないと信じています. を呼び出すと、(デレクが言ったように) クラス名の設定など.menu()、関数内で多くのことがトリガーされ_create()ます。次に、 の 123-135 行でjquery.ui.menu.js、これが発生します。

    this.refresh();

    // Clicks outside of a menu collapse any open menus
    this._on( this.document, {
        click: function( event ) {
            if ( !$( event.target ).closest( ".ui-menu" ).length ) {
                this.collapseAll( event );
            }

            // Reset the mouseHandled flag
            mouseHandled = false;
        }
    });

2 番目の部分では、ユーザーがメニュー ( )this.documentの外側のページ ( ) をクリックしたときに、すべてのメニューが折りたたまれていることを確認します。これで 2 番目の質問に答えることができます。.ui-menuthis.collapseAll()this._close()hide()

最初の質問については、refresh()関数が最初に行うことは次のとおりです。

    // Initialize nested menus
    var menus,
        icon = this.options.icons.submenu,
        submenus = this.element.find( this.options.menus + ":not(.ui-menu)" )
            .addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
            .hide()
            .attr({
                role: this.options.role,
                "aria-hidden": "true",
                "aria-expanded": "false"
            });

これにより、以前に初期化されていないすべてのサブメニュー (この場合は から来ているため、すべて_create()) が検出され、非表示も含めて初期化されます。

于 2012-12-04T08:53:27.067 に答える