library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Menu: Update autocomplete to use deactivate and check for focus class

Browse Source
This commit is contained in:
jzaefferer 2011-02-24 12:05:20 +01:00
parent 5c687be331
commit 38cfcfffe9
5 changed files with 44 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tests/unit/autocomplete/autocomplete_core.js
View File

@ -49,7 +49,7 @@ test( "prevent form submit on enter when menu is active", function() {
event = $.Event( "keydown" );
event.keyCode = $.ui.keyCode.DOWN;
ac.trigger( event );
same( $( ".ui-menu-item:has(.ui-state-hover)" ).length, 1, "menu item is active" );
same( $( ".ui-menu-item:has(.ui-state-focus)" ).length, 1, "menu item is active" );
event = $.Event( "keydown" );
event.keyCode = $.ui.keyCode.ENTER;

21
tests/visual/menu/menu.html
View File

@ -24,7 +24,7 @@
});
}
var menus = $("#menu1, #menu2");
var menus = $("#menu1, #menu2, #menu3");
create();
$("#toggle-destroy").toggle(function() {
@ -55,7 +55,24 @@
<li><a href="#">Salzburg</a></li>
</ul>
<ul id="menu2">
<ul id="menu1">
<li><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>
<ul>
<li><a href="#">Ada</a></li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
</ul>
</li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
</ul>
<ul id="menu3">
<li><a href="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li>
<li><a href="#">Adamsville</a></li>

2
themes/base/jquery.ui.menu.css vendored
View File

@ -37,3 +37,5 @@
font-weight: normal;
margin: -1px;
}
.ui-menu .ui-icon { float: right; }

8
ui/jquery.ui.autocomplete.js vendored
View File

@ -323,7 +323,7 @@ $.widget( "ui.autocomplete", {
clearTimeout( this.closing );
if ( this.menu.element.is(":visible") ) {
this.menu.element.hide();
this.menu.deactivate();
this.menu.blur();
this._trigger( "close", event );
}
},
@ -358,8 +358,8 @@ $.widget( "ui.autocomplete", {
.empty()
.zIndex( this.element.zIndex() + 1 );
this._renderMenu( ul, items );
// TODO refresh should check if the active item is still in the dom, removing the need for a manual deactivate
this.menu.deactivate();
// TODO refresh should check if the active item is still in the dom, removing the need for a manual blur
this.menu.blur();
this.menu.refresh();
// size and position menu
@ -400,7 +400,7 @@ $.widget( "ui.autocomplete", {
if ( this.menu.first() && /^previous/.test(direction) ||
this.menu.last() && /^next/.test(direction) ) {
this._value( this.term );
this.menu.deactivate();
this.menu.blur();
return;
}
this.menu[ direction ]( event );

19
ui/jquery.ui.menu.js vendored
View File

@ -17,6 +17,12 @@ var idIncrement = 0;
$.widget("ui.menu", {
defaultElement: "<ul>",
options: {
position: {
my: "left top",
at: "right top"
}
},
_create: function() {
var self = this;
this.menuId = this.element.attr( "id" ) || "ui-menu-" + idIncrement++;
@ -145,8 +151,19 @@ $.widget("ui.menu", {
},
refresh: function() {
// initialize nested menus
// TODO add role=listbox to these, too? or just the top level menu?
var submenus = this.element.find("ul:not(.ui-menu)")
.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
.hide()
submenus
.prev("a")
.prepend('<span class="ui-icon ui-icon-carat-1-e"></span>');
// don't refresh list items that are already adapted
var items = this.element.children( "li:not(.ui-menu-item):has(a)" )
var items = submenus.add(this.element).children( "li:not(.ui-menu-item):has(a)" )
.addClass( "ui-menu-item" )
.attr( "role", "menuitem" );