library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Menu: Added autoCollapse as the default and added a unit test

Browse Source
This commit is contained in:
kborchers 2011-09-12 08:43:49 -05:00
parent 38028f6de1
commit 94317d7aa4
2 changed files with 48 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
tests/unit/menu/menu_events.js
View File

@ -41,6 +41,25 @@ test( "handle blur: click", function() {
$("#remove").remove(); $("#remove").remove();
}); });
asyncTest( "handle submenu auto collapse: mouseleave", function() {
expect( 4 );
var $menu = $( "#menu2" ).menu();
$menu.find( "li:nth-child(7)" ).trigger( "mouseover" );
setTimeout(function() {
equal( $menu.find( "ul[aria-expanded='true']" ).length, 1, "first submenu expanded" );
$menu.find( "li:nth-child(7) li:first" ).trigger( "mouseover" );
setTimeout(function() {
equal( $menu.find( "ul[aria-expanded='true']" ).length, 2, "second submenu expanded" );
$menu.find( "ul[aria-expanded='true']:first" ).trigger( "mouseleave" );
equal( $menu.find( "ul[aria-expanded='true']" ).length, 1, "second submenu collapsed" );
$menu.trigger( "mouseleave" );
equal( $menu.find( "ul[aria-expanded='true']" ).length, 0, "first submenu collapsed" );
start();
}, 400);
}, 200);
});
test("handle keyboard navigation on menu without scroll and without submenus", function() { test("handle keyboard navigation on menu without scroll and without submenus", function() {
expect(12); expect(12);
var element = $('#menu1').menu({ var element = $('#menu1').menu({

41
ui/jquery.ui.menu.js vendored
View File

@ -62,6 +62,8 @@ $.widget( "ui.menu", {
target.siblings().children( ".ui-state-active" ).removeClass( "ui-state-active" ); target.siblings().children( ".ui-state-active" ).removeClass( "ui-state-active" );
this.focus( event, target ); this.focus( event, target );
}, },
"mouseleave": "_mouseleave",
"mouseleave .ui-menu": "_mouseleave",
"mouseout .ui-menu-item": "blur", "mouseout .ui-menu-item": "blur",
"focus": function( event ) { "focus": function( event ) {
this.focus( event, $( event.target ).children( ".ui-menu-item:first" ) ); this.focus( event, $( event.target ).children( ".ui-menu-item:first" ) );
@ -346,21 +348,30 @@ $.widget( "ui.menu", {
}, },
collapseAll: function( event ) { collapseAll: function( event ) {
this.element var currentMenu = false;
.find( "ul" ) if ( event ) {
.hide() var target = $( event.target );
.attr( "aria-hidden", "true" ) if ( target.is( "ui.menu" ) ) {
.attr( "aria-expanded", "false" ) currentMenu = target;
.end() } else if ( target.closest( ".ui-menu" ).length ) {
.find( "a.ui-state-active" ) currentMenu = target.closest( ".ui-menu" );
.removeClass( "ui-state-active" ); }
}
this._close( currentMenu );
if( !currentMenu ) {
this.blur( event ); this.blur( event );
this.activeMenu = this.element; this.activeMenu = this.element;
}
}, },
_close: function() { _close: function( startMenu ) {
this.active.parent() if( !startMenu ) {
startMenu = this.active ? this.active.parent() : this.element;
}
startMenu
.find( "ul" ) .find( "ul" )
.hide() .hide()
.attr( "aria-hidden", "true" ) .attr( "aria-hidden", "true" )
@ -373,10 +384,7 @@ $.widget( "ui.menu", {
collapse: function( event ) { collapse: function( event ) {
var newItem = this.active && this.active.parents("li:not(.ui-menubar-item)").first(); var newItem = this.active && this.active.parents("li:not(.ui-menubar-item)").first();
if ( newItem && newItem.length ) { if ( newItem && newItem.length ) {
this.active.parent() this._close();
.attr("aria-hidden", "true")
.attr("aria-expanded", "false")
.hide();
this.focus( event, newItem ); this.focus( event, newItem );
return true; return true;
} }
@ -486,6 +494,11 @@ $.widget( "ui.menu", {
return this.element.height() < this.element.prop( "scrollHeight" ); return this.element.height() < this.element.prop( "scrollHeight" );
}, },
_mouseleave: function( event ) {
this.collapseAll( event );
this.blur();
},
select: function( event ) { select: function( event ) {
// save active reference before collapseAll triggers blur // save active reference before collapseAll triggers blur
var ui = { var ui = {