mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-10-05 01:44:18 +00:00
Menu: Add items option for better definition of menu items in non parent-child structures
This commit is contained in:
parent
e08791d2c1
commit
31e705ab32
@ -255,6 +255,49 @@
|
|||||||
<li class="foo">Saarland</li>
|
<li class="foo">Saarland</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
<ul id="menu7">
|
||||||
|
<li class="ui-menu-group"><strong>Group 1</strong></li>
|
||||||
|
<li>Aberdeen</li>
|
||||||
|
<li>Ada</li>
|
||||||
|
<li>Adamsville</li>
|
||||||
|
<li>Addyston</li>
|
||||||
|
<li></li>
|
||||||
|
<li class="ui-menu-group"><strong>Group 2</strong></li>
|
||||||
|
<li>Delphi
|
||||||
|
<ul>
|
||||||
|
<li>Ada</li>
|
||||||
|
<li>Saarland</li>
|
||||||
|
<li>Salzburg</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>Saarland</li>
|
||||||
|
<li>---</li>
|
||||||
|
<li class="ui-menu-group"><strong>Group 3</strong></li>
|
||||||
|
<li>Salzburg
|
||||||
|
<ul>
|
||||||
|
<li>Delphi
|
||||||
|
<ul>
|
||||||
|
<li>Ada</li>
|
||||||
|
<li> - </li>
|
||||||
|
<li>Saarland</li>
|
||||||
|
<li>—</li>
|
||||||
|
<li>Salzburg</li>
|
||||||
|
<li>–</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>Delphi
|
||||||
|
<ul>
|
||||||
|
<li>Ada</li>
|
||||||
|
<li>Saarland</li>
|
||||||
|
<li>Salzburg</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>Perch</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>Amesville</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -4,6 +4,7 @@ TestHelpers.commonWidgetTests( "menu", {
|
|||||||
icons: {
|
icons: {
|
||||||
submenu: "ui-icon-carat-1-e"
|
submenu: "ui-icon-carat-1-e"
|
||||||
},
|
},
|
||||||
|
items: "> *",
|
||||||
menus: "ul",
|
menus: "ul",
|
||||||
position: {
|
position: {
|
||||||
my: "left top",
|
my: "left top",
|
||||||
|
@ -577,6 +577,37 @@ asyncTest( "handle keyboard navigation and mouse click on menu with disabled ite
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
asyncTest( "handle keyboard navigation and mouse click on menu with dividers and group labels", function() {
|
||||||
|
expect( 2 );
|
||||||
|
var element = $( "#menu7" ).menu({
|
||||||
|
items: "> :not('.ui-menu-group')",
|
||||||
|
select: function( event, ui ) {
|
||||||
|
log( $( ui.item[0] ).text() );
|
||||||
|
},
|
||||||
|
focus: function( event ) {
|
||||||
|
log( $( event.target ).find( ".ui-state-focus" ).index());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
log( "keydown", true );
|
||||||
|
element.one( "menufocus", function() {
|
||||||
|
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
|
||||||
|
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
|
||||||
|
equal( logOutput(), "keydown,2,Ada", "Keydown skips initial group label" );
|
||||||
|
setTimeout( menukeyboard1, 50 );
|
||||||
|
});
|
||||||
|
element.focus();
|
||||||
|
|
||||||
|
function menukeyboard1() {
|
||||||
|
log( "keydown", true );
|
||||||
|
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
|
||||||
|
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
|
||||||
|
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
|
||||||
|
equal( logOutput(), "keydown,3,4,7", "Keydown focus skips divider and group label" );
|
||||||
|
start();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
asyncTest( "handle keyboard navigation with spelling of menu items", function() {
|
asyncTest( "handle keyboard navigation with spelling of menu items", function() {
|
||||||
expect( 2 );
|
expect( 2 );
|
||||||
var element = $( "#menu2" ).menu({
|
var element = $( "#menu2" ).menu({
|
||||||
|
@ -15,7 +15,7 @@
|
|||||||
$( "<p>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
|
$( "<p>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
|
||||||
}
|
}
|
||||||
|
|
||||||
$( "#menu1, #menu2, #menu3, .menu4, #menu7" ).menu({
|
$( "#menu1, #menu2, #menu3, .menu4" ).menu({
|
||||||
select: logger
|
select: logger
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -29,6 +29,11 @@
|
|||||||
select: logger,
|
select: logger,
|
||||||
icon: "ui-icon-carat-1-s"
|
icon: "ui-icon-carat-1-s"
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$( "#menu7" ).menu({
|
||||||
|
items: "> :not('.ui-menu-group')",
|
||||||
|
select: logger
|
||||||
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
@ -237,7 +242,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>Inline with dividers and elements without anchors</h2>
|
<h2>Inline with dividers and group labels</h2>
|
||||||
<ul id="menu7">
|
<ul id="menu7">
|
||||||
<li class="ui-menu-group"><strong>Group 1</strong></li>
|
<li class="ui-menu-group"><strong>Group 1</strong></li>
|
||||||
<li>Aberdeen</li>
|
<li>Aberdeen</li>
|
||||||
|
25
ui/jquery.ui.menu.js
vendored
25
ui/jquery.ui.menu.js
vendored
@ -23,6 +23,7 @@ $.widget( "ui.menu", {
|
|||||||
icons: {
|
icons: {
|
||||||
submenu: "ui-icon-carat-1-e"
|
submenu: "ui-icon-carat-1-e"
|
||||||
},
|
},
|
||||||
|
items: "> *",
|
||||||
menus: "ul",
|
menus: "ul",
|
||||||
position: {
|
position: {
|
||||||
my: "left top",
|
my: "left top",
|
||||||
@ -110,7 +111,7 @@ $.widget( "ui.menu", {
|
|||||||
focus: function( event, keepActiveItem ) {
|
focus: function( event, keepActiveItem ) {
|
||||||
// If there's already an active item, keep it active
|
// If there's already an active item, keep it active
|
||||||
// If not, activate the first item
|
// If not, activate the first item
|
||||||
var item = this.active || this.element.children( ".ui-menu-item" ).eq( 0 );
|
var item = this.active || this.element.find( this.options.items ).eq( 0 );
|
||||||
|
|
||||||
if ( !keepActiveItem ) {
|
if ( !keepActiveItem ) {
|
||||||
this.focus( event, item );
|
this.focus( event, item );
|
||||||
@ -234,7 +235,7 @@ $.widget( "ui.menu", {
|
|||||||
}
|
}
|
||||||
|
|
||||||
regex = new RegExp( "^" + escape( character ), "i" );
|
regex = new RegExp( "^" + escape( character ), "i" );
|
||||||
match = this.activeMenu.children( ".ui-menu-item" ).filter(function() {
|
match = this.activeMenu.find( this.options.items ).filter(function() {
|
||||||
return regex.test( $( this ).text() );
|
return regex.test( $( this ).text() );
|
||||||
});
|
});
|
||||||
match = skip && match.index( this.active.next() ) !== -1 ?
|
match = skip && match.index( this.active.next() ) !== -1 ?
|
||||||
@ -246,7 +247,7 @@ $.widget( "ui.menu", {
|
|||||||
if ( !match.length ) {
|
if ( !match.length ) {
|
||||||
character = String.fromCharCode( event.keyCode );
|
character = String.fromCharCode( event.keyCode );
|
||||||
regex = new RegExp( "^" + escape( character ), "i" );
|
regex = new RegExp( "^" + escape( character ), "i" );
|
||||||
match = this.activeMenu.children( ".ui-menu-item" ).filter(function() {
|
match = this.activeMenu.find( this.options.items ).filter(function() {
|
||||||
return regex.test( $( this ).text() );
|
return regex.test( $( this ).text() );
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -283,6 +284,7 @@ $.widget( "ui.menu", {
|
|||||||
|
|
||||||
refresh: function() {
|
refresh: function() {
|
||||||
var menus,
|
var menus,
|
||||||
|
items,
|
||||||
icon = this.options.icons.submenu,
|
icon = this.options.icons.submenu,
|
||||||
submenus = this.element.find( this.options.menus );
|
submenus = this.element.find( this.options.menus );
|
||||||
|
|
||||||
@ -311,9 +313,10 @@ $.widget( "ui.menu", {
|
|||||||
});
|
});
|
||||||
|
|
||||||
menus = submenus.add( this.element );
|
menus = submenus.add( this.element );
|
||||||
|
items = menus.find( this.options.items );
|
||||||
|
|
||||||
// Initialize unlinked menu-items containing spaces and/or dashes only as dividers
|
// Initialize menu-items containing spaces and/or dashes only as dividers
|
||||||
menus.children( ":not(.ui-menu-item)" ).each(function() {
|
items.not( ".ui-menu-item" ).each(function() {
|
||||||
var item = $( this );
|
var item = $( this );
|
||||||
// hyphen, em dash, en dash
|
// hyphen, em dash, en dash
|
||||||
if ( !/[^\-\u2014\u2013\s]/.test( item.text() ) ) {
|
if ( !/[^\-\u2014\u2013\s]/.test( item.text() ) ) {
|
||||||
@ -322,7 +325,7 @@ $.widget( "ui.menu", {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Don't refresh list items that are already adapted
|
// Don't refresh list items that are already adapted
|
||||||
menus.children( ":not(.ui-menu-item,.ui-menu-divider)" )
|
items.not( ".ui-menu-item, .ui-menu-divider" )
|
||||||
.addClass( "ui-menu-item" )
|
.addClass( "ui-menu-item" )
|
||||||
.uniqueId()
|
.uniqueId()
|
||||||
.addClass( "ui-corner-all" )
|
.addClass( "ui-corner-all" )
|
||||||
@ -332,7 +335,7 @@ $.widget( "ui.menu", {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Add aria-disabled attribute to any disabled menu item
|
// Add aria-disabled attribute to any disabled menu item
|
||||||
menus.children( ".ui-state-disabled" ).attr( "aria-disabled", "true" );
|
items.filter( ".ui-state-disabled" ).attr( "aria-disabled", "true" );
|
||||||
|
|
||||||
// If the active item has been removed, blur the menu
|
// If the active item has been removed, blur the menu
|
||||||
if ( this.active && !$.contains( this.element[ 0 ], this.active[ 0 ] ) ) {
|
if ( this.active && !$.contains( this.element[ 0 ], this.active[ 0 ] ) ) {
|
||||||
@ -516,7 +519,7 @@ $.widget( "ui.menu", {
|
|||||||
var newItem = this.active &&
|
var newItem = this.active &&
|
||||||
this.active
|
this.active
|
||||||
.children( ".ui-menu " )
|
.children( ".ui-menu " )
|
||||||
.children( ".ui-menu-item" )
|
.find( this.options.items )
|
||||||
.first();
|
.first();
|
||||||
|
|
||||||
if ( newItem && newItem.length ) {
|
if ( newItem && newItem.length ) {
|
||||||
@ -559,7 +562,7 @@ $.widget( "ui.menu", {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
if ( !next || !next.length || !this.active ) {
|
if ( !next || !next.length || !this.active ) {
|
||||||
next = this.activeMenu.children( ".ui-menu-item" )[ filter ]();
|
next = this.activeMenu.find( this.options.items )[ filter ]();
|
||||||
}
|
}
|
||||||
|
|
||||||
this.focus( event, next );
|
this.focus( event, next );
|
||||||
@ -585,7 +588,7 @@ $.widget( "ui.menu", {
|
|||||||
|
|
||||||
this.focus( event, item );
|
this.focus( event, item );
|
||||||
} else {
|
} else {
|
||||||
this.focus( event, this.activeMenu.children( ".ui-menu-item" )
|
this.focus( event, this.activeMenu.find( this.options.items )
|
||||||
[ !this.active ? "first" : "last" ]() );
|
[ !this.active ? "first" : "last" ]() );
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -609,7 +612,7 @@ $.widget( "ui.menu", {
|
|||||||
|
|
||||||
this.focus( event, item );
|
this.focus( event, item );
|
||||||
} else {
|
} else {
|
||||||
this.focus( event, this.activeMenu.children( ".ui-menu-item" ).first() );
|
this.focus( event, this.activeMenu.find( this.options.items ).first() );
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user