r1201 - in trunk: tests ui
Author: klaus.hartl
Date: Mon Dec 22 03:44:30 2008
New Revision: 1201
Modified:
trunk/tests/tabs.js
trunk/ui/ui.tabs.js
Log:
adopted proposed markup for 1.6, fixes #3651
Modified: trunk/tests/tabs.js
==============================================================================
--- trunk/tests/tabs.js (original)
+++ trunk/tests/tabs.js Mon Dec 22 03:44:30 2008
@@ -13,16 +13,16 @@
deselectable: false,
deselectableClass: 'ui-tabs-deselectable',
disabled: [],
- disabledClass: 'ui-tabs-disabled',
+ disabledClass: 'ui-state-disabled',
event: 'click',
fx: null,
hideClass: 'ui-tabs-hide',
idPrefix: 'ui-tabs-',
loadingClass: 'ui-tabs-loading',
- navClass: 'ui-tabs-nav',
- panelClass: 'ui-tabs-panel',
+ navClass: 'ui-tabs-nav ui-helper-reset ui-helper-clearfix
ui-widget-header ui-corner-all',
+ panelClass: 'ui-tabs-panel ui-widget-content ui-corner-bottom',
panelTemplate: '<div></div>',
- selectedClass: 'ui-tabs-selected',
+ selectedClass: 'ui-tabs-selected ui-state-active',
spinner: 'Loading…',
tabTemplate: '<li><a href="#{href}"><span>#{label}</span></a></li>'
};
@@ -43,15 +43,21 @@
module('tabs');
test('init', function() {
- expect(4);
+ expect(9);
- var el = $('#tabs1 > ul').tabs();
+ var el = $('#tabs1').tabs(); // new markup requires to tabify wrapper
again...
ok(true, '.tabs() called on element');
el.tabs('destroy').tabs({ selected: 1 });
+
+ ok( el.is('.ui-tabs.ui-widget.ui-widget-content.ui-corner-all'), 'attach
classes to container');
+ ok( $('ul',
el).is('.ui-tabs-nav.ui-helper-reset.ui-helper-clearfix.ui-widget-header.ui-corner-all'), 'attach
classes to list' );
+ ok( $('div:eq(0)',
el).is('.ui-tabs-panel.ui-widget-content.ui-corner-bottom'), 'attach
classes to panel' );
+ ok( $('li:eq(0)', el).is('.ui-state-default.ui-corner-top'), 'attach
classes to inactive li');
+ ok( $('li:eq(1)',
el).is('.ui-tabs-selected.ui-state-active.ui-corner-top'), 'attach classes
to active li');
equals( el.data('selected.tabs'), 1, 'selected.tabs set' );
equals( $('li', el).index( $('li.ui-tabs-selected', el) ), 1, 'second
tab active');
- equals( $('div', '#tabs1').index( $('div.ui-tabs-hide', '#tabs1') ),
0, 'first panel should be hidden' );
+ equals( $('div', el).index( $('div.ui-tabs-hide', '#tabs1') ), 0, 'first
panel should be hidden' );
});
@@ -61,12 +67,12 @@
});
test("defaults", function() {
- el = $('#tabs1').tabs();
+ el = $('#tabs1 > ul').tabs();
$.each(defaults, function(key, val) {
- var actual = el.data(key + ".tabs"), expected = val;
+ var actual = el.data(key + '.tabs'), expected = val;
same(actual, expected, key);
});
- el.tabs("destroy");
+ el.tabs('destroy');
});
test('add', function() {
@@ -76,7 +82,7 @@
test('remove', function() {
expect(0);
-
+
});
test('enable', function() {
Modified: trunk/ui/ui.tabs.js
==============================================================================
--- trunk/ui/ui.tabs.js (original)
+++ trunk/ui/ui.tabs.js Mon Dec 22 03:44:30 2008
@@ -36,7 +36,7 @@
if ($.data(this, 'destroy.tabs'))
$(this).remove();
else
- $(this).removeClass([o.selectedClass, o.deselectableClass,
+ $(this).removeClass([o.tabClass, o.selectedClass, o.deselectableClass,
o.disabledClass, o.panelClass, o.hideClass].join(' '));
});
if (o.cookie)
@@ -72,7 +72,7 @@
_tabify: function(init) {
- this.$lis = $('li:has(a[href])', this.element);
+ this.$lis = $('li:has(a[href])', this.element.is('div') ? $('>
ul:first', this.element) : this.element);
this.$tabs = this.$lis.map(function() { return $('a', this)[0]; });
this.$panels = $([]);
@@ -104,8 +104,16 @@
// initialization from scratch
if (init) {
- // attach necessary classes for styling if not present
- this.element.addClass(o.navClass);
+ // attach necessary classes for styling
+ if (this.element.is('div')) {
+ // TODO replace hardcoded class names
+ this.element.addClass('ui-tabs ui-widget ui-widget-content
ui-corner-all');
+ $('> ul:first', this.element).addClass(o.navClass);
+ }
+ else {
+ this.element.addClass(o.navClass);
+ }
+ this.$lis.addClass(o.tabClass);
this.$panels.addClass(o.panelClass);
// Selected tab
@@ -233,7 +241,9 @@
function switchTab(clicked, $li, $hide, $show) {
var classes = [o.selectedClass];
if (o.deselectable) classes.push(o.deselectableClass);
-
$li.addClass(classes.join(' ')).siblings().removeClass(classes.join(' '));
+ // TODO replace hardcoded class names
+ $li.removeClass('ui-state-default').addClass(classes.join(' '))
+
.siblings().removeClass(classes.join(' ')).addClass('ui-state-default');
hideTab(clicked, $hide, $show);
}
@@ -249,7 +259,8 @@
// 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(o.selectedClass) && !o.deselectable)
+ // TODO replace hardcoded class names
+ if (($li.hasClass('ui-state-active') && !o.deselectable)
|| $li.hasClass(o.disabledClass)
|| $(this).hasClass(o.loadingClass)
|| self._trigger('select', null, self.ui(this, $show[0])) === false
@@ -261,10 +272,12 @@
o.selected = self.$tabs.index(this);
// if tab may be closed
+ // TODO replace hardcoded class names
if (o.deselectable) {
- if ($li.hasClass(o.selectedClass)) {
+ if ($li.hasClass('ui-state-active')) {
self.options.selected = null;
- $li.removeClass([o.selectedClass, o.deselectableClass].join(' '));
+ $li.removeClass([o.selectedClass, o.deselectableClass].join(' ')).
+ addClass('ui-state-default');
self.$panels.stop();
hideTab(this, $hide);
this.blur();
@@ -273,7 +286,8 @@
self.$panels.stop();
var a = this;
self.load(self.$tabs.index(this), function() {
- $li.addClass([o.selectedClass, o.deselectableClass].join(' '));
+ $li.addClass([o.selectedClass, o.deselectableClass].join(' '))
+ .removeClass('ui-state-default');
showTab(a, $show);
});
this.blur();
@@ -294,7 +308,7 @@
switchTab(a, $li, $hide, $show);
} :
function() {
- $li.addClass(o.selectedClass);
+ $li.addClass(o.selectedClass).removeClass('ui-state-default');
showTab(a, $show);
}
);
@@ -322,7 +336,7 @@
var o = this.options;
var $li = $(o.tabTemplate.replace(/#\{href\}/g,
url).replace(/#\{label\}/g, label));
- $li.data('destroy.tabs', true);
+ $li.addClass(o.tabClass).data('destroy.tabs', true);
var id = url.indexOf('#') == 0 ? url.replace('#', '') : this._tabId(
$('a:first-child', $li)[0] );
@@ -337,7 +351,8 @@
if (index >= this.$lis.length) {
$li.appendTo(this.element);
$panel.appendTo(this.element[0].parentNode);
- } else {
+ }
+ else {
$li.insertBefore(this.$lis[index]);
$panel.insertBefore(this.$panels[index]);
}
@@ -351,8 +366,7 @@
$li.addClass(o.selectedClass);
$panel.removeClass(o.hideClass);
var href = $.data(this.$tabs[0], 'load.tabs');
- if (href)
- this.load(index, href);
+ if (href) this.load(index, href);
}
// callback
@@ -506,16 +520,17 @@
deselectable: false,
deselectableClass: 'ui-tabs-deselectable',
disabled: [],
- disabledClass: 'ui-tabs-disabled',
+ disabledClass: 'ui-state-disabled',
event: 'click',
fx: null, // e.g. { height: 'toggle', opacity: 'toggle', duration: 200 }
hideClass: 'ui-tabs-hide',
idPrefix: 'ui-tabs-',
loadingClass: 'ui-tabs-loading',
- navClass: 'ui-tabs-nav',
- panelClass: 'ui-tabs-panel',
+ navClass: 'ui-tabs-nav ui-helper-reset ui-helper-clearfix
ui-widget-header ui-corner-all',
+ tabClass: 'ui-state-default ui-corner-top',
+ panelClass: 'ui-tabs-panel ui-widget-content ui-corner-bottom',
panelTemplate: '<div></div>',
- selectedClass: 'ui-tabs-selected',
+ selectedClass: 'ui-tabs-selected ui-state-active',
spinner: 'Loading…',
tabTemplate: '<li><a href="#{href}"><span>#{label}</span></a></li>'
}
Topic Participants
Paul Bakaus
Richard Worth