4

I'm trying to figure out how to make a pop-up menu using the jQuery UI menu widget.

After searching around, I finally found the following demo that does what I want:

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

However, I am having a little trouble understanding this demo. For example:

  1. What is making the menu hidden before any of the buttons are clicked?
  2. What is causing the menu to close when it's open and I click somewhere else on the page?

Any help appreciated.

Jonathan Wood
  • 65,341
  • 71
  • 269
  • 466
  • `What is making the menu hidden` Well, of course it is the jQuery UI making it hidden. – Derek 朕會功夫 Dec 04 '12 at 04:31
  • Was this intended to be helpful? Which jQuery UI function hides it and where does it get called? – Jonathan Wood Dec 04 '12 at 04:35
  • `Line 25: $("#button1").button().next().menu(...` It makes `#button1` a button, and make the next element the `menu`. – Derek 朕會功夫 Dec 04 '12 at 04:42
  • I can see it makes the button a trigger and the list the menu. But I don't see how that's related to what I asked. – Jonathan Wood Dec 04 '12 at 04:54
  • When you call `.menu()`, it triggers many things including hiding the menu and adding listeners, for example, it applies class names to the target element `line 45@jquery.ui.menu.js ...addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )` – Derek 朕會功夫 Dec 04 '12 at 05:00

3 Answers3

2

That demo uses a modified version of jquery.ui.menu.js along with the popup widget: http://view.jqueryui.com/menubar/ui/jquery.ui.popup.js

Menu itself, as released in 1.9, doesn't have any code for showing it as a popup. I recommend writing some custom code to build a popup menu, until a stable release offers a proper solution.

Jörn Zaefferer
  • 5,665
  • 3
  • 30
  • 34
2

The jQuery UI Popup - Popup Menu you referenced uses unreleased code as Jörn Zaefferer said. (Notice that Jörn is the same guy that closed the bug)

But there is an almost identical-looking solution in jQuery UI Button's Split Button example that doesn't use .popup() and does all the hiding etc. explicitly.

Perhaps you could use that as a starting point instead. I know I'm going to! ;-)

Peter V. Mørch
  • 13,830
  • 8
  • 69
  • 103
0

I believe this may be what you're looking for. When you call .menu(), lots of things are triggered in the _create() function (as Derek said), like setting class names etc. Then, at lines 123-135 in jquery.ui.menu.js, this happens:

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

The second part makes sure all menus are collapsed when the user clicks on the page (this.document) outside a menu (.ui-menu): this.collapseAll() is called, which calls this._close(), which in turn calls hide(). This should answer your second question.

As for your first question, The first thing the refresh() function does is:

    // 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"
            });

This finds all submenus not previously initialized (in this case all of them since we're coming from _create()) and initializes them, which includes hiding them.

Spiny Norman
  • 8,277
  • 1
  • 30
  • 55