UI Tabs: reviewed code to handle hover/focus states: needs to take disabling into account, namespaced events, to be destroyed

1 files changed, 14 insertions, 21 deletions

diff --git a/ui/ui.tabs.js b/ui/ui.tabs.js
index a90223e3b..873fdd9c2 100644
--- a/ui/ui.tabs.js
+++ b/ui/ui.tabs.js
@@ -32,7 +32,7 @@ $.widget("ui.tabs", {
 				$this.removeData(prefix + '.tabs');
 			});
 		});
-		this.$lis.add(this.$panels).each(function() {
+		this.$lis.unbind('.tabs').add(this.$panels).each(function() {
 			if ($.data(this, 'destroy.tabs'))
 				$(this).remove();
 			else
@@ -78,24 +78,6 @@ $.widget("ui.tabs", {
 
 		var self = this, o = this.options;
 
-		this.$lis
-			.hover(
-				function() {
-					$(this).addClass('ui-state-hover');
-				},
-				function() {
-					$(this).removeClass('ui-state-hover');
-				}
-			);
-
-		this.$tabs
-			.focus(function() {
-				$(this).parent().addClass('ui-state-focus');
-			})
-			.blur(function() {
-				$(this).parent().removeClass('ui-state-focus');
-			});
-
 		this.$tabs.each(function(i, a) {
 			// inline tab
 			if (a.hash && a.hash.replace('#', '')) // Safari 2 reports '#' for an empty hash
@@ -188,10 +170,21 @@ $.widget("ui.tabs", {
 				// just trigger show event
 				else onShow();
 			}
+			
+			// states
+			var handleState = function(state, el) {
+			    if (el.is(':not(.' + o.disabledClass + ')')) el.toggleClass('ui-state-' + state);
+			};		
+			this.$lis.bind('mouseover.tabs mouseout.tabs', function() {
+			    handleState('hover', $(this));
+			});
+    		this.$tabs.bind('focus.tabs blur.tabs', function() {
+    		    handleState('focus', $(this).parents('li:first'));
+    		});
 
 			// clean up to avoid memory leaks in certain versions of IE 6
 			$(window).bind('unload', function() {
-				self.$tabs.unbind('.tabs');
+				self.$lis.add(self.$tabs).unbind('.tabs');
 				self.$lis = self.$tabs = self.$panels = null;
 			});
 
@@ -342,7 +335,7 @@ $.widget("ui.tabs", {
 			return false;
 
 		});
-
+		
 		// disable click if event is configured to something else
 		if (o.event != 'click') this.$tabs.bind('click.tabs', function(){return false;});