Skip to content
Permalink
Browse files

Tabs: mouseover/focus handling for added tabs, plus test, fixes #4097…

… as well as focus/blur handling when using keyboard
  • Loading branch information...
Klaus Hartl
Klaus Hartl committed Feb 13, 2009
1 parent 82d7c67 commit f3feb25712092f455b24476b2f0528c2901f357f
Showing with 31 additions and 17 deletions.
  1. +12 −0 tests/unit/tabs/tabs_methods.js
  2. +19 −17 ui/ui.tabs.js
@@ -43,6 +43,18 @@ test('disable', function() {
});

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.");
});

@@ -172,20 +172,6 @@ $.widget("ui.tabs", {
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 @@ $.widget("ui.tabs", {

}
// 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 @@ $.widget("ui.tabs", {
// 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 @@ $.widget("ui.tabs", {
}

// 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));

0 comments on commit f3feb25

Please sign in to comment.
You can’t perform that action at this time.