mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Tabs: introduced "collapsible" option while deprecating "deselectable", fixes #4029
This commit is contained in:
Klaus Hartl
parent
43ab3a04e5
commit
24c51e5a95
@ -10,7 +10,7 @@ var defaults = {
|
||||
ajaxOptions: null,
|
||||
cache: false,
|
||||
cookie: null,
|
||||
deselectable: false,
|
||||
collapsible: false,
|
||||
disabled: [],
|
||||
event: 'click',
|
||||
fx: null,
|
||||
@ -172,23 +172,34 @@ 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(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');
|
||||
|
||||
});
|
||||
|
||||
@ -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');
|
||||
|
||||
|
||||
@ -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 }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user