Menu: Add items option for better definition of menu items in non parent-child structures

diff --git a/tests/unit/menu/menu.html b/tests/unit/menu/menu.html
index 7de175b3ca66a115529a66900619cd6e07604d89..a49c72a04fb2ebea38a6266126b2ef3434dad3cd 100644 (file)
--- a/tests/unit/menu/menu.html
+++ b/tests/unit/menu/menu.html
@@ -255,6 +255,49 @@
        <li class="foo">Saarland</li>
 </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>&mdash;</li>
+                                       <li>Salzburg</li>
+                                       <li>&ndash;</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>
 </body>
 </html>

diff --git a/tests/unit/menu/menu_common.js b/tests/unit/menu/menu_common.js
index 4a89a947a891ab556438239cce08c7225a9ee2a9..2404ebe020164b617bccdadbcf217b1fa030af85 100644 (file)
--- a/tests/unit/menu/menu_common.js
+++ b/tests/unit/menu/menu_common.js
@@ -4,6 +4,7 @@ TestHelpers.commonWidgetTests( "menu", {
                icons: {
                        submenu: "ui-icon-carat-1-e"
                },
+               items: "> *",
                menus: "ul",
                position: {
                        my: "left top",

diff --git a/tests/unit/menu/menu_events.js b/tests/unit/menu/menu_events.js
index 12bd5b7031035f4401bcca332cb7eee724c0897a..0b89b86ac7ec2f0fa5ea86ba999e71240f3b66b7 100644 (file)
--- a/tests/unit/menu/menu_events.js
+++ b/tests/unit/menu/menu_events.js
@@ -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() {
        expect( 2 );
        var element = $( "#menu2" ).menu({

diff --git a/tests/visual/menu/menu.html b/tests/visual/menu/menu.html
index f25163d5f6f0b3589cbc09256d45ab9a6edd6ede..1c203ef12af79f276e788b2cd11752878e76e9da 100644 (file)
--- a/tests/visual/menu/menu.html
+++ b/tests/visual/menu/menu.html
@@ -15,7 +15,7 @@
                        $( "<p>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
                }
 
-               $( "#menu1, #menu2, #menu3, .menu4, #menu7" ).menu({
+               $( "#menu1, #menu2, #menu3, .menu4" ).menu({
                        select: logger
                });
 
@@ -29,6 +29,11 @@
                        select: logger,
                        icon: "ui-icon-carat-1-s"
                });
+
+               $( "#menu7" ).menu({
+                       items: "> :not('.ui-menu-group')",
+                       select: logger
+               });
        });
        </script>
        <style>
@@ -237,7 +242,7 @@
        </div>
 </div>
 
-<h2>Inline with dividers and elements without anchors</h2>
+<h2>Inline with dividers and group labels</h2>
 <ul id="menu7">
        <li class="ui-menu-group"><strong>Group 1</strong></li>
        <li>Aberdeen</li>

diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js
index 0acba14bc10682ec4058ec8a0c223fe617296a02..059f80b30e9bfdef22d94be7af4870a631b3ea11 100644 (file)
--- a/ui/jquery.ui.menu.js
+++ b/ui/jquery.ui.menu.js
@@ -23,6 +23,7 @@ $.widget( "ui.menu", {
                icons: {
                        submenu: "ui-icon-carat-1-e"
                },
+               items: "> *",
                menus: "ul",
                position: {
                        my: "left top",
@@ -110,7 +111,7 @@ $.widget( "ui.menu", {
                        focus: function( event, keepActiveItem ) {
                                // If there's already an active item, keep it active
                                // 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 ) {
                                        this.focus( event, item );
@@ -234,7 +235,7 @@ $.widget( "ui.menu", {
                        }
 
                        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() );
                        });
                        match = skip && match.index( this.active.next() ) !== -1 ?
@@ -246,7 +247,7 @@ $.widget( "ui.menu", {
                        if ( !match.length ) {
                                character = String.fromCharCode( event.keyCode );
                                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() );
                                });
                        }
@@ -283,6 +284,7 @@ $.widget( "ui.menu", {
 
        refresh: function() {
                var menus,
+                       items,
                        icon = this.options.icons.submenu,
                        submenus = this.element.find( this.options.menus );
 
@@ -311,9 +313,10 @@ $.widget( "ui.menu", {
                        });
 
                menus = submenus.add( this.element );
+               items = menus.find( this.options.items );
 
-               // Initialize unlinked menu-items containing spaces and/or dashes only as dividers
-               menus.children( ":not(.ui-menu-item)" ).each(function() {
+               // Initialize menu-items containing spaces and/or dashes only as dividers
+               items.not( ".ui-menu-item" ).each(function() {
                        var item = $( this );
                        // hyphen, em dash, en dash
                        if ( !/[^\-\u2014\u2013\s]/.test( item.text() ) ) {
@@ -322,7 +325,7 @@ $.widget( "ui.menu", {
                });
 
                // 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" )
                        .uniqueId()
                        .addClass( "ui-corner-all" )
@@ -332,7 +335,7 @@ $.widget( "ui.menu", {
                        });
 
                // 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 ( this.active && !$.contains( this.element[ 0 ], this.active[ 0 ] ) ) {
@@ -516,7 +519,7 @@ $.widget( "ui.menu", {
                var newItem = this.active &&
                        this.active
                                .children( ".ui-menu " )
-                               .children( ".ui-menu-item" )
+                               .find( this.options.items )
                                .first();
 
                if ( newItem && newItem.length ) {
@@ -559,7 +562,7 @@ $.widget( "ui.menu", {
                        }
                }
                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 );
@@ -585,7 +588,7 @@ $.widget( "ui.menu", {
 
                        this.focus( event, item );
                } else {
-                       this.focus( event, this.activeMenu.children( ".ui-menu-item" )
+                       this.focus( event, this.activeMenu.find( this.options.items )
                                [ !this.active ? "first" : "last" ]() );
                }
        },
@@ -609,7 +612,7 @@ $.widget( "ui.menu", {
 
                        this.focus( event, item );
                } else {
-                       this.focus( event, this.activeMenu.children( ".ui-menu-item" ).first() );
+                       this.focus( event, this.activeMenu.find( this.options.items ).first() );
                }
        },