r1967 - in trunk: tests/unit/tabs ui
Author: klaus.hartl
Date: Mon Feb 2 12:15:06 2009
New Revision: 1967
Modified:
trunk/tests/unit/tabs/tabs.js
trunk/ui/ui.tabs.js
Log:
Tabs: introduced "collapsible" option while deprecating "deselectable",
fixes #4029
Modified: trunk/tests/unit/tabs/tabs.js
==============================================================================
--- trunk/tests/unit/tabs/tabs.js (original)
+++ trunk/tests/unit/tabs/tabs.js Mon Feb 2 12:15:06 2009
@@ -10,7 +10,7 @@
ajaxOptions: null,
cache: false,
cookie: null,
- deselectable: false,
+ collapsible: false,
disabled: [],
event: 'click',
fx: null,
@@ -172,24 +172,35 @@
});
- test('deselectable: true', function() {
- expect(7);
+ test('collapsible', 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' );
+ 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('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 @@
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');
Modified: trunk/ui/ui.tabs.js
==============================================================================
--- trunk/ui/ui.tabs.js (original)
+++ trunk/ui/ui.tabs.js Mon Feb 2 12:15:06 2009
@@ -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 @@
this.select(value);
else {
this.options[key] = value;
+ if (key == 'deselectable')
+ this.options.collapsible = value;
+
this._tabify();
}
},
@@ -152,7 +156,6 @@
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 @@
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 @@
// 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 @@
$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 @@
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 @@
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 @@
'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 @@
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 }