]> source.dussan.org Git - jquery-ui.git/commitdiff
Menu: Wrap menu items in a <div>
authorTJ VanToll <tj.vantoll@gmail.com>
Sat, 25 Oct 2014 16:18:17 +0000 (09:18 -0700)
committerTJ VanToll <tj.vantoll@gmail.com>
Sat, 25 Oct 2014 17:10:30 +0000 (10:10 -0700)
This avoids styling issues where ui-state-focus rules apply to submenus.

Fixes #10162
Closes gh-1342

13 files changed:
demos/menu/categories.html
demos/menu/default.html
demos/menu/icons.html
tests/unit/menu/menu.html
tests/unit/menu/menu_common.js
tests/unit/menu/menu_core.js
tests/unit/menu/menu_events.js
tests/unit/menu/menu_methods.js
tests/unit/menu/menu_options.js
tests/unit/menu/menu_test_helpers.js
tests/visual/menu/menu.html
themes/base/menu.css
ui/menu.js

index c0e55d05a168f04a6455ea03f520f054f4616dde..213e97a4eb2820015348f1ca7f0dd0d5652e5b8d 100644 (file)
 <body>
 
 <ul id="menu">
-       <li class="ui-widget-header">Category 1</li>
-       <li>Option 1</li>
-       <li>Option 2</li>
-       <li>Option 3</li>
-       <li class="ui-widget-header">Category 2</li>    
-       <li>Option 4</li>
-       <li>Option 5</li>
-       <li>Option 6</li>
+       <li class="ui-widget-header"><div>Category 1</div></li>
+       <li><div>Option 1</div></li>
+       <li><div>Option 2</div></li>
+       <li><div>Option 3</div></li>
+       <li class="ui-widget-header"><div>Category 2</div></li>    
+       <li><div>Option 4</div></li>
+       <li><div>Option 5</div></li>
+       <li><div>Option 6</div></li>
 </ul>
 
 <div class="demo-description">
index 6da41e0163fa84c760f5a499d55df34da8c8d745..6c23c4e229132682158144f8dc82d3a0f19a42f0 100644 (file)
 <body>
 
 <ul id="menu">
-       <li class="ui-state-disabled">Aberdeen</li>
-       <li>Ada</li>
-       <li>Adamsville</li>
-       <li>Addyston</li>
-       <li>Delphi
+       <li class="ui-state-disabled"><div>Aberdeen</div></li>
+       <li><div>Ada</div></li>
+       <li><div>Adamsville</div></li>
+       <li><div>Addyston</div></li>
+       <li><div>Delphi</div>
                <ul>
-                       <li class="ui-state-disabled">Ada</li>
-                       <li>Saarland</li>
-                       <li>Salzburg an der schönen Donau</li>
+                       <li class="ui-state-disabled"><div>Ada</div></li>
+                       <li><div>Saarland</div></li>
+                       <li><div>Salzburg an der schönen Donau</div></li>
                </ul>
        </li>
-       <li>Saarland</li>
-       <li>Salzburg
+       <li><div>Saarland</div></li>
+       <li><div>Salzburg</div>
                <ul>
-                       <li>Delphi
+                       <li><div>Delphi</div>
                                <ul>
-                                       <li>Ada</li>
-                                       <li>Saarland</li>
-                                       <li>Salzburg</li>
+                                       <li><div>Ada</div></li>
+                                       <li><div>Saarland</div></li>
+                                       <li><div>Salzburg</div></li>
                                </ul>
                        </li>
-                       <li>Delphi
+                       <li><div>Delphi</div>
                                <ul>
-                                       <li>Ada</li>
-                                       <li>Saarland</li>
-                                       <li>Salzburg</li>
+                                       <li><div>Ada</div></li>
+                                       <li><div>Saarland</div></li>
+                                       <li><div>Salzburg</div></li>
                                </ul>
                        </li>
-                       <li>Perch</li>
+                       <li><div>Perch</div></li>
                </ul>
        </li>
-       <li class="ui-state-disabled">Amesville</li>
+       <li class="ui-state-disabled"><div>Amesville</div></li>
 </ul>
 
 <div class="demo-description">
index bd1de828e9e44b2778eee7481bc6f7e114d91c55..1afdba5e12c5d3b9e3056ae9a5210869a5d8e0bf 100644 (file)
 <body>
 
 <ul id="menu">
-       <li><span class="ui-icon ui-icon-disk"></span>Save</li>
-       <li><span class="ui-icon ui-icon-zoomin"></span>Zoom In</li>
-       <li><span class="ui-icon ui-icon-zoomout"></span>Zoom Out</li>
-       <li class="ui-state-disabled"><span class="ui-icon ui-icon-print"></span>Print...</li>
        <li>
-               Playback
+               <div><span class="ui-icon ui-icon-disk"></span>Save</div>
+       </li>
+       <li>
+               <div><span class="ui-icon ui-icon-zoomin"></span>Zoom In</div>
+       </li>
+       <li>
+               <div><span class="ui-icon ui-icon-zoomout"></span>Zoom Out</div>
+       </li>
+       <li class="ui-state-disabled">
+               <div><span class="ui-icon ui-icon-print"></span>Print...</div>
+       </li>
+       <li>
+               <div>Playback</div>
                <ul>
-                       <li><span class="ui-icon ui-icon-seek-start"></span>Prev</li>
-                       <li><span class="ui-icon ui-icon-stop"></span>Stop</li>
-                       <li><span class="ui-icon ui-icon-play"></span>Play</li>
-                       <li><span class="ui-icon ui-icon-seek-end"></span>Next</li>
+                       <li>
+                               <div><span class="ui-icon ui-icon-seek-start"></span>Prev</div>
+                       </li>
+                       <li>
+                               <div><span class="ui-icon ui-icon-stop"></span>Stop</div>
+                       </li>
+                       <li>
+                               <div><span class="ui-icon ui-icon-play"></span>Play</div>
+                       </li>
+                       <li>
+                               <div><span class="ui-icon ui-icon-seek-end"></span>Next</div>
+                       </li>
                </ul>
        </li>
-       <li>Learn more about this menu</li>
+       <li>
+               <div>Learn more about this menu</div>
+       </li>
 </ul>
 
 <div class="demo-description">
index cb3df5b00c2ff2af460b4bd311dd4363c8b5cc32..56115c3343ce70f7fd20d7d7b65d8e6d3aba308a 100644 (file)
@@ -33,7 +33,7 @@
                font-size: 15px;
                line-height: 15px;
        }
-       .ui-menu .ui-menu-item {
+       .ui-menu .ui-menu-item-wrapper {
                padding: 0;
        }
        #menu3 {
 <div id="qunit-fixture">
 
 <ul class="foo" id="menu1">
-       <li class="foo">Aberdeen</li>
-       <li class="foo">Ada</li>
-       <li class="foo">Adamsville</li>
-       <li id="testID1" class="foo">Addyston</li>
-       <li class="foo">Adelphi</li>
+       <li class="foo"><div>Aberdeen</div></li>
+       <li class="foo"><div>Ada</div></li>
+       <li class="foo"><div>Adamsville</div></li>
+       <li class="foo"><div id="testID1">Addyston</div></li>
+       <li class="foo"><div>Adelphi</div></li>
 </ul>
 
 <ul id="menu2">
-       <li class="foo">Aberdeen</li>
-       <li class="foo">Ada</li>
-       <li class="foo">Adamsville</li>
-       <li class="foo"><span class="ui-icon ui-icon-print"></span>Addyston</li>
-       <li>Delphi
+       <li class="foo"><div>Aberdeen</div></li>
+       <li class="foo"><div>Ada</div></li>
+       <li class="foo"><div>Adamsville</div></li>
+       <li class="foo">
+               <div><span class="ui-icon ui-icon-print"></span>Addyston</div>
+       </li>
+       <li>
+               <div>Delphi</div>
                <ul>
-                       <li class="foo">Ada</li>
-                       <li class="foo">Saarland</li>
-                       <li class="foo">Salzburg</li>
+                       <li class="foo"><div>Ada</div></li>
+                       <li class="foo"><div>Saarland</div></li>
+                       <li class="foo"><div>Salzburg</div></li>
                </ul>
        </li>
-       <li class="foo"> Saarland</li>
-       <li>Salzburg
+       <li class="foo"><div> Saarland</div></li>
+       <li>
+               <div>Salzburg</div>
                <ul>
-                       <li>Delphi
+                       <li>
+                               <div>Delphi</div>
                                <ul>
-                                       <li class="foo">Ada</li>
-                                       <li class="foo">Saarland</li>
-                                       <li class="foo">Salzburg</li>
+                                       <li class="foo"><div>Ada</div></li>
+                                       <li class="foo"><div>Saarland</div></li>
+                                       <li class="foo"><div>Salzburg</div></li>
                                </ul>
                        </li>
-                       <li>Delphi
+                       <li>
+                               <div>Delphi</div>
                                <ul>
-                                       <li class="foo">Ada</li>
+                                       <li class="foo"><div>Ada</div></li>
                                        <li> - </li>
-                                       <li class="foo">Saarland</li>
+                                       <li class="foo"><div>Saarland</div></li>
                                        <li></li>
-                                       <li class="foo">Salzburg</li>
+                                       <li class="foo"><div>Salzburg</div></li>
                                        <li>&ndash;</li>
                                </ul>
                        </li>
-                       <li class="foo">Perch</li>
+                       <li class="foo"><div>Perch</div></li>
                </ul>
        </li>
 </ul>
 
 <ul class="foo" id="menu3">
-       <li class="foo">Aberdeen</li>
-       <li class="foo">Ada</li>
-       <li class="foo">Adamsville</li>
-       <li class="foo">Addyston</li>
-       <li class="foo">Adelphi</li>
-       <li class="foo">Adena</li>
-       <li class="foo">Adrian</li>
-       <li class="foo">Akron</li>
-       <li class="foo">Albany</li>
-       <li class="foo">Alexandria</li>
-       <li class="foo">Alger</li>
-       <li class="foo">Alledonia</li>
-       <li class="foo">Alliance</li>
-       <li class="foo">Alpha</li>
-       <li class="foo">Alvada</li>
-       <li class="foo">Alvordton</li>
-       <li class="foo">Amanda</li>
-       <li class="foo">Amelia</li>
-       <li class="foo">Amesville</li>
-       <li class="foo">Aberdeen</li>
-       <li class="foo">Ada</li>
-       <li class="foo">Adamsville</li>
-       <li class="foo">Addyston</li>
-       <li class="foo">Adelphi</li>
-       <li class="foo">Adena</li>
-       <li class="foo">Adrian</li>
-       <li class="foo">Akron</li>
-       <li class="foo">Albany</li>
-       <li class="foo">Alexandria</li>
-       <li class="foo">Alger</li>
-       <li class="foo">Alledonia</li>
-       <li class="foo">Alliance</li>
-       <li class="foo">Alpha</li>
-       <li class="foo">Alvada</li>
-       <li class="foo">Alvordton</li>
-       <li class="foo">Amanda</li>
-       <li class="foo">Amelia</li>
-       <li class="foo">Amesville</li>
+       <li class="foo"><div>Aberdeen</div></li>
+       <li class="foo"><div>Ada</div></li>
+       <li class="foo"><div>Adamsville</div></li>
+       <li class="foo"><div>Addyston</div></li>
+       <li class="foo"><div>Adelphi</div></li>
+       <li class="foo"><div>Adena</div></li>
+       <li class="foo"><div>Adrian</div></li>
+       <li class="foo"><div>Akron</div></li>
+       <li class="foo"><div>Albany</div></li>
+       <li class="foo"><div>Alexandria</div></li>
+       <li class="foo"><div>Alger</div></li>
+       <li class="foo"><div>Alledonia</div></li>
+       <li class="foo"><div>Alliance</div></li>
+       <li class="foo"><div>Alpha</div></li>
+       <li class="foo"><div>Alvada</div></li>
+       <li class="foo"><div>Alvordton</div></li>
+       <li class="foo"><div>Amanda</div></li>
+       <li class="foo"><div>Amelia</div></li>
+       <li class="foo"><div>Amesville</div></li>
+       <li class="foo"><div>Aberdeen</div></li>
+       <li class="foo"><div>Ada</div></li>
+       <li class="foo"><div>Adamsville</div></li>
+       <li class="foo"><div>Addyston</div></li>
+       <li class="foo"><div>Adelphi</div></li>
+       <li class="foo"><div>Adena</div></li>
+       <li class="foo"><div>Adrian</div></li>
+       <li class="foo"><div>Akron</div></li>
+       <li class="foo"><div>Albany</div></li>
+       <li class="foo"><div>Alexandria</div></li>
+       <li class="foo"><div>Alger</div></li>
+       <li class="foo"><div>Alledonia</div></li>
+       <li class="foo"><div>Alliance</div></li>
+       <li class="foo"><div>Alpha</div></li>
+       <li class="foo"><div>Alvada</div></li>
+       <li class="foo"><div>Alvordton</div></li>
+       <li class="foo"><div>Amanda</div></li>
+       <li class="foo"><div>Amelia</div></li>
+       <li class="foo"><div>Amesville</div></li>
 </ul>
 
 <ul class="foo" id="menu4">
-       <li class="foo">Aberdeen</li>
+       <li class="foo"><div>Aberdeen</div></li>
        <li class="foo">
-               Ada
+               <div>Ada</div>
                <ul class="foo">
-                       <li class="foo">Aberdeen</li>
-                       <li class="foo">Ada</li>
-                       <li class="foo">Adamsville</li>
-                       <li class="foo">Addyston</li>
-                       <li class="foo">Adelphi</li>
-                       <li class="foo">Adena</li>
-                       <li class="foo">Adrian</li>
-                       <li class="foo">Akron</li>
-                       <li class="foo">Albany</li>
-                       <li class="foo">Alexandria</li>
-                       <li class="foo">Alger</li>
-                       <li class="foo">Alledonia</li>
-                       <li class="foo">Alliance</li>
-                       <li class="foo">Alpha</li>
-                       <li class="foo">Alvada</li>
-                       <li class="foo">Alvordton</li>
-                       <li class="foo">Amanda</li>
-                       <li class="foo">Amelia</li>
-                       <li class="foo">Amesville</li>
-                       <li class="foo">Aberdeen</li>
-                       <li class="foo">Ada</li>
-                       <li class="foo">Adamsville</li>
-                       <li class="foo">Addyston</li>
-                       <li class="foo">Adelphi</li>
-                       <li class="foo">Adena</li>
-                       <li class="foo">Adrian</li>
-                       <li class="foo">Akron</li>
-                       <li class="foo">Albany</li>
+                       <li class="foo"><div>Aberdeen</div></li>
+                       <li class="foo"><div>Ada</div></li>
+                       <li class="foo"><div>Adamsville</div></li>
+                       <li class="foo"><div>Addyston</div></li>
+                       <li class="foo"><div>Adelphi</div></li>
+                       <li class="foo"><div>Adena</div></li>
+                       <li class="foo"><div>Adrian</div></li>
+                       <li class="foo"><div>Akron</div></li>
+                       <li class="foo"><div>Albany</div></li>
+                       <li class="foo"><div>Alexandria</div></li>
+                       <li class="foo"><div>Alger</div></li>
+                       <li class="foo"><div>Alledonia</div></li>
+                       <li class="foo"><div>Alliance</div></li>
+                       <li class="foo"><div>Alpha</div></li>
+                       <li class="foo"><div>Alvada</div></li>
+                       <li class="foo"><div>Alvordton</div></li>
+                       <li class="foo"><div>Amanda</div></li>
+                       <li class="foo"><div>Amelia</div></li>
+                       <li class="foo"><div>Amesville</div></li>
+                       <li class="foo"><div>Aberdeen</div></li>
+                       <li class="foo"><div>Ada</div></li>
+                       <li class="foo"><div>Adamsville</div></li>
+                       <li class="foo"><div>Addyston</div></li>
+                       <li class="foo"><div>Adelphi</div></li>
+                       <li class="foo"><div>Adena</div></li>
+                       <li class="foo"><div>Adrian</div></li>
+                       <li class="foo"><div>Akron</div></li>
+                       <li class="foo"><div>Albany</div></li>
                </ul>
        </li>
-       <li class="foo">Adamsville</li>
-       <li class="foo">Addyston</li>
-       <li class="foo">Adelphi</li>
-       <li class="foo">Adena</li>
-       <li class="foo">Adrian</li>
-       <li class="foo">Akron</li>
-       <li class="foo">Albany</li>
-       <li class="foo">Alexandria</li>
-       <li class="foo">Alger</li>
-       <li class="foo">Alledonia</li>
-       <li class="foo">Alliance</li>
-       <li class="foo">Alpha</li>
-       <li class="foo">Alvada</li>
-       <li class="foo">Alvordton</li>
-       <li class="foo">Amanda</li>
-       <li class="foo">Amelia</li>
-       <li class="foo">Amesville</li>
-       <li class="foo">Aberdeen</li>
-       <li class="foo">Ada</li>
-       <li class="foo">Adamsville</li>
-       <li class="foo">Addyston</li>
-       <li class="foo">Adelphi</li>
-       <li class="foo">Adena</li>
-       <li class="foo">Adrian</li>
-       <li class="foo">Akron</li>
-       <li class="foo">Albany</li>
-       <li class="foo">Alexandria</li>
-       <li class="foo">Alger</li>
-       <li class="foo">Alledonia</li>
-       <li class="foo">Alliance</li>
-       <li class="foo">Alpha</li>
-       <li class="foo">Alvada</li>
-       <li class="foo">Alvordton</li>
-       <li class="foo">Amanda</li>
-       <li class="foo">Amelia</li>
-       <li class="foo">Amesville</li>
+       <li class="foo"><div>Adamsville</div></li>
+       <li class="foo"><div>Addyston</div></li>
+       <li class="foo"><div>Adelphi</div></li>
+       <li class="foo"><div>Adena</div></li>
+       <li class="foo"><div>Adrian</div></li>
+       <li class="foo"><div>Akron</div></li>
+       <li class="foo"><div>Albany</div></li>
+       <li class="foo"><div>Alexandria</div></li>
+       <li class="foo"><div>Alger</div></li>
+       <li class="foo"><div>Alledonia</div></li>
+       <li class="foo"><div>Alliance</div></li>
+       <li class="foo"><div>Alpha</div></li>
+       <li class="foo"><div>Alvada</div></li>
+       <li class="foo"><div>Alvordton</div></li>
+       <li class="foo"><div>Amanda</div></li>
+       <li class="foo"><div>Amelia</div></li>
+       <li class="foo"><div>Amesville</div></li>
+       <li class="foo"><div>Aberdeen</div></li>
+       <li class="foo"><div>Ada</div></li>
+       <li class="foo"><div>Adamsville</div></li>
+       <li class="foo"><div>Addyston</div></li>
+       <li class="foo"><div>Adelphi</div></li>
+       <li class="foo"><div>Adena</div></li>
+       <li class="foo"><div>Adrian</div></li>
+       <li class="foo"><div>Akron</div></li>
+       <li class="foo"><div>Albany</div></li>
+       <li class="foo"><div>Alexandria</div></li>
+       <li class="foo"><div>Alger</div></li>
+       <li class="foo"><div>Alledonia</div></li>
+       <li class="foo"><div>Alliance</div></li>
+       <li class="foo"><div>Alpha</div></li>
+       <li class="foo"><div>Alvada</div></li>
+       <li class="foo"><div>Alvordton</div></li>
+       <li class="foo"><div>Amanda</div></li>
+       <li class="foo"><div>Amelia</div></li>
+       <li class="foo"><div>Amesville</div></li>
 </ul>
 
 <div id="menu5">
-       <blockquote>Aberdeen</blockquote>
-       <blockquote>Ada</blockquote>
-       <blockquote>Adamsville</blockquote>
-       <blockquote>Addyston</blockquote>
-       <blockquote>Delphi
-               <div>
-                       <blockquote>Ada</blockquote>
-                       <blockquote>Saarland</blockquote>
-                       <blockquote>Salzburg</blockquote>
+       <blockquote><div>Aberdeen</div></blockquote>
+       <blockquote><div>Ada</div></blockquote>
+       <blockquote><div>Adamsville</div></blockquote>
+       <blockquote><div>Addyston</div></blockquote>
+       <blockquote>
+               <div>Delphi</div>
+               <div class="menu">
+                       <blockquote><div>Ada</div></blockquote>
+                       <blockquote><div>Saarland</div></blockquote>
+                       <blockquote><div>Salzburg</div></blockquote>
                </div>
        </blockquote>
-       <blockquote>Saarland</blockquote>
-       <blockquote>Salzburg
-               <div>
-                       <blockquote>Delphi
-                               <div>
-                                       <blockquote>Ada</blockquote>
+       <blockquote><div>Saarland</div></blockquote>
+       <blockquote>
+               <div>Salzburg</div>
+               <div class="menu">
+                       <blockquote>
+                               <div>Delphi</div>
+                               <div class="menu">
+                                       <blockquote><div>Ada</div></blockquote>
                                        <blockquote id="testID2">Saarland</blockquote>
-                                       <blockquote>Salzburg</blockquote>
+                                       <blockquote><div>Salzburg</div></blockquote>
                                </div>
                        </blockquote>
-                       <blockquote>Delphi
-                               <div>
-                                       <blockquote>Ada</blockquote>
-                                       <blockquote>Saarland</blockquote>
-                                       <blockquote>Salzburg</blockquote>
+                       <blockquote>
+                               <div>Delphi</div>
+                               <div class="menu">
+                                       <blockquote><div>Ada</div></blockquote>
+                                       <blockquote><div>Saarland</div></blockquote>
+                                       <blockquote><div>Salzburg</div></blockquote>
                                </div>
                        </blockquote>
-                       <blockquote>Perch</blockquote>
+                       <blockquote><div>Perch</div></blockquote>
                </div>
        </blockquote>
 </div>
 
 <ul id="menu6">
-       <li class="foo">Aberdeen</li>
-       <li class="foo ui-state-disabled">Ada</li>
-       <li class="foo">Adamsville</li>
-       <li class="foo">Addyston</li>
-       <li id="testID3" class="ui-state-disabled">Delphi
+       <li class="foo"><div>Aberdeen</div></li>
+       <li class="foo ui-state-disabled"><div>Ada</div></li>
+       <li class="foo"><div>Adamsville</div></li>
+       <li class="foo"><div>Addyston</div></li>
+       <li id="testID3" class="ui-state-disabled">
+               <div>Delphi</div>
                <ul>
-                       <li class="foo">Ada</li>
-                       <li class="foo">Saarland</li>
-                       <li class="foo">Salzburg</li>
+                       <li class="foo"><div>Ada</div></li>
+                       <li class="foo"><div>Saarland</div></li>
+                       <li class="foo"><div>Salzburg</div></li>
                </ul>
        </li>
-       <li class="foo">Saarland</li>
+       <li class="foo"><div>Saarland</div></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 class="ui-menu-group">
+               <div><strong>Group 1</strong></div>
+       </li>
+       <li><div>Aberdeen</div></li>
+       <li><div>Ada</div></li>
+       <li><div>Adamsville</div></li>
+       <li><div>Addyston</div></li>
        <li></li>
-       <li class="ui-menu-group"><strong>Group 2</strong></li>
-       <li>Delphi
+       <li class="ui-menu-group">
+               <div><strong>Group 2</strong></div>
+       </li>
+       <li>
+               <div>Delphi</div>
                <ul>
-                       <li>Ada</li>
-                       <li>Saarland</li>
-                       <li>Salzburg</li>
+                       <li><div>Ada</div></li>
+                       <li><div>Saarland</div></li>
+                       <li><div>Salzburg</div></li>
                </ul>
        </li>
-       <li>Saarland</li>
+       <li><div>Saarland</div></li>
        <li>---</li>
-       <li class="ui-menu-group"><strong>Group 3</strong></li>
-       <li>Salzburg
+       <li class="ui-menu-group">
+               <div><strong>Group 3</strong></div>
+       </li>
+       <li>
+               <div>Salzburg</div>
                <ul>
-                       <li>Delphi
+                       <li>
+                               <div>Delphi</div>
                                <ul>
-                                       <li>Ada</li>
+                                       <li><div>Ada</div></li>
                                        <li> - </li>
-                                       <li>Saarland</li>
+                                       <li><div>Saarland</div></li>
                                        <li>&mdash;</li>
-                                       <li>Salzburg</li>
+                                       <li><div>Salzburg</div></li>
                                        <li>&ndash;</li>
                                </ul>
                        </li>
-                       <li>Delphi
+                       <li>
+                               <div>Delphi</div>
                                <ul>
-                                       <li>Ada</li>
-                                       <li>Saarland</li>
-                                       <li>Salzburg</li>
+                                       <li><div>Ada</div></li>
+                                       <li><div>Saarland</div></li>
+                                       <li><div>Salzburg</div></li>
                                </ul>
                        </li>
-                       <li>Perch</li>
+                       <li><div>Perch</div></li>
                </ul>
        </li>
-       <li>Amesville</li>
+       <li><div>Amesville</div></li>
 </ul>
 
 <ul id="menu8">
-       <li class="foo">Aberdeen</li>
-       <li class="foo ui-state-disabled">Ada</li>
-       <li class="foo">Adamsville</li>
-       <li class="foo">Addyston</li>
+       <li class="foo"><div>Aberdeen</div></li>
+       <li class="foo ui-state-disabled"><div>Ada</div></li>
+       <li class="foo"><div>Adamsville</div></li>
+       <li class="foo"><div>Addyston</div></li>
        <li class="foo">-</li>
-       <li class="foo">-Saarland</li>
+       <li class="foo"><div>-Saarland</div></li>
 </ul>
 
 </div>
index 099dd091e037b41dc591a3ca00db264c574b3090..2404ebe020164b617bccdadbcf217b1fa030af85 100644 (file)
@@ -7,7 +7,7 @@ TestHelpers.commonWidgetTests( "menu", {
                items: "> *",
                menus: "ul",
                position: {
-                       my: "left-1 top",
+                       my: "left top",
                        at: "right top"
                },
                role: "menu",
index df039c9e49da0faa623e157d7b1157f2daba26e5..f02f97fca50a49cee5b8843a55007d1fb9f1e9b2 100644 (file)
@@ -48,12 +48,13 @@ asyncTest( "#9044: Autofocus issue with dialog opened from menu widget", functio
 asyncTest( "#9532: Need a way in Menu to keep ui-state-active class on selected item for Selectmenu", function() {
        expect( 1 );
        var element = $( "#menu1" ).menu(),
-               firstChild = element.children().eq( 0 );
+               firstChild = element.children().eq( 0 ),
+               wrapper = firstChild.children( ".ui-menu-item-wrapper" );
 
        element.menu( "focus", null, firstChild );
-       firstChild.addClass( "ui-state-active" );
+       wrapper.addClass( "ui-state-active" );
        setTimeout( function() {
-               ok( firstChild.is( ".ui-state-active" ), "ui-state-active improperly removed" );
+               ok( wrapper.is( ".ui-state-active" ), "ui-state-active improperly removed" );
                start();
        }, 500 );
 });
index 02e63bf63a96cbcd81c1a3d5ed9fd41da2fe7e47..f4d494f47af70fb0ff63035cef054b1e2797d040 100644 (file)
@@ -32,7 +32,7 @@ test( "handle click on custom item menu", function() {
                select: function() {
                        log();
                },
-               menus: "div"
+               menus: ".menu"
        });
        log( "click", true );
        click( element, "1" );
@@ -91,7 +91,7 @@ asyncTest( "handle focus of menu with active item", function() {
        expect( 1 );
        var element = $( "#menu1" ).menu({
                focus: function( event ) {
-                       log( $( event.target ).find( ".ui-state-focus" ).index() );
+                       log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
                }
        });
 
@@ -142,12 +142,12 @@ asyncTest( "handle submenu auto collapse: mouseleave", function() {
 
 asyncTest( "handle submenu auto collapse: mouseleave", function() {
        expect( 4 );
-       var element = $( "#menu5" ).menu({ menus: "div" }),
+       var element = $( "#menu5" ).menu({ menus: ".menu" }),
                event = $.Event( "mouseenter" );
 
        function menumouseleave1() {
                equal( element.find( "div[aria-expanded='true']" ).length, 1, "first submenu expanded" );
-               element.menu( "focus", event, element.find( ":nth-child(7)" ).find( "div" ).eq( 0 ).children().eq( 0 ) );
+               element.menu( "focus", event, element.find( ":nth-child(7)" ).find( ".menu" ).eq( 0 ).children().eq( 0 ) );
                setTimeout( menumouseleave2, 350 );
        }
        function menumouseleave2() {
@@ -177,7 +177,7 @@ asyncTest( "handle keyboard navigation on menu without scroll and without submen
                        log( $( ui.item[ 0 ] ).text() );
                },
                focus: function( event ) {
-                       log( $( event.target ).find( ".ui-state-focus" ).index() );
+                       log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
                }
        });
 
@@ -243,7 +243,7 @@ asyncTest( "handle keyboard navigation on menu without scroll and with submenus"
                        log( $( ui.item[0] ).text() );
                },
                focus: function( event ) {
-                       log( $( event.target ).find( ".ui-state-focus" ).index() );
+                       log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
                }
        });
 
@@ -363,7 +363,7 @@ asyncTest( "handle keyboard navigation on menu with scroll and without submenus"
                        log( $( ui.item[ 0 ] ).text() );
                },
                focus: function( event ) {
-                       log( $( event.target ).find( ".ui-state-focus" ).index());
+                       log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
                }
        });
 
@@ -438,7 +438,7 @@ asyncTest( "handle keyboard navigation on menu with scroll and with submenus", f
                        log( $( ui.item[ 0 ] ).text() );
                },
                focus: function( event ) {
-                       log( $( event.target ).find( ".ui-state-focus" ).index());
+                       log( $( event.target ).find( ".ui-state-focus" ).parent().index());
                }
        });
 
@@ -533,7 +533,7 @@ asyncTest( "handle keyboard navigation and mouse click on menu with disabled ite
                        log( $( ui.item[0] ).text() );
                },
                focus: function( event ) {
-                       log( $( event.target ).find( ".ui-state-focus" ).index());
+                       log( $( event.target ).find( ".ui-state-focus" ).parent().index());
                }
        });
 
@@ -585,7 +585,7 @@ asyncTest( "handle keyboard navigation and mouse click on menu with dividers and
                        log( $( ui.item[0] ).text() );
                },
                focus: function( event ) {
-                       log( $( event.target ).find( ".ui-state-focus" ).index());
+                       log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
                }
        });
 
@@ -612,7 +612,7 @@ asyncTest( "handle keyboard navigation with spelling of menu items", function()
        expect( 3 );
        var element = $( "#menu2" ).menu({
                focus: function( event ) {
-                       log( $( event.target ).find( ".ui-state-focus" ).index() );
+                       log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
                }
        });
 
@@ -635,7 +635,7 @@ asyncTest( "Keep focus on selected item (see #10644)", function() {
        expect( 1 );
        var element = $( "#menu2" ).menu({
                focus: function( event ) {
-                       log( $( event.target ).find( ".ui-state-focus" ).index() );
+                       log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
                }
        });
 
index 5a633998d82b747c0441e484d942644b16d98bbc..ef8279018e0f013af8813f71db86b8106c902203 100644 (file)
@@ -73,11 +73,12 @@ test( "refresh icons (see #9377)", function() {
        expect( 3 );
        var element = $( "#menu1" ).menu();
        ok( !element.hasClass( "ui-menu-icons") );
-       element.find( "li:first" ).html( "<span class='ui-icon ui-icon-disk'></span>Save</a>" );
+       element.find( "li:first .ui-menu-item-wrapper" )
+               .html( "<span class='ui-icon ui-icon-disk'></span>Save</a>" );
        element.menu( "refresh" );
 
        ok( element.hasClass( "ui-menu-icons" ) );
-       element.find( "li:first" ).html( "Save" );
+       element.find( "li:first .ui-menu-item-wrapper" ).html( "Save" );
        element.menu( "refresh" );
        ok( !element.hasClass( "ui-menu-icons" ) );
 });
index c766733458314d2630acabc8b75cebbe79ba60eb..438b02a32b8d3c4981121dfebc0f80e41b87e1bf 100644 (file)
@@ -71,8 +71,10 @@ test( "{ role: 'menu' } ", function() {
        ok( items.length > 0, "number of menu items" );
        items.each(function( item ) {
                ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" );
-               equal( $( this ).attr( "role" ), "menuitem", "menu item ("+ item + ") role" );
-               equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" );
+               equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ),
+                       "menuitem", "menu item ("+ item + ") role" );
+               equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "tabindex" ), "-1",
+                       "tabindex for menu item ("+ item + ")" );
        });
 });
 
@@ -86,8 +88,10 @@ test( "{ role: 'listbox' } ", function() {
        ok( items.length > 0, "number of menu items" );
        items.each(function( item ) {
                ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" );
-               equal( $( this ).attr( "role" ), "option", "menu item ("+ item + ") role" );
-               equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" );
+               equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ), "option",
+                       "menu item ("+ item + ") role" );
+               equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "tabindex" ), "-1",
+                       "tabindex for menu item ("+ item + ")" );
        });
 });
 
@@ -101,8 +105,10 @@ test( "{ role: null }", function() {
        ok( items.length > 0, "number of menu items" );
        items.each(function( item ) {
                ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" );
-               equal( $( this ).attr( "role" ), undefined, "menu item ("+ item + ") role" );
-               equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" );
+               equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ), undefined,
+                       "menu item ("+ item + ") role" );
+               equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "tabindex" ), "-1",
+                       "tabindex for menu item ("+ item + ")" );
        });
 });
 
index 77737c39045abd62896a5f68ced078db9b543f1f..ea273c765bfad2cdbdc8c24715f1536cc2d5e1f3 100644 (file)
@@ -24,7 +24,9 @@ TestHelpers.menu = {
 
        click: function( menu, item ) {
                lastItem = item;
-               menu.children( ":eq(" + item + ")" ).trigger( "click" );
+               menu.children( ":eq(" + item + ")" )
+                       .children( ".ui-menu-item-wrapper" )
+                       .trigger( "click" );
        }
 };
 
index 11e9df6e108847863e2db4f26bda0b826cf098b1..855748d3d65bfd87eac7386733d1d981b4ac5410 100644 (file)
@@ -28,7 +28,7 @@
                });
 
                $( "#menu5" ).menu({
-                       menus: "div",
+                       menus: ".menuElement",
                        select: logger
                });
 
 
 <h2>Default inline menu</h2>
 <ul id="menu1">
-       <li>Aberdeen</li>
-       <li>Ada</li>
-       <li>Adamsville</li>
-       <li>Addyston</li>
-       <li>Delphi</li>
-       <li>Saarland</li>
-       <li>Salzburg</li>
+       <li><div>Aberdeen</div></li>
+       <li><div>Ada</div></li>
+       <li><div>Adamsville</div></li>
+       <li><div>Addyston</div></li>
+       <li><div>Delphi</div></li>
+       <li><div>Saarland</div></li>
+       <li><div>Salzburg</div></li>
 </ul>
 
 <h2>Inline with disabled items and submenus</h2>
 <ul id="menu2">
-       <li class="ui-state-disabled">Aberdeen</li>
-       <li>Ada</li>
-       <li>Adamsville</li>
-       <li>Addyston</li>
-       <li>Delphi
+       <li class="ui-state-disabled"><div>Aberdeen</div></li>
+       <li><div>Ada</div></li>
+       <li><div>Adamsville</div></li>
+       <li><div>Addyston</div></li>
+       <li>
+               <div>Delphi</div>
                <ul>
-                       <li class="ui-state-disabled">Ada</li>
-                       <li>Saarland</li>
-                       <li>Salzburg</li>
+                       <li class="ui-state-disabled"><div>Ada</div></li>
+                       <li><div>Saarland</div></li>
+                       <li><div>Salzburg</div></li>
                </ul>
        </li>
-       <li>Saarland</li>
-       <li>Salzburg
+       <li><div>Saarland</div></li>
+       <li>
+               <div>Salzburg</div>
                <ul>
-                       <li>Delphi
+                       <li>
+                               <div>Delphi</div>
                                <ul>
-                                       <li>Ada</li>
-                                       <li>Saarland</li>
-                                       <li>Salzburg</li>
+                                       <li><div>Ada</div></li>
+                                       <li><div>Saarland</div></li>
+                                       <li><div>Salzburg</div></li>
                                </ul>
                        </li>
-                       <li>Delphi
+                       <li>
+                               <div>Delphi</div>
                                <ul>
-                                       <li>Ada</li>
-                                       <li>Saarland</li>
-                                       <li>Salzburg</li>
+                                       <li><div>Ada</div></li>
+                                       <li><div>Saarland</div></li>
+                                       <li><div>Salzburg</div></li>
                                </ul>
                        </li>
-                       <li class="ui-state-disabled">Perch</li>
+                       <li class="ui-state-disabled"><div>Perch</div></li>
                </ul>
        </li>
-       <li class="ui-state-disabled">Amesville</li>
+       <li class="ui-state-disabled"><div>Amesville</div></li>
 </ul>
 
 <h2>Menu with icons</h2>
 <ul id="menu3">
-       <li><span class="ui-icon ui-icon-print"></span>Aberdeen</li>
-       <li class="ui-state-disabled"><span class="ui-icon ui-icon-scissors"></span>Ada</li>
-       <li>Adamsville</li>
-       <li><span class="ui-icon ui-icon-wrench"></span>Addyston</li>
-       <li class="ui-state-disabled">Delphi
+       <li>
+               <div><span class="ui-icon ui-icon-print"></span>Aberdeen</div>
+       </li>
+       <li class="ui-state-disabled">
+               <div><span class="ui-icon ui-icon-scissors"></span>Ada</div>
+       </li>
+       <li><div>Adamsville</div></li>
+       <li>
+               <div><span class="ui-icon ui-icon-wrench"></span>Addyston</div>
+       </li>
+       <li class="ui-state-disabled">
+               <div>Delphi</div>
                <ul>
-                       <li>Ada</li>
-                       <li><span class="ui-icon ui-icon-wrench"></span>Saarland</li>
-                       <li>Salzburg</li>
+                       <li><div>Ada</div></li>
+                       <li>
+                               <div><span class="ui-icon ui-icon-wrench"></span>Saarland</div>
+                       </li>
+                       <li><div>Salzburg</div></li>
                </ul>
        </li>
-       <li>Saarland</li>
        <li>
-               <span class="ui-icon ui-icon-print"></span>Salzburg
+               <div>Saarland</div></li>
+       <li>
+               <div>
+                       <span class="ui-icon ui-icon-print"></span>Salzburg
+               </div>
                <ul>
                        <li>
-                               <span class="ui-icon ui-icon-wrench"></span>Delphi
+                               <div><span class="ui-icon ui-icon-wrench"></span>Delphi</div>
                                <ul>
-                                       <li>Ada</li>
-                                       <li>Saarland</li>
-                                       <li>Salzburg</li>
+                                       <li><div>Ada</div></li>
+                                       <li><div>Saarland</div></li>
+                                       <li><div>Salzburg</div></li>
                                </ul>
                        </li>
-                       <li>Delphi
+                       <li>
+                               <div>Delphi</div>
                                <ul>
-                                       <li><span class="ui-icon ui-icon-wrench"></span>Ada</li>
-                                       <li><span class="ui-icon ui-icon-wrench"></span>Saarland</li>
-                                       <li><span class="ui-icon ui-icon-wrench"></span>Salzburg</li>
+                                       <li><div><span class="ui-icon ui-icon-wrench"></span>Ada</div></li>
+                                       <li><div><span class="ui-icon ui-icon-wrench"></span>Saarland</div></li>
+                                       <li><div><span class="ui-icon ui-icon-wrench"></span>Salzburg</div></li>
                                </ul>
                        </li>
-                       <li>Perch</li>
+                       <li><div>Perch</div></li>
                </ul>
        </li>
 </ul>
 
 <h2>Long menu with scroll overflow, to test menu's scroll-on-keypress behaviour</h2>
 <ul class="menu4">
-       <li>Aberdeen</li>
-       <li>Ada</li>
-       <li>Adamsville</li>
-       <li>Addyston</li>
-       <li>Adelphi</li>
-       <li>Adena</li>
-       <li>Adrian</li>
-       <li>Akron</li>
-       <li>Albany</li>
-       <li>Alexandria</li>
-       <li>Alger</li>
-       <li>Alledonia</li>
-       <li>Alliance</li>
-       <li>Alpha</li>
-       <li>Alvada</li>
-       <li>Alvordton</li>
-       <li>Amanda</li>
-       <li>Amelia</li>
-       <li>Amesville</li>
-       <li>Aberdeen</li>
-       <li>Ada</li>
-       <li>Adamsville</li>
-       <li>Addyston</li>
-       <li>Adelphi</li>
-       <li>Adena</li>
-       <li>Adrian</li>
-       <li>Akron</li>
-       <li>Albany</li>
-       <li>Alexandria</li>
-       <li>Alger</li>
-       <li>Alledonia</li>
-       <li>Alliance</li>
-       <li>Alpha</li>
-       <li>Alvada</li>
-       <li>Alvordton</li>
-       <li>Amanda</li>
-       <li>Amelia</li>
-       <li>Amesville</li>
+       <li><div>Aberdeen</div></li>
+       <li><div>Ada</div></li>
+       <li><div>Adamsville</div></li>
+       <li><div>Addyston</div></li>
+       <li><div>Adelphi</div></li>
+       <li><div>Adena</div></li>
+       <li><div>Adrian</div></li>
+       <li><div>Akron</div></li>
+       <li><div>Albany</div></li>
+       <li><div>Alexandria</div></li>
+       <li><div>Alger</div></li>
+       <li><div>Alledonia</div></li>
+       <li><div>Alliance</div></li>
+       <li><div>Alpha</div></li>
+       <li><div>Alvada</div></li>
+       <li><div>Alvordton</div></li>
+       <li><div>Amanda</div></li>
+       <li><div>Amelia</div></li>
+       <li><div>Amesville</div></li>
+       <li><div>Aberdeen</div></li>
+       <li><div>Ada</div></li>
+       <li><div>Adamsville</div></li>
+       <li><div>Addyston</div></li>
+       <li><div>Adelphi</div></li>
+       <li><div>Adena</div></li>
+       <li><div>Adrian</div></li>
+       <li><div>Akron</div></li>
+       <li><div>Albany</div></li>
+       <li><div>Alexandria</div></li>
+       <li><div>Alger</div></li>
+       <li><div>Alledonia</div></li>
+       <li><div>Alliance</div></li>
+       <li><div>Alpha</div></li>
+       <li><div>Alvada</div></li>
+       <li><div>Alvordton</div></li>
+       <li><div>Amanda</div></li>
+       <li><div>Amelia</div></li>
+       <li><div>Amesville</div></li>
 </ul>
 
 <h2>Menu with custom markup</h2>
-<div id="menu5">
-       <blockquote>Aberdeen</blockquote>
-       <blockquote>Ada</blockquote>
-       <blockquote class="ui-state-disabled">Adamsville</blockquote>
-       <blockquote>Addyston</blockquote>
-       <blockquote>Delphi
-               <div>
-                       <blockquote>Ada</blockquote>
-                       <blockquote>Saarland</blockquote>
-                       <blockquote>Salzburg</blockquote>
-               </div>
+<div id="menu5" class="menuElement">
+       <blockquote><div>Aberdeen</div></blockquote>
+       <blockquote><div>Ada</div></blockquote>
+       <blockquote class="ui-state-disabled"><div>Adamsville</div></blockquote>
+       <blockquote><div>Addyston</div></blockquote>
+       <blockquote>
+               <div>Delphi</div>
+               <blockquote class="menuElement">
+                       <blockquote><div>Ada</div></blockquote>
+                       <blockquote><div>Saarland</div></blockquote>
+                       <blockquote><div>Salzburg</div></blockquote>
+               </blockquote>
        </blockquote>
-       <blockquote>Saarland</blockquote>
-       <blockquote>Salzburg
-               <div>
-                       <blockquote>Delphi
-                               <div>
-                                       <blockquote>Ada</blockquote>
-                                       <blockquote>Saarland</blockquote>
-                                       <blockquote>Salzburg</blockquote>
-                               </div>
+       <blockquote><div>Saarland</div></blockquote>
+       <blockquote>
+               <div>Salzburg</div>
+               <blockquote class="menuElement">
+                       <blockquote>
+                               <div>Delphi</div>
+                               <blockquote class="menuElement">
+                                       <blockquote><div>Ada</div></blockquote>
+                                       <blockquote><div>Saarland</div></blockquote>
+                                       <blockquote><div>Salzburg</div></blockquote>
+                               </blockquote>
                        </blockquote>
-                       <blockquote>Delphi
-                               <div>
-                                       <blockquote>Ada</blockquote>
-                                       <blockquote>Saarland</blockquote>
-                                       <blockquote>Salzburg</blockquote>
-                               </div>
+                       <blockquote>
+                               <div>Delphi</div>
+                               <blockquote class="menuElement">
+                                       <blockquote><div>Ada</div></blockquote>
+                                       <blockquote><div>Saarland</div></blockquote>
+                                       <blockquote><div>Salzburg</div></blockquote>
+                               </blockquote>
                        </blockquote>
-                       <blockquote>Perch</blockquote>
-               </div>
+                       <blockquote><div>Perch</div></blockquote>
+               </blockquote>
        </blockquote>
 </div>
 
 <h2>Menu with custom markup, multi-line items and a custom submenu icon</h2>
 <div class="menuElement" id="menu6">
        <div class="address-item">
-               <span class="address-header">John Doe</span>
-               <span class="address-content">78 West Main St Apt 3A</span>
-               <span class="address-content">Bloomsburg, PA 12345</span>
+               <div>
+                       <span class="address-header">John Doe</span>
+                       <span class="address-content">78 West Main St Apt 3A</span>
+                       <span class="address-content">Bloomsburg, PA 12345</span>
+               </div>
        </div>
        <div class="address-item">
-               <span class="address-header">Jane Doe</span>
-               <span class="address-content">78 West Main St Apt 3A</span>
-               <span class="address-content">Bloomsburg, PA 12345</span>
+               <div>
+                       <span class="address-header">Jane Doe</span>
+                       <span class="address-content">78 West Main St Apt 3A</span>
+                       <span class="address-content">Bloomsburg, PA 12345</span>
+               </div>
        </div>
        <div class="address-item ui-state-disabled">
-               <span class="address-header">James Doe</span>
-               <span class="address-content">78 West Main St Apt 3A</span>
-               <span class="address-content">Bloomsburg, PA 12345</span>
+               <div>
+                       <span class="address-header">James Doe</span>
+                       <span class="address-content">78 West Main St Apt 3A</span>
+                       <span class="address-content">Bloomsburg, PA 12345</span>
+               </div>
        </div>
        <div class="address-item">
-               <span class="address-header">Jenny Doe</span>
-               <span class="address-content">78 West Main St Apt 3A</span>
-               <span class="address-content">Bloomsburg, PA 12345</span>
+               <div>
+                       <span class="address-header">Jenny Doe</span>
+                       <span class="address-content">78 West Main St Apt 3A</span>
+                       <span class="address-content">Bloomsburg, PA 12345</span>
+               </div>
        </div>
        <div class="address-item">
-               <span class="address-header">John Doe</span>
-               <span class="address-content">78 West Main St Apt 3A</span>
-               <span class="address-content">Bloomsburg, PA 12345</span>
+               <div>
+                       <span class="address-header">John Doe</span>
+                       <span class="address-content">78 West Main St Apt 3A</span>
+                       <span class="address-content">Bloomsburg, PA 12345</span>
+               </div>
                <div class="menuElement">
-                       <div>Ada</div>
-                       <div>Saarland</div>
-                       <div>Salzburg</div>
+                       <div>
+                               <div>Ada</div>
+                       </div>
+                       <div>
+                               <div>Saarland</div>
+                       </div>
+                       <div>
+                               <div>Salzburg</div>
+                       </div>
                </div>
        </div>
 </div>
 
 <h2>Inline with dividers and group labels</h2>
 <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 class="ui-menu-group">
+               <div><strong>Group 1</strong></div>
+       </li>
+       <li><div>Aberdeen</div></li>
+       <li><div>Ada</div></li>
+       <li><div>Adamsville</div></li>
+       <li><div>Addyston</div></li>
        <li></li>
-       <li class="ui-menu-group"><strong>Group 2</strong></li>
-       <li>Delphi
+       <li class="ui-menu-group">
+               <div><strong>Group 2</strong></div>
+       </li>
+       <li>
+               <div>Delphi</div>
                <ul>
-                       <li>Ada</li>
-                       <li>Saarland</li>
-                       <li>Salzburg</li>
+                       <li><div>Ada</div></li>
+                       <li><div>Saarland</div></li>
+                       <li><div>Salzburg</div></li>
                </ul>
        </li>
-       <li>Saarland</li>
+       <li><div>Saarland</div></li>
        <li>---</li>
-       <li class="ui-menu-group"><strong>Group 3</strong></li>
-       <li>Salzburg
+       <li class="ui-menu-group">
+               <div><strong>Group 3</strong></div>
+       </li>
+       <li>
+               <div>Salzburg</div>
                <ul>
-                       <li>Delphi
+                       <li>
+                               <div>Delphi</div>
                                <ul>
-                                       <li>Ada</li>
-                                       <li> - </li>
-                                       <li>Saarland</li>
+                                       <li><div>Ada</div></li>
+                                       <li>-</li>
+                                       <li><div>Saarland</div></li>
                                        <li>&mdash;</li>
-                                       <li>Salzburg</li>
+                                       <li><div>Salzburg</div></li>
                                        <li>&ndash;</li>
                                </ul>
                        </li>
-                       <li>Delphi
+                       <li>
+                               <div>Delphi</div>
                                <ul>
-                                       <li>Ada</li>
-                                       <li>Saarland</li>
-                                       <li>Salzburg</li>
+                                       <li><div>Ada</div></li>
+                                       <li><div>Saarland</div></li>
+                                       <li><div>Salzburg</div></li>
                                </ul>
                        </li>
-                       <li>Perch</li>
+                       <li><div>Perch</div></li>
                </ul>
        </li>
-       <li>Amesville</li>
+       <li><div>Amesville</div></li>
 </ul>
 
 <div style="position: absolute; top: 1em; right: 1em;">
index 58c561349402af262336563c7470ef31d2762c43..dae8288a2aa5f162b6ef35ff743a19d42c7b6e42 100644 (file)
        position: absolute;
 }
 .ui-menu .ui-menu-item {
-       position: relative;
        margin: 0;
-       padding: 3px 1em 3px .4em;
        cursor: pointer;
        /* support: IE10, see #8844 */
        list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
 }
+.ui-menu .ui-menu-item-wrapper {
+       position: relative;
+       padding: 3px 1em 3px .4em;
+}
 .ui-menu .ui-menu-divider {
        margin: 5px 0;
        height: 0;
@@ -42,7 +44,7 @@
 .ui-menu-icons {
        position: relative;
 }
-.ui-menu-icons .ui-menu-item {
+.ui-menu-icons .ui-menu-item-wrapper {
        padding-left: 2em;
 }
 
index 31f621d22949375f3a36b4eb7df5637138d368d7..b4909a11655c7ae552fbab37e8186880b726b07e 100644 (file)
@@ -36,7 +36,7 @@ return $.widget( "ui.menu", {
                items: "> *",
                menus: "ul",
                position: {
-                       my: "left-1 top",
+                       my: "left top",
                        at: "right top"
                },
                role: "menu",
@@ -110,7 +110,8 @@ return $.widget( "ui.menu", {
                                var target = $( event.currentTarget );
                                // Remove ui-state-active class from siblings of the newly focused menu item
                                // to avoid a jump caused by adjacent elements both having a class with a border
-                               target.siblings( ".ui-state-active" ).removeClass( "ui-state-active" );
+                               target.siblings().children( ".ui-state-active" ).removeClass( "ui-state-active" );
+
                                this.focus( event, target );
                        },
                        mouseleave: "collapseAll",
@@ -169,17 +170,18 @@ return $.widget( "ui.menu", {
                        .removeClass( "ui-menu-item" )
                        .removeAttr( "role" )
                        .removeAttr( "aria-disabled" )
-                       .removeUniqueId()
-                       .removeClass( "ui-state-hover" )
-                       .removeAttr( "tabIndex" )
-                       .removeAttr( "role" )
-                       .removeAttr( "aria-haspopup" )
-                       .children().each( function() {
-                               var elem = $( this );
-                               if ( elem.data( "ui-menu-submenu-carat" ) ) {
-                                       elem.remove();
-                               }
-                       });
+                       .children( ".ui-menu-item-wrapper" )
+                               .removeUniqueId()
+                               .removeClass( "ui-menu-item-wrapper ui-state-hover" )
+                               .removeAttr( "tabIndex" )
+                               .removeAttr( "role" )
+                               .removeAttr( "aria-haspopup" )
+                               .children().each(function() {
+                                       var elem = $( this );
+                                       if ( elem.data( "ui-menu-submenu-carat" ) ) {
+                                               elem.remove();
+                                       }
+                               });
 
                // Destroy menu dividers
                this.element.find( ".ui-menu-divider" ).removeClass( "ui-menu-divider ui-widget-content" );
@@ -267,7 +269,7 @@ return $.widget( "ui.menu", {
 
        _activate: function( event ) {
                if ( !this.active.is( ".ui-state-disabled" ) ) {
-                       if ( this.active.is( "[aria-haspopup='true']" ) ) {
+                       if ( this.active.children( "[aria-haspopup='true']" ).length ) {
                                this.expand( event );
                        } else {
                                this.select( event );
@@ -294,7 +296,7 @@ return $.widget( "ui.menu", {
                        })
                        .each(function() {
                                var menu = $( this ),
-                                       item = menu.parent(),
+                                       item = menu.prev(),
                                        submenuCarat = $( "<span>" )
                                                .addClass( "ui-menu-icon ui-icon " + icon )
                                                .data( "ui-menu-submenu-carat", true );
@@ -319,11 +321,14 @@ return $.widget( "ui.menu", {
                // Don't refresh list items that are already adapted
                items.not( ".ui-menu-item, .ui-menu-divider" )
                        .addClass( "ui-menu-item" )
-                       .uniqueId()
-                       .attr({
-                               tabIndex: -1,
-                               role: this._itemRole()
-                       });
+                       .children()
+                               .not( ".ui-menu" )
+                                       .addClass( "ui-menu-item-wrapper" )
+                                       .uniqueId()
+                                       .attr({
+                                               tabIndex: -1,
+                                               role: this._itemRole()
+                                       });
 
                // Add aria-disabled attribute to any disabled menu item
                items.filter( ".ui-state-disabled" ).attr( "aria-disabled", "true" );
@@ -362,7 +367,10 @@ return $.widget( "ui.menu", {
                this._scrollIntoView( item );
 
                this.active = item.first();
-               focused = this.active.addClass( "ui-state-focus" ).removeClass( "ui-state-active" );
+               focused = this.active.children( ".ui-menu-item-wrapper" )
+                       .addClass( "ui-state-focus" )
+                       .removeClass( "ui-state-active" );
+
                // Only update aria-activedescendant if there's a role
                // otherwise we assume focus is managed elsewhere
                if ( this.options.role ) {
@@ -372,8 +380,9 @@ return $.widget( "ui.menu", {
                // Highlight active parent menu item, if any
                this.active
                        .parent()
-                       .closest( ".ui-menu-item" )
-                       .addClass( "ui-state-active" );
+                               .closest( ".ui-menu-item" )
+                                       .children( ".ui-menu-item-wrapper" )
+                                               .addClass( "ui-state-active" );
 
                if ( event && event.type === "keydown" ) {
                        this._close();
@@ -419,7 +428,7 @@ return $.widget( "ui.menu", {
                        return;
                }
 
-               this.active.removeClass( "ui-state-focus" );
+               this.active.children( ".ui-menu-item-wrapper" ).removeClass( "ui-state-focus" );
                this.active = null;
 
                this._trigger( "blur", event, { item: this.active } );
@@ -628,7 +637,7 @@ return $.widget( "ui.menu", {
                this._trigger( "select", event, ui );
        },
 
-       _filterMenuItems: function(character) {
+       _filterMenuItems: function( character ) {
                var escapedCharacter = character.replace( /[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&" ),
                        regex = new RegExp( "^" + escapedCharacter, "i" );
 
@@ -638,7 +647,8 @@ return $.widget( "ui.menu", {
                        // Only match on items, not dividers or other content (#10571)
                        .filter( ".ui-menu-item" )
                        .filter(function() {
-                               return regex.test( $.trim( $( this ).text() ) );
+                               return regex.test(
+                                       $.trim( $( this ).children( ".ui-menu-item-wrapper" ).text() ) );
                        });
        }
 });