Skip to content

Commit 31e705a

Browse files
kborcherskborchers
committed
Menu: Add items option for better definition of menu items in non parent-child structures
1 parent e08791d commit 31e705a

5 files changed

Lines changed: 96 additions & 13 deletions

File tree

‎tests/unit/menu/menu.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -255,6 +255,49 @@
255255
<li class="foo">Saarland</li>
256256
</ul>
257257

258+
<ul id="menu7">
259+
<li class="ui-menu-group"><strong>Group 1</strong></li>
260+
<li>Aberdeen</li>
261+
<li>Ada</li>
262+
<li>Adamsville</li>
263+
<li>Addyston</li>
264+
<li></li>
265+
<li class="ui-menu-group"><strong>Group 2</strong></li>
266+
<li>Delphi
267+
<ul>
268+
<li>Ada</li>
269+
<li>Saarland</li>
270+
<li>Salzburg</li>
271+
</ul>
272+
</li>
273+
<li>Saarland</li>
274+
<li>---</li>
275+
<li class="ui-menu-group"><strong>Group 3</strong></li>
276+
<li>Salzburg
277+
<ul>
278+
<li>Delphi
279+
<ul>
280+
<li>Ada</li>
281+
<li> - </li>
282+
<li>Saarland</li>
283+
<li>&mdash;</li>
284+
<li>Salzburg</li>
285+
<li>&ndash;</li>
286+
</ul>
287+
</li>
288+
<li>Delphi
289+
<ul>
290+
<li>Ada</li>
291+
<li>Saarland</li>
292+
<li>Salzburg</li>
293+
</ul>
294+
</li>
295+
<li>Perch</li>
296+
</ul>
297+
</li>
298+
<li>Amesville</li>
299+
</ul>
300+
258301
</div>
259302
</body>
260303
</html>

‎tests/unit/menu/menu_common.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ TestHelpers.commonWidgetTests( "menu", {
44
icons: {
55
submenu: "ui-icon-carat-1-e"
66
},
7+
items: "> *",
78
menus: "ul",
89
position: {
910
my: "left top",

‎tests/unit/menu/menu_events.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -577,6 +577,37 @@ asyncTest( "handle keyboard navigation and mouse click on menu with disabled ite
577577
}
578578
});
579579

580+
asyncTest( "handle keyboard navigation and mouse click on menu with dividers and group labels", function() {
581+
expect( 2 );
582+
var element = $( "#menu7" ).menu({
583+
items: "> :not('.ui-menu-group')",
584+
select: function( event, ui ) {
585+
log( $( ui.item[0] ).text() );
586+
},
587+
focus: function( event ) {
588+
log( $( event.target ).find( ".ui-state-focus" ).index());
589+
}
590+
});
591+
592+
log( "keydown", true );
593+
element.one( "menufocus", function() {
594+
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
595+
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
596+
equal( logOutput(), "keydown,2,Ada", "Keydown skips initial group label" );
597+
setTimeout( menukeyboard1, 50 );
598+
});
599+
element.focus();
600+
601+
function menukeyboard1() {
602+
log( "keydown", true );
603+
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
604+
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
605+
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
606+
equal( logOutput(), "keydown,3,4,7", "Keydown focus skips divider and group label" );
607+
start();
608+
}
609+
});
610+
580611
asyncTest( "handle keyboard navigation with spelling of menu items", function() {
581612
expect( 2 );
582613
var element = $( "#menu2" ).menu({

‎tests/visual/menu/menu.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
$( "<p>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
1616
}
1717

18-
$( "#menu1, #menu2, #menu3, .menu4, #menu7" ).menu({
18+
$( "#menu1, #menu2, #menu3, .menu4" ).menu({
1919
select: logger
2020
});
2121

@@ -29,6 +29,11 @@
2929
select: logger,
3030
icon: "ui-icon-carat-1-s"
3131
});
32+
33+
$( "#menu7" ).menu({
34+
items: "> :not('.ui-menu-group')",
35+
select: logger
36+
});
3237
});
3338
</script>
3439
<style>
@@ -237,7 +242,7 @@ <h2>Menu with custom markup, multi-line items and a custom submenu icon</h2>
237242
</div>
238243
</div>
239244

240-
<h2>Inline with dividers and elements without anchors</h2>
245+
<h2>Inline with dividers and group labels</h2>
241246
<ul id="menu7">
242247
<li class="ui-menu-group"><strong>Group 1</strong></li>
243248
<li>Aberdeen</li>

‎ui/jquery.ui.menu.js‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ $.widget( "ui.menu", {
2323
icons: {
2424
submenu: "ui-icon-carat-1-e"
2525
},
26+
items: "> *",
2627
menus: "ul",
2728
position: {
2829
my: "left top",
@@ -110,7 +111,7 @@ $.widget( "ui.menu", {
110111
focus: function( event, keepActiveItem ) {
111112
// If there's already an active item, keep it active
112113
// If not, activate the first item
113-
var item = this.active || this.element.children( ".ui-menu-item" ).eq( 0 );
114+
var item = this.active || this.element.find( this.options.items ).eq( 0 );
114115

115116
if ( !keepActiveItem ) {
116117
this.focus( event, item );
@@ -234,7 +235,7 @@ $.widget( "ui.menu", {
234235
}
235236

236237
regex = new RegExp( "^" + escape( character ), "i" );
237-
match = this.activeMenu.children( ".ui-menu-item" ).filter(function() {
238+
match = this.activeMenu.find( this.options.items ).filter(function() {
238239
return regex.test( $( this ).text() );
239240
});
240241
match = skip && match.index( this.active.next() ) !== -1 ?
@@ -246,7 +247,7 @@ $.widget( "ui.menu", {
246247
if ( !match.length ) {
247248
character = String.fromCharCode( event.keyCode );
248249
regex = new RegExp( "^" + escape( character ), "i" );
249-
match = this.activeMenu.children( ".ui-menu-item" ).filter(function() {
250+
match = this.activeMenu.find( this.options.items ).filter(function() {
250251
return regex.test( $( this ).text() );
251252
});
252253
}
@@ -283,6 +284,7 @@ $.widget( "ui.menu", {
283284

284285
refresh: function() {
285286
var menus,
287+
items,
286288
icon = this.options.icons.submenu,
287289
submenus = this.element.find( this.options.menus );
288290

@@ -311,9 +313,10 @@ $.widget( "ui.menu", {
311313
});
312314

313315
menus = submenus.add( this.element );
316+
items = menus.find( this.options.items );
314317

315-
// Initialize unlinked menu-items containing spaces and/or dashes only as dividers
316-
menus.children( ":not(.ui-menu-item)" ).each(function() {
318+
// Initialize menu-items containing spaces and/or dashes only as dividers
319+
items.not( ".ui-menu-item" ).each(function() {
317320
var item = $( this );
318321
// hyphen, em dash, en dash
319322
if ( !/[^\-\u2014\u2013\s]/.test( item.text() ) ) {
@@ -322,7 +325,7 @@ $.widget( "ui.menu", {
322325
});
323326

324327
// Don't refresh list items that are already adapted
325-
menus.children( ":not(.ui-menu-item,.ui-menu-divider)" )
328+
items.not( ".ui-menu-item, .ui-menu-divider" )
326329
.addClass( "ui-menu-item" )
327330
.uniqueId()
328331
.addClass( "ui-corner-all" )
@@ -332,7 +335,7 @@ $.widget( "ui.menu", {
332335
});
333336

334337
// Add aria-disabled attribute to any disabled menu item
335-
menus.children( ".ui-state-disabled" ).attr( "aria-disabled", "true" );
338+
items.filter( ".ui-state-disabled" ).attr( "aria-disabled", "true" );
336339

337340
// If the active item has been removed, blur the menu
338341
if ( this.active && !$.contains( this.element[ 0 ], this.active[ 0 ] ) ) {
@@ -516,7 +519,7 @@ $.widget( "ui.menu", {
516519
var newItem = this.active &&
517520
this.active
518521
.children( ".ui-menu " )
519-
.children( ".ui-menu-item" )
522+
.find( this.options.items )
520523
.first();
521524

522525
if ( newItem && newItem.length ) {
@@ -559,7 +562,7 @@ $.widget( "ui.menu", {
559562
}
560563
}
561564
if ( !next || !next.length || !this.active ) {
562-
next = this.activeMenu.children( ".ui-menu-item" )[ filter ]();
565+
next = this.activeMenu.find( this.options.items )[ filter ]();
563566
}
564567

565568
this.focus( event, next );
@@ -585,7 +588,7 @@ $.widget( "ui.menu", {
585588

586589
this.focus( event, item );
587590
} else {
588-
this.focus( event, this.activeMenu.children( ".ui-menu-item" )
591+
this.focus( event, this.activeMenu.find( this.options.items )
589592
[ !this.active ? "first" : "last" ]() );
590593
}
591594
},
@@ -609,7 +612,7 @@ $.widget( "ui.menu", {
609612

610613
this.focus( event, item );
611614
} else {
612-
this.focus( event, this.activeMenu.children( ".ui-menu-item" ).first() );
615+
this.focus( event, this.activeMenu.find( this.options.items ).first() );
613616
}
614617
},
615618

0 commit comments

Comments
 (0)