diff options
author | Jörn Zaefferer <joern.zaefferer@gmail.com> | 2011-07-28 15:47:32 +0200 |
---|---|---|
committer | Jörn Zaefferer <joern.zaefferer@gmail.com> | 2011-07-28 15:47:59 +0200 |
commit | 02aad7b0ae8c752eb24f99d7a6a06aeeb5d17367 (patch) | |
tree | a7cbf3b32b4fd1902395eb253faa3c35b28ba02b | |
parent | 5a45f483d73578dd147229d412998bba4a44c35b (diff) | |
download | jquery-ui-02aad7b0ae8c752eb24f99d7a6a06aeeb5d17367.tar.gz jquery-ui-02aad7b0ae8c752eb24f99d7a6a06aeeb5d17367.zip |
Widget delegation: Update menu to use _bind with delegation. Clean up test.
-rw-r--r-- | tests/unit/widget/widget_core.js | 5 | ||||
-rw-r--r-- | ui/jquery.ui.menu.js | 77 |
2 files changed, 34 insertions, 48 deletions
diff --git a/tests/unit/widget/widget_core.js b/tests/unit/widget/widget_core.js index c73f7284c..b08de27c7 100644 --- a/tests/unit/widget/widget_core.js +++ b/tests/unit/widget/widget_core.js @@ -670,7 +670,6 @@ test( "_bind() with delegate", function() { expect( 8 ); $.widget( "ui.testWidget", { _create: function() { - var that = this; this.element = { bind: function( event, handler ) { equal( event, "click.testWidget" ); @@ -682,7 +681,7 @@ test( "_bind() with delegate", function() { ok( $.isFunction(handler) ); }, trigger: $.noop - } + }; this._bind({ "click": "handler", "click a": "handler", @@ -698,7 +697,7 @@ test( "_bind() with delegate", function() { } }); $.ui.testWidget(); -}) +}); test( "._hoverable()", function() { $.widget( "ui.testWidget", { diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index c55ae75c9..7cfa61f86 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -37,53 +37,40 @@ $.widget( "ui.menu", { .attr({ id: this.menuId, role: "menu" - }) - .bind( "click.menu", function( event ) { - var item = $( event.target ).closest( ".ui-menu-item:has(a)" ); - if ( self.options.disabled ) { - return false; - } - if ( !item.length ) { - return; - } + }); + this.element.bind("click.menu", function( event ) { + if ( self.options.disabled ) { + event.preventDefault(); + } + }); + this._bind({ + "click .ui-menu-item:has(a)": function( event ) { + event.stopImmediatePropagation(); + var target = $( event.currentTarget ); // it's possible to click an item without hovering it (#7085) - if ( !self.active || ( self.active[ 0 ] !== item[ 0 ] ) ) { - self.focus( event, item ); - } - self.select( event ); - }) - .bind( "mouseover.menu", function( event ) { - if ( self.options.disabled ) { - return; - } - var target = $( event.target ).closest( ".ui-menu-item" ); - if ( target.length ) { - //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" ); - self.focus( event, target ); + if ( !this.active || ( this.active[ 0 ] !== target[ 0 ] ) ) { + this.focus( event, target ); } - }) - .bind( "mouseout.menu", function( event ) { - if ( self.options.disabled ) { - return; - } - var target = $( event.target ).closest( ".ui-menu-item" ); - if ( target.length ) { - self.blur( event ); - } - }) - .bind( "focus.menu", function( event ) { - if ( self.options.disabled ) { - return; - } - self.focus( event, $( event.target ).children( ".ui-menu-item:first" ) ); - }) - .bind( "blur.menu", function( event ) { - if ( self.options.disabled ) { - return; - } - self.collapseAll( event ); - }); + this.select( event ); + }, + "mouseover .ui-menu-item": function( event ) { + event.stopImmediatePropagation(); + 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" ); + this.focus( event, target ); + }, + "mouseout .ui-menu-item": function( event ) { + this.blur( event ); + }, + "focus": function( event ) { + this.focus( event, $( event.target ).children( ".ui-menu-item:first" ) ); + }, + "blur": function( event ) { + this.collapseAll( event ); + } + }); + this.refresh(); this.element.attr( "tabIndex", 0 ).bind( "keydown.menu", function( event ) { |