Tabs: mouseover/focus handling for added tabs, plus test, fixes #4097 as well as focus/blur handling when using keyboard

This commit is contained in:
Klaus Hartl 2009-02-13 23:05:16 +00:00
parent 82d7c67bd3
commit f3feb25712
2 changed files with 31 additions and 17 deletions

View File

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

View File

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