mirror of
https://github.com/jquery/jquery-ui.git
synced 2026-04-20 03:02:41 -04:00
Menu: Wrap menu items in a <div>
This avoids styling issues where ui-state-focus rules apply to submenus. Fixes #10162 Closes gh-1342
This commit is contained in:
TJ VanToll
@@ -25,14 +25,14 @@
|
||||
<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">
|
||||
|
||||
@@ -22,38 +22,38 @@
|
||||
<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">
|
||||
|
||||
@@ -22,20 +22,38 @@
|
||||
<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">
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
font-size: 15px;
|
||||
line-height: 15px;
|
||||
}
|
||||
.ui-menu .ui-menu-item {
|
||||
.ui-menu .ui-menu-item-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
#menu3 {
|
||||
@@ -52,263 +52,284 @@
|
||||
<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>–</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>—</li>
|
||||
<li>Salzburg</li>
|
||||
<li><div>Salzburg</div></li>
|
||||
<li>–</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>
|
||||
|
||||
@@ -7,7 +7,7 @@ TestHelpers.commonWidgetTests( "menu", {
|
||||
items: "> *",
|
||||
menus: "ul",
|
||||
position: {
|
||||
my: "left-1 top",
|
||||
my: "left top",
|
||||
at: "right top"
|
||||
},
|
||||
role: "menu",
|
||||
|
||||
@@ -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 );
|
||||
});
|
||||
|
||||
@@ -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() );
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -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" ) );
|
||||
});
|
||||
|
||||
@@ -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 + ")" );
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -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" );
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
});
|
||||
|
||||
$( "#menu5" ).menu({
|
||||
menus: "div",
|
||||
menus: ".menuElement",
|
||||
select: logger
|
||||
});
|
||||
|
||||
@@ -56,241 +56,288 @@
|
||||
|
||||
<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>—</li>
|
||||
<li>Salzburg</li>
|
||||
<li><div>Salzburg</div></li>
|
||||
<li>–</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;">
|
||||
|
||||
@@ -19,13 +19,15 @@
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
62
ui/menu.js
62
ui/menu.js
@@ -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() ) );
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user