diff options
Diffstat (limited to 'ui/jquery.ui.menubar.js')
| -rw-r--r-- | ui/jquery.ui.menubar.js | 61 |
1 files changed, 44 insertions, 17 deletions
diff --git a/ui/jquery.ui.menubar.js b/ui/jquery.ui.menubar.js index 39e75924e..9af3aa080 100644 --- a/ui/jquery.ui.menubar.js +++ b/ui/jquery.ui.menubar.js @@ -20,6 +20,7 @@ $.widget( "ui.menubar", { version: "@VERSION", options: { + autoExpand: false, buttons: false, menuIcon: false, position: { @@ -48,15 +49,17 @@ $.widget( "ui.menubar", { }, select: function( event, ui ) { ui.item.parents( "ul.ui-menu:last" ).hide(); - that._trigger( "select", event, ui ); that._close(); // TODO what is this targetting? there's probably a better way to access it $(event.target).prev().focus(); + that._trigger( "select", event, ui ); } }) .hide() - .attr( "aria-hidden", "true" ) - .attr( "aria-expanded", "false" ) + .attr({ + "aria-hidden": "true", + "aria-expanded": "false" + }) .bind( "keydown.menubar", function( event ) { var menu = $( this ); if ( menu.is( ":hidden" ) ) @@ -89,7 +92,11 @@ $.widget( "ui.menubar", { that._close(); return; } - if ( ( that.open && event.type == "mouseenter" ) || event.type == "click" ) { + if ( ( that.open && event.type == "mouseenter" ) || event.type == "click" || that.options.autoExpand ) { + if( that.options.autoExpand ) { + clearTimeout( that.timer ); + } + that._open( event, menu ); } }) @@ -116,6 +123,22 @@ $.widget( "ui.menubar", { .attr( "aria-haspopup", "true" ) .wrapInner( "<span class='ui-button-text'></span>" ); + if ( that.options.autoExpand ) { + input.bind( "mouseleave.menubar", function( event ) { + that.timer = setTimeout( function() { + that._close(); + }, 150 ); + }); + menu.bind( "mouseleave.menubar", function( event ) { + that.timer = setTimeout( function() { + that._close(); + }, 150 ); + }) + .bind( "mouseenter.menubar", function( event ) { + clearTimeout( that.timer ); + }); + } + // TODO review if these options are a good choice, maybe they can be merged if ( that.options.menuIcon ) { input.addClass( "ui-state-default" ).append( "<span class='ui-button-icon-secondary ui-icon ui-icon-triangle-1-s'></span>" ); @@ -130,7 +153,7 @@ $.widget( "ui.menubar", { }); that._bind( { keydown: function( event ) { - if ( event.keyCode == $.ui.keyCode.ESCAPE && that.active && that.active.menu( "left", event ) !== true ) { + if ( event.keyCode == $.ui.keyCode.ESCAPE && that.active && that.active.menu( "collapse", event ) !== true ) { var active = that.active; that.active.blur(); that._close( event ); @@ -151,19 +174,19 @@ $.widget( "ui.menubar", { _destroy : function() { var items = this.element.children( "li" ) .removeClass( "ui-menubar-item" ) - .removeAttr( "role", "presentation" ) + .removeAttr( "role" ) .children( "button, a" ); this.element .removeClass( "ui-menubar ui-widget-header ui-helper-clearfix" ) - .removeAttr( "role", "menubar" ) + .removeAttr( "role" ) .unbind( ".menubar" ); items .unbind( ".menubar" ) .removeClass( "ui-button ui-widget ui-button-text-only ui-menubar-link ui-state-default" ) - .removeAttr( "role", "menuitem" ) - .removeAttr( "aria-haspopup", "true" ) + .removeAttr( "role" ) + .removeAttr( "aria-haspopup" ) // TODO unwrap? .children( "span.ui-button-text" ).each(function( i, e ) { var item = $( this ); @@ -175,8 +198,8 @@ $.widget( "ui.menubar", { this.element.find( ":ui-menu" ) .menu( "destroy" ) .show() - .removeAttr( "aria-hidden", "true" ) - .removeAttr( "aria-expanded", "false" ) + .removeAttr( "aria-hidden" ) + .removeAttr( "aria-expanded" ) .removeAttr( "tabindex" ) .unbind( ".menubar" ); }, @@ -185,10 +208,12 @@ $.widget( "ui.menubar", { if ( !this.active || !this.active.length ) return; this.active - .menu( "closeAll" ) + .menu( "collapseAll" ) .hide() - .attr( "aria-hidden", "true" ) - .attr( "aria-expanded", "false" ); + .attr({ + "aria-hidden": "true", + "aria-expanded": "false" + }); this.active .prev() .removeClass( "ui-state-active" ) @@ -205,10 +230,12 @@ $.widget( "ui.menubar", { // TODO refactor, almost the same as _close above, but don't remove tabIndex if ( this.active ) { this.active - .menu( "closeAll" ) + .menu( "collapseAll" ) .hide() - .attr( "aria-hidden", "true" ) - .attr( "aria-expanded", "false" ); + .attr({ + "aria-hidden": "true", + "aria-expanded": "false" + }); this.active .prev() .removeClass( "ui-state-active" ); |