mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-10-05 01:44:18 +00:00
Menu: Remove the requirement to use anchors in menu items
This commit is contained in:
Kris Borchers
parent
e14f75ed48
commit
3a61627a50
@ -22,42 +22,38 @@
|
||||
<body>
|
||||
|
||||
<ul id="menu">
|
||||
<li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
|
||||
<li><a href="#">Ada</a></li>
|
||||
<li><a href="#">Adamsville</a></li>
|
||||
<li><a href="#">Addyston</a></li>
|
||||
<li>
|
||||
<a href="#">Delphi</a>
|
||||
<li class="ui-state-disabled">Aberdeen</li>
|
||||
<li>Ada</li>
|
||||
<li>Adamsville</li>
|
||||
<li>Addyston</li>
|
||||
<li>Delphi
|
||||
<ul>
|
||||
<li class="ui-state-disabled"><a href="#">Ada</a></li>
|
||||
<li><a href="#">Saarland</a></li>
|
||||
<li><a href="#">Salzburg</a></li>
|
||||
<li class="ui-state-disabled">Ada</li>
|
||||
<li>Saarland</li>
|
||||
<li>Salzburg</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Saarland</a></li>
|
||||
<li>
|
||||
<a href="#">Salzburg</a>
|
||||
<li>Saarland</li>
|
||||
<li>Salzburg
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Delphi</a>
|
||||
<li>Delphi
|
||||
<ul>
|
||||
<li><a href="#">Ada</a></li>
|
||||
<li><a href="#">Saarland</a></li>
|
||||
<li><a href="#">Salzburg</a></li>
|
||||
<li>Ada</li>
|
||||
<li>Saarland</li>
|
||||
<li>Salzburg</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Delphi</a>
|
||||
<li>Delphi
|
||||
<ul>
|
||||
<li><a href="#">Ada</a></li>
|
||||
<li><a href="#">Saarland</a></li>
|
||||
<li><a href="#">Salzburg</a></li>
|
||||
<li>Ada</li>
|
||||
<li>Saarland</li>
|
||||
<li>Salzburg</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Perch</a></li>
|
||||
<li>Perch</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="ui-state-disabled"><a href="#">Amesville</a></li>
|
||||
<li class="ui-state-disabled">Amesville</li>
|
||||
</ul>
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
@ -48,220 +48,211 @@
|
||||
<div id="qunit-fixture">
|
||||
|
||||
<ul class="foo" id="menu1">
|
||||
<li class="foo"><a class="foo" href="#">Aberdeen</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Ada</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adamsville</a></li>
|
||||
<li class="foo"><a id="testID1" class="foo" href="#">Addyston</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adelphi</a></li>
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<ul id="menu2">
|
||||
<li class="foo"><a class="foo" href="#">Aberdeen</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Ada</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adamsville</a></li>
|
||||
<li class="foo"><a class="foo" href="#"><span class="ui-icon ui-icon-print"></span>Addyston</a></li>
|
||||
<li>
|
||||
<a href="#">Delphi</a>
|
||||
<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
|
||||
<ul>
|
||||
<li class="foo"><a class="foo" href="#">Ada</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Saarland</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Salzburg</a></li>
|
||||
<li class="foo">Ada</li>
|
||||
<li class="foo">Saarland</li>
|
||||
<li class="foo">Salzburg</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="foo"><a class="foo" href="#">Saarland</a></li>
|
||||
<li>
|
||||
<a href="#">Salzburg</a>
|
||||
<li class="foo">Saarland</li>
|
||||
<li>Salzburg
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Delphi</a>
|
||||
<li>Delphi
|
||||
<ul>
|
||||
<li class="foo"><a class="foo" href="#">Ada</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Saarland</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Salzburg</a></li>
|
||||
<li class="foo">Ada</li>
|
||||
<li class="foo">Saarland</li>
|
||||
<li class="foo">Salzburg</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Delphi</a>
|
||||
<li>Delphi
|
||||
<ul>
|
||||
<li class="foo"><a class="foo" href="#">Ada</a></li>
|
||||
<li class="foo">Ada</li>
|
||||
<li> - </li>
|
||||
<li class="foo"><a class="foo" href="#">Saarland</a></li>
|
||||
<li class="foo">Saarland</li>
|
||||
<li></li>
|
||||
<li class="foo"><a class="foo" href="#">Salzburg</a></li>
|
||||
<li class="foo">Salzburg</li>
|
||||
<li>–</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="foo"><a class="foo" href="#">Perch</a></li>
|
||||
<li class="foo">Perch</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="foo" id="menu3">
|
||||
<li class="foo"><a class="foo" href="#">Aberdeen</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Ada</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adamsville</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Addyston</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adelphi</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adena</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adrian</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Akron</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Albany</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alexandria</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alger</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alledonia</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alliance</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alpha</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alvada</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alvordton</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Amanda</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Amelia</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Amesville</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Aberdeen</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Ada</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adamsville</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Addyston</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adelphi</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adena</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adrian</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Akron</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Albany</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alexandria</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alger</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alledonia</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alliance</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alpha</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alvada</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alvordton</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Amanda</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Amelia</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Amesville</a></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">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>
|
||||
</ul>
|
||||
|
||||
<ul class="foo" id="menu4">
|
||||
<li class="foo"><a class="foo" href="#">Aberdeen</a></li>
|
||||
<li class="foo">Aberdeen</li>
|
||||
<li class="foo">
|
||||
<a class="foo" href="#">Ada</a>
|
||||
Ada
|
||||
<ul class="foo">
|
||||
<li class="foo"><a class="foo" href="#">Aberdeen</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Ada</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adamsville</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Addyston</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adelphi</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adena</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adrian</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Akron</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Albany</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alexandria</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alger</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alledonia</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alliance</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alpha</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alvada</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alvordton</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Amanda</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Amelia</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Amesville</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Aberdeen</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Ada</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adamsville</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Addyston</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adelphi</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adena</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adrian</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Akron</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Albany</a></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">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>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="foo"><a class="foo" href="#">Adamsville</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Addyston</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adelphi</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adena</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adrian</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Akron</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Albany</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alexandria</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alger</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alledonia</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alliance</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alpha</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alvada</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alvordton</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Amanda</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Amelia</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Amesville</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Aberdeen</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Ada</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adamsville</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Addyston</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adelphi</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adena</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adrian</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Akron</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Albany</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alexandria</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alger</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alledonia</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alliance</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alpha</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alvada</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Alvordton</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Amanda</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Amelia</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Amesville</a></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>
|
||||
</ul>
|
||||
|
||||
<div id="menu5">
|
||||
<blockquote><a href="#">Aberdeen</a></blockquote>
|
||||
<blockquote><a href="#">Ada</a></blockquote>
|
||||
<blockquote><a href="#">Adamsville</a></blockquote>
|
||||
<blockquote><a href="#">Addyston</a></blockquote>
|
||||
<blockquote>
|
||||
<a href="#">Delphi</a>
|
||||
<blockquote>Aberdeen</blockquote>
|
||||
<blockquote>Ada</blockquote>
|
||||
<blockquote>Adamsville</blockquote>
|
||||
<blockquote>Addyston</blockquote>
|
||||
<blockquote>Delphi
|
||||
<div>
|
||||
<blockquote><a href="#">Ada</a></blockquote>
|
||||
<blockquote><a href="#">Saarland</a></blockquote>
|
||||
<blockquote><a href="#">Salzburg</a></blockquote>
|
||||
<blockquote>Ada</blockquote>
|
||||
<blockquote>Saarland</blockquote>
|
||||
<blockquote>Salzburg</blockquote>
|
||||
</div>
|
||||
</blockquote>
|
||||
<blockquote><a href="#">Saarland</a></blockquote>
|
||||
<blockquote>
|
||||
<a href="#">Salzburg</a>
|
||||
<blockquote>Saarland</blockquote>
|
||||
<blockquote>Salzburg
|
||||
<div>
|
||||
<blockquote>
|
||||
<a href="#">Delphi</a>
|
||||
<blockquote>Delphi
|
||||
<div>
|
||||
<blockquote><a href="#">Ada</a></blockquote>
|
||||
<blockquote><a id="testID2" href="#">Saarland</a></blockquote>
|
||||
<blockquote><a href="#">Salzburg</a></blockquote>
|
||||
<blockquote>Ada</blockquote>
|
||||
<blockquote id="testID2">Saarland</blockquote>
|
||||
<blockquote>Salzburg</blockquote>
|
||||
</div>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<a href="#">Delphi</a>
|
||||
<blockquote>Delphi
|
||||
<div>
|
||||
<blockquote><a href="#">Ada</a></blockquote>
|
||||
<blockquote><a href="#">Saarland</a></blockquote>
|
||||
<blockquote><a href="#">Salzburg</a></blockquote>
|
||||
<blockquote>Ada</blockquote>
|
||||
<blockquote>Saarland</blockquote>
|
||||
<blockquote>Salzburg</blockquote>
|
||||
</div>
|
||||
</blockquote>
|
||||
<blockquote><a href="#">Perch</a></blockquote>
|
||||
<blockquote>Perch</blockquote>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<ul id="menu6">
|
||||
<li class="foo"><a class="foo" href="#">Aberdeen</a></li>
|
||||
<li class="foo ui-state-disabled"><a class="foo" href="#">Ada</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Adamsville</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Addyston</a></li>
|
||||
<li class="ui-state-disabled">
|
||||
<a id="testID3" href="#">Delphi</a>
|
||||
<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
|
||||
<ul>
|
||||
<li class="foo"><a class="foo" href="#">Ada</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Saarland</a></li>
|
||||
<li class="foo"><a class="foo" href="#">Salzburg</a></li>
|
||||
<li class="foo">Ada</li>
|
||||
<li class="foo">Saarland</li>
|
||||
<li class="foo">Salzburg</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="foo"><a class="foo" href="#">Saarland</a></li>
|
||||
<li class="foo">Saarland</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
@ -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" ).parent().index() );
|
||||
log( $( event.target ).find( ".ui-state-focus" ).index() );
|
||||
}
|
||||
});
|
||||
|
||||
@ -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" ).parent().index() );
|
||||
log( $( event.target ).find( ".ui-state-focus" ).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" ).parent().index() );
|
||||
log( $( event.target ).find( ".ui-state-focus" ).index() );
|
||||
}
|
||||
});
|
||||
|
||||
@ -341,7 +341,7 @@ asyncTest( "handle keyboard navigation on menu without scroll and with submenus"
|
||||
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
|
||||
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
|
||||
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
|
||||
equal( logOutput(), "keydown,5,6,0,1,0,2,4,0", "Keydown skip dividers and items without anchors" );
|
||||
equal( logOutput(), "keydown,5,6,0,1,0,2,4,0", "Keydown skip dividers" );
|
||||
|
||||
log( "keydown", true );
|
||||
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
|
||||
@ -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" ).parent().index());
|
||||
log( $( event.target ).find( ".ui-state-focus" ).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" ).parent().index());
|
||||
log( $( event.target ).find( ".ui-state-focus" ).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" ).parent().index());
|
||||
log( $( event.target ).find( ".ui-state-focus" ).index());
|
||||
}
|
||||
});
|
||||
|
||||
@ -581,7 +581,7 @@ asyncTest( "handle keyboard navigation with spelling of menu items", function()
|
||||
expect( 2 );
|
||||
var element = $( "#menu2" ).menu({
|
||||
focus: function( event ) {
|
||||
log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
|
||||
log( $( event.target ).find( ".ui-state-focus" ).index() );
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -73,11 +73,11 @@ test( "refresh icons (see #9377)", function() {
|
||||
expect( 3 );
|
||||
var element = $( "#menu1" ).menu();
|
||||
ok( !element.hasClass( "ui-menu-icons") );
|
||||
element.find( "li:first a" ).html( "<span class='ui-icon ui-icon-disk'></span>Save</a>" );
|
||||
element.find( "li:first" ).html( "<span class='ui-icon ui-icon-disk'></span>Save</a>" );
|
||||
element.menu( "refresh" );
|
||||
|
||||
ok( element.hasClass( "ui-menu-icons" ) );
|
||||
element.find( "li:first a" ).html( "Save" );
|
||||
element.find( "li:first" ).html( "Save" );
|
||||
element.menu( "refresh" );
|
||||
ok( !element.hasClass( "ui-menu-icons" ) );
|
||||
});
|
||||
|
||||
@ -66,15 +66,14 @@ test( "{ icons: { submenu: 'custom' } }", function() {
|
||||
test( "{ role: 'menu' } ", function() {
|
||||
var element = $( "#menu1" ).menu(),
|
||||
items = element.find( "li" );
|
||||
expect( 2 + 5 * items.length );
|
||||
expect( 2 + 4 * items.length );
|
||||
equal( element.attr( "role" ), "menu" );
|
||||
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" ), "presentation", "menu item ("+ item + ") role" );
|
||||
equal( $( "a", this ).attr( "role" ), "menuitem", "menu item ("+ item + ") role" );
|
||||
ok( $( "a", this ).hasClass( "ui-corner-all" ), "a element class for menu item ("+ item + ")" );
|
||||
equal( $( "a", this ).attr( "tabindex" ), "-1", "a element tabindex for menu item ("+ item + ")" );
|
||||
equal( $( this ).attr( "role" ), "menuitem", "menu item ("+ item + ") role" );
|
||||
ok( $( this ).hasClass( "ui-corner-all" ), "class for menu item ("+ item + ")" );
|
||||
equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" );
|
||||
});
|
||||
});
|
||||
|
||||
@ -83,15 +82,14 @@ test( "{ role: 'listbox' } ", function() {
|
||||
role: "listbox"
|
||||
}),
|
||||
items = element.find( "li" );
|
||||
expect( 2 + 5 * items.length );
|
||||
expect( 2 + 4 * items.length );
|
||||
equal( element.attr( "role" ), "listbox" );
|
||||
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" ), "presentation", "menu item ("+ item + ") role" );
|
||||
equal( $( "a", this ).attr( "role" ), "option", "menu item ("+ item + ") role" );
|
||||
ok( $( "a", this ).hasClass( "ui-corner-all" ), "a element class for menu item ("+ item + ")" );
|
||||
equal( $( "a", this ).attr( "tabindex" ), "-1", "a element tabindex for menu item ("+ item + ")" );
|
||||
equal( $( this ).attr( "role" ), "option", "menu item ("+ item + ") role" );
|
||||
ok( $( this ).hasClass( "ui-corner-all" ), "class for menu item ("+ item + ")" );
|
||||
equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" );
|
||||
});
|
||||
});
|
||||
|
||||
@ -100,15 +98,14 @@ test( "{ role: null }", function() {
|
||||
role: null
|
||||
}),
|
||||
items = element.find( "li" );
|
||||
expect( 2 + 5 * items.length );
|
||||
expect( 2 + 4 * items.length );
|
||||
strictEqual( element.attr( "role" ), undefined );
|
||||
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" ), "presentation", "menu item ("+ item + ") role" );
|
||||
equal( $( "a", this ).attr( "role" ), undefined, "menu item ("+ item + ") role" );
|
||||
ok( $( "a", this ).hasClass( "ui-corner-all" ), "a element class for menu item ("+ item + ")" );
|
||||
equal( $( "a", this ).attr( "tabindex" ), "-1", "a element tabindex for menu item ("+ item + ")" );
|
||||
equal( $( this ).attr( "role" ), undefined, "menu item ("+ item + ") role" );
|
||||
ok( $( this ).hasClass( "ui-corner-all" ), "class for menu item ("+ item + ")" );
|
||||
equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" );
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ TestHelpers.menu = {
|
||||
|
||||
click: function( menu, item ) {
|
||||
lastItem = item;
|
||||
menu.children( ":eq(" + item + ")" ).find( "a:first" ).trigger( "click" );
|
||||
menu.children( ":eq(" + item + ")" ).trigger( "click" );
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
21
themes/base/jquery.ui.menu.css
vendored
21
themes/base/jquery.ui.menu.css
vendored
@ -21,8 +21,11 @@
|
||||
}
|
||||
.ui-menu .ui-menu-item {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: 2px .4em;
|
||||
line-height: 1.5;
|
||||
min-height: 0; /* support: IE7 */
|
||||
font-weight: normal;
|
||||
/* support: IE10, see #8844 */
|
||||
list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
|
||||
}
|
||||
@ -33,16 +36,8 @@
|
||||
line-height: 0;
|
||||
border-width: 1px 0 0 0;
|
||||
}
|
||||
.ui-menu .ui-menu-item a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 2px .4em;
|
||||
line-height: 1.5;
|
||||
min-height: 0; /* support: IE7 */
|
||||
font-weight: normal;
|
||||
}
|
||||
.ui-menu .ui-menu-item a.ui-state-focus,
|
||||
.ui-menu .ui-menu-item a.ui-state-active {
|
||||
.ui-menu .ui-state-focus,
|
||||
.ui-menu .ui-state-active {
|
||||
font-weight: normal;
|
||||
margin: -1px;
|
||||
}
|
||||
@ -60,7 +55,7 @@
|
||||
.ui-menu-icons {
|
||||
position: relative;
|
||||
}
|
||||
.ui-menu-icons .ui-menu-item a {
|
||||
.ui-menu-icons .ui-menu-item {
|
||||
position: relative;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
48
ui/jquery.ui.menu.js
vendored
48
ui/jquery.ui.menu.js
vendored
@ -66,14 +66,14 @@ $.widget( "ui.menu", {
|
||||
this._on({
|
||||
// Prevent focus from sticking to links inside menu after clicking
|
||||
// them (focus should always stay on UL during navigation).
|
||||
"mousedown .ui-menu-item > a": function( event ) {
|
||||
"mousedown .ui-menu-item": function( event ) {
|
||||
event.preventDefault();
|
||||
},
|
||||
"click .ui-state-disabled > a": function( event ) {
|
||||
"click .ui-state-disabled": function( event ) {
|
||||
event.preventDefault();
|
||||
},
|
||||
"click .ui-menu-item:has(a)": function( event ) {
|
||||
var target = $( event.target ).closest( ".ui-menu-item" );
|
||||
"click .ui-menu-item": function( event ) {
|
||||
var target = $( event.target );
|
||||
if ( !this.mouseHandled && target.not( ".ui-state-disabled" ).length ) {
|
||||
this.select( event );
|
||||
|
||||
@ -102,7 +102,7 @@ $.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().children( ".ui-state-active" ).removeClass( "ui-state-active" );
|
||||
target.siblings( ".ui-state-active" ).removeClass( "ui-state-active" );
|
||||
this.focus( event, target );
|
||||
},
|
||||
mouseleave: "collapseAll",
|
||||
@ -161,7 +161,6 @@ $.widget( "ui.menu", {
|
||||
.removeClass( "ui-menu-item" )
|
||||
.removeAttr( "role" )
|
||||
.removeAttr( "aria-disabled" )
|
||||
.children( "a" )
|
||||
.removeUniqueId()
|
||||
.removeClass( "ui-corner-all ui-state-hover" )
|
||||
.removeAttr( "tabIndex" )
|
||||
@ -236,7 +235,7 @@ $.widget( "ui.menu", {
|
||||
|
||||
regex = new RegExp( "^" + escape( character ), "i" );
|
||||
match = this.activeMenu.children( ".ui-menu-item" ).filter(function() {
|
||||
return regex.test( $( this ).children( "a" ).text() );
|
||||
return regex.test( $( this ).text() );
|
||||
});
|
||||
match = skip && match.index( this.active.next() ) !== -1 ?
|
||||
this.active.nextAll( ".ui-menu-item" ) :
|
||||
@ -248,7 +247,7 @@ $.widget( "ui.menu", {
|
||||
character = String.fromCharCode( event.keyCode );
|
||||
regex = new RegExp( "^" + escape( character ), "i" );
|
||||
match = this.activeMenu.children( ".ui-menu-item" ).filter(function() {
|
||||
return regex.test( $( this ).children( "a" ).text() );
|
||||
return regex.test( $( this ).text() );
|
||||
});
|
||||
}
|
||||
|
||||
@ -274,7 +273,7 @@ $.widget( "ui.menu", {
|
||||
|
||||
_activate: function( event ) {
|
||||
if ( !this.active.is( ".ui-state-disabled" ) ) {
|
||||
if ( this.active.children( "a[aria-haspopup='true']" ).length ) {
|
||||
if ( this.active.is( "[aria-haspopup='true']" ) ) {
|
||||
this.expand( event );
|
||||
} else {
|
||||
this.select( event );
|
||||
@ -300,7 +299,7 @@ $.widget( "ui.menu", {
|
||||
})
|
||||
.each(function() {
|
||||
var menu = $( this ),
|
||||
item = menu.prev( "a" ),
|
||||
item = menu.parent(),
|
||||
submenuCarat = $( "<span>" )
|
||||
.addClass( "ui-menu-icon ui-icon " + icon )
|
||||
.data( "ui-menu-submenu-carat", true );
|
||||
@ -313,18 +312,6 @@ $.widget( "ui.menu", {
|
||||
|
||||
menus = submenus.add( this.element );
|
||||
|
||||
// Don't refresh list items that are already adapted
|
||||
menus.children( ":not(.ui-menu-item):has(a)" )
|
||||
.addClass( "ui-menu-item" )
|
||||
.attr( "role", "presentation" )
|
||||
.children( "a" )
|
||||
.uniqueId()
|
||||
.addClass( "ui-corner-all" )
|
||||
.attr({
|
||||
tabIndex: -1,
|
||||
role: this._itemRole()
|
||||
});
|
||||
|
||||
// Initialize unlinked menu-items containing spaces and/or dashes only as dividers
|
||||
menus.children( ":not(.ui-menu-item)" ).each(function() {
|
||||
var item = $( this );
|
||||
@ -334,6 +321,16 @@ $.widget( "ui.menu", {
|
||||
}
|
||||
});
|
||||
|
||||
// Don't refresh list items that are already adapted
|
||||
menus.children( ":not(.ui-menu-item,.ui-menu-divider)" )
|
||||
.addClass( "ui-menu-item" )
|
||||
.uniqueId()
|
||||
.addClass( "ui-corner-all" )
|
||||
.attr({
|
||||
tabIndex: -1,
|
||||
role: this._itemRole()
|
||||
});
|
||||
|
||||
// Add aria-disabled attribute to any disabled menu item
|
||||
menus.children( ".ui-state-disabled" ).attr( "aria-disabled", "true" );
|
||||
|
||||
@ -371,7 +368,7 @@ $.widget( "ui.menu", {
|
||||
this._scrollIntoView( item );
|
||||
|
||||
this.active = item.first();
|
||||
focused = this.active.children( "a" ).addClass( "ui-state-focus" );
|
||||
focused = this.active.addClass( "ui-state-focus" );
|
||||
// Only update aria-activedescendant if there's a role
|
||||
// otherwise we assume focus is managed elsewhere
|
||||
if ( this.options.role ) {
|
||||
@ -382,7 +379,6 @@ $.widget( "ui.menu", {
|
||||
this.active
|
||||
.parent()
|
||||
.closest( ".ui-menu-item" )
|
||||
.children( "a:first" )
|
||||
.addClass( "ui-state-active" );
|
||||
|
||||
if ( event && event.type === "keydown" ) {
|
||||
@ -429,7 +425,7 @@ $.widget( "ui.menu", {
|
||||
return;
|
||||
}
|
||||
|
||||
this.active.children( "a" ).removeClass( "ui-state-focus" );
|
||||
this.active.removeClass( "ui-state-focus" );
|
||||
this.active = null;
|
||||
|
||||
this._trigger( "blur", event, { item: this.active } );
|
||||
@ -499,7 +495,7 @@ $.widget( "ui.menu", {
|
||||
.attr( "aria-hidden", "true" )
|
||||
.attr( "aria-expanded", "false" )
|
||||
.end()
|
||||
.find( "a.ui-state-active" )
|
||||
.find( ".ui-state-active" )
|
||||
.removeClass( "ui-state-active" );
|
||||
},
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user