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:
Any help appreciated.
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.