r2079 - in trunk: tests/unit/tabs ui

Author: klaus.hartl
Date: Fri Feb 13 15:05:16 2009
New Revision: 2079
Modified:
trunk/tests/unit/tabs/tabs_methods.js
trunk/ui/ui.tabs.js
Log:
Tabs: mouseover/focus handling for added tabs, plus test, fixes #4097 as
well as focus/blur handling when using keyboard
Modified: trunk/tests/unit/tabs/tabs_methods.js
==============================================================================
--- trunk/tests/unit/tabs/tabs_methods.js    (original)
+++ trunk/tests/unit/tabs/tabs_methods.js    Fri Feb 13 15:05:16 2009
@@ -43,6 +43,18 @@
});
test('add', function() {
+    expect(3);
+
+    el = $('#tabs1').tabs();
+    el.tabs('add', "#new", 'New');
+
+    var added = $('li:last', el).simulate('mouseover');
+    ok(added.is('.ui-state-hover'), 'should add mouseover handler to added
tab');
+    added.simulate('mouseout');
+    var other = $('li:first', el).simulate('mouseover');
+    ok(other.is('.ui-state-hover'), 'should not remove mouseover handler from
existing tab');
+    other.simulate('mouseout');
+
    ok(false, "missing test - untested code is broken code.");
});
Modified: trunk/ui/ui.tabs.js
==============================================================================
--- trunk/ui/ui.tabs.js    (original)
+++ trunk/ui/ui.tabs.js    Fri Feb 13 15:05:16 2009
@@ -172,20 +172,6 @@
                else onShow();
            }
-            // states
-            if (o.event != 'mouseover') {
-                var handleState = function(state, el) {
-                    if (el.is(':not(.ui-state-disabled)')) el.toggleClass('ui-state-' +
state);
-                };
-                this.$lis.bind('mouseover.tabs mouseout.tabs', function() {
-                    handleState('hover', $(this));
-                });
-                // TODO focus/blur don't seem to work with namespace
-                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.$lis.add(self.$tabs).unbind('.tabs');
@@ -194,9 +180,10 @@
        }
        // update selected after add/remove
-        else
+        else {
            o.selected = this.$lis.index(this.$lis.filter('.ui-tabs-selected'));
-
+        }
+
        // update collapsible

this.element[o.collapsible ? 'addClass' : 'removeClass']('ui-tabs-collapsible');

@@ -210,6 +197,21 @@
        // reset cache if switching from cached to not cached
        if (o.cache === false) this.$tabs.removeData('cache.tabs');
+        // remove all handlers before, tabify may run on existing tabs after add
or option change
+        this.$lis.add(this.$tabs).unbind('.tabs');
+
+        if (o.event != 'mouseover') {
+            var handleState = function(state, el) {
+                if (el.is(':not(.ui-state-disabled)')) 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'));
+            });
+        }
+
        // set up animations
        var hideFx, showFx;
        if (o.fx) {
@@ -264,7 +266,7 @@
        }
        // attach tab event handler, unbind to avoid duplicates from former
tabifying...
-        this.$tabs.unbind('.tabs').bind(o.event + '.tabs', function() {
+        this.$tabs.bind(o.event + '.tabs', function() {
            var $li = $(this).parents('li:eq(0)'),
                $hide = self.$panels.filter(':visible'),
                $show = $(self._sanitizeSelector(this.hash));