diff --git a/tests/unit/tabs/tabs.js b/tests/unit/tabs/tabs.js index af65e04e4..a1ecf9a19 100644 --- a/tests/unit/tabs/tabs.js +++ b/tests/unit/tabs/tabs.js @@ -10,7 +10,7 @@ var defaults = { ajaxOptions: null, cache: false, cookie: null, - deselectable: false, + collapsible: false, disabled: [], event: 'click', fx: null, @@ -172,24 +172,35 @@ module('tabs: Options'); }); - test('deselectable: true', function() { - expect(7); + test('collapsible', function() { + expect(4); el = $('#tabs1'); + el.tabs({ collapsible: true }); + equals(el.data('collapsible.tabs'), true, 'option set'); + ok(el.is('.ui-tabs-collapsible'), 'extra class "ui-tabs-collapsible" attached'); + el.tabs('select', 0); + equals($('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden'); + el.data('collapsible.tabs', false); + ok(el.is(':not(.ui-tabs-collapsible)'), 'extra class "ui-tabs-collapsible" not attached'); + + }); + + // deprecated... shadows collapsible + test('deselectable (deprecated)', function() { + expect(4); + + el = $('#tabs1'); + el.tabs({ deselectable: true }); - equals( el.data('deselectable.tabs'), true, 'option set' ); - equals( $('li.ui-tabs-deselectable', el).length, 1, 'class "ui-tabs-deselectable" attached once'); - equals( $('li', el).index( $('li.ui-tabs-deselectable', el) ), 0, 'class "ui-tabs-deselectable" attached to first tab'); - - el.tabs('select', 1); - equals( $('li.ui-tabs-deselectable', el).length, 1, 'class "ui-tabs-deselectable" attached once'); - equals( $('li', el).index( $('li.ui-tabs-deselectable', el) ), 1, 'class "ui-tabs-deselectable" attached to second tab'); - - el.tabs('select', 1); - equals( $('li.ui-tabs-deselectable', el).length, 0, 'class "ui-tabs-deselectable" not attached'); - equals( $('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden' ); - + equals(el.data('collapsible.tabs'), true, 'option set'); + ok(el.is('.ui-tabs-collapsible'), 'extra class "ui-tabs-collapsible" attached'); + el.tabs('select', 0); + equals($('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden'); + el.data('deselectable.tabs', false); + ok(el.is(':not(.ui-tabs-collapsible)'), 'extra class "ui-tabs-collapsible" not attached'); + }); test('cookie', function() { @@ -218,7 +229,7 @@ module('tabs: Options'); equals(cookie(), 1, 'initial cookie value, from existing cookie'); el.tabs('destroy'); - el.tabs({ cookie: cookieObj, deselectable: true }); + el.tabs({ cookie: cookieObj, collapsible: true }); el.tabs('select', 0); equals(cookie(), -1, 'cookie value for all tabs unselected'); diff --git a/ui/ui.tabs.js b/ui/ui.tabs.js index 224c2d9bc..8d1ae1d79 100644 --- a/ui/ui.tabs.js +++ b/ui/ui.tabs.js @@ -15,7 +15,8 @@ $.widget("ui.tabs", { _init: function() { - // create tabs + if (this.options.deselectable !== undefined) + this.options.collapsible = this.options.deselectable; this._tabify(true); }, @@ -24,6 +25,9 @@ $.widget("ui.tabs", { this.select(value); else { this.options[key] = value; + if (key == 'deselectable') + this.options.collapsible = value; + this._tabify(); } }, @@ -152,7 +156,6 @@ $.widget("ui.tabs", { if (o.selected >= 0 && this.$tabs.length) { // check for length avoids error when initializing empty list this.$panels.eq(o.selected).removeClass('ui-tabs-hide'); var classes = ['ui-tabs-selected ui-state-active']; - if (o.deselectable) classes.push('ui-tabs-deselectable'); this.$lis.eq(o.selected).addClass(classes.join(' ')); // seems to be expected behavior that the show callback is fired @@ -193,6 +196,9 @@ $.widget("ui.tabs", { else o.selected = this.$lis.index(this.$lis.filter('.ui-tabs-selected')); + // update collapsible + this.element[o.collapsible ? 'addClass' : 'removeClass']('ui-tabs-collapsible'); + // set or update cookie after init and add/remove respectively if (o.cookie) this._cookie(o.selected, o.cookie); @@ -251,7 +257,6 @@ $.widget("ui.tabs", { // Switch a tab... function switchTab(clicked, $li, $hide, $show) { var classes = ['ui-tabs-selected ui-state-active']; - if (o.deselectable) classes.push('ui-tabs-deselectable'); $li.removeClass('ui-state-default').addClass(classes.join(' ')) .siblings().removeClass(classes.join(' ')).addClass('ui-state-default'); hideTab(clicked, $hide, $show); @@ -263,11 +268,11 @@ $.widget("ui.tabs", { $hide = self.$panels.filter(':visible'), $show = $(self._sanitizeSelector(this.hash)); - // If tab is already selected and not deselectable or tab disabled or + // If tab is already selected and not collapsible or tab disabled or // or is already loading or click callback returns false stop here. // Check if click handler returns false last so that it is not executed // for a disabled or loading tab! - if (($li.hasClass('ui-state-active') && !o.deselectable) + if (($li.hasClass('ui-state-active') && !o.collapsible) || $li.hasClass('ui-state-disabled') || $(this).hasClass('ui-tabs-loading') || self._trigger('select', null, self._ui(this, $show[0])) === false @@ -279,11 +284,11 @@ $.widget("ui.tabs", { o.selected = self.$tabs.index(this); // if tab may be closed TODO avoid redundant code in this block - if (o.deselectable) { + if (o.collapsible) { if ($li.hasClass('ui-state-active')) { o.selected = -1; if (o.cookie) self._cookie(o.selected, o.cookie); - $li.removeClass('ui-tabs-selected ui-state-active ui-tabs-deselectable') + $li.removeClass('ui-tabs-selected ui-state-active') .addClass('ui-state-default'); self.$panels.stop(); hideTab(this, $hide); @@ -294,7 +299,7 @@ $.widget("ui.tabs", { self.$panels.stop(); var a = this; self.load(self.$tabs.index(this), function() { - $li.addClass('ui-tabs-selected ui-state-active ui-tabs-deselectable') + $li.addClass('ui-tabs-selected ui-state-active') .removeClass('ui-state-default'); showTab(a, $show); }); @@ -367,7 +372,7 @@ $.widget("ui.tabs", { 'ui-tabs-selected ' + 'ui-state-active ' + 'ui-state-hover ' + - 'ui-tabs-deselectable ' + + 'ui-tabs-collapsible ' + 'ui-state-disabled ' + 'ui-tabs-panel ' + 'ui-widget-content ' + @@ -556,7 +561,7 @@ $.extend($.ui.tabs, { ajaxOptions: null, cache: false, cookie: null, // e.g. { expires: 7, path: '/', domain: 'jquery.com', secure: true } - deselectable: false, + collapsible: false, disabled: [], event: 'click', fx: null, // e.g. { height: 'toggle', opacity: 'toggle', duration: 200 }