mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
UI Tabs: fixed removal of inline styles set for a tab panel
This commit is contained in:
Klaus Hartl
parent
a47c2a87e8
commit
f02dda5ade
@ -36,35 +36,21 @@
|
||||
|
||||
<div id="tabs1">
|
||||
<ul>
|
||||
<li><a href="#fragment-1"><span>One</span></a></li>
|
||||
<li><a href="#fragment-2"><span>Two</span></a></li>
|
||||
<li><a href="#fragment-3"><span>Three</span></a></li>
|
||||
<li><a href="#fragment-1">1</a></li>
|
||||
<li><a href="#fragment-2">2</a></li>
|
||||
<li><a href="#fragment-3">3</a></li>
|
||||
</ul>
|
||||
<div id="fragment-1">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
</div>
|
||||
<div id="fragment-2">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
</div>
|
||||
<div id="fragment-3">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
</div>
|
||||
<div id="fragment-1"></div>
|
||||
<div id="fragment-2"></div>
|
||||
<div id="fragment-3"></div>
|
||||
</div>
|
||||
|
||||
<div id="tabs2">
|
||||
<ul>
|
||||
<li><a href="#colon:test"><span>One</span></a></li>
|
||||
<li><a href="#inline-style"><span>Two</span></a></li>
|
||||
<li><a href="#colon:test">1</a></li>
|
||||
<li><a href="#inline-style">2</a></li>
|
||||
</ul>
|
||||
<div id="colon:test">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
</div>
|
||||
<div style="height: 300px;" id="inline-style">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
</div>
|
||||
<div id="colon:test"></div>
|
||||
<div style="height: 300px;" id="inline-style"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
291
tests/tabs.js
291
tests/tabs.js
@ -3,187 +3,216 @@
|
||||
*/
|
||||
(function($) {
|
||||
|
||||
function defer(defered, ms) {
|
||||
// wait a bit for the pseudo animation...
|
||||
stop();
|
||||
setTimeout(function() {
|
||||
defered();
|
||||
start();
|
||||
}, ms || 100);
|
||||
}
|
||||
|
||||
module('tabs');
|
||||
|
||||
test('init', function() {
|
||||
expect(4);
|
||||
test('init', function() {
|
||||
expect(4);
|
||||
|
||||
var el = $('#tabs1 > ul').tabs();
|
||||
ok(true, '.tabs() called on element');
|
||||
var el = $('#tabs1 > ul').tabs();
|
||||
ok(true, '.tabs() called on element');
|
||||
|
||||
el.tabs('destroy').tabs({ selected: 1 });
|
||||
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' );
|
||||
el.tabs('destroy').tabs({ selected: 1 });
|
||||
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' );
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
test('destroy', function() {
|
||||
expect(0);
|
||||
test('destroy', function() {
|
||||
expect(0);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
test("defaults", function() {
|
||||
test("defaults", function() {
|
||||
|
||||
var expected = {
|
||||
unselect: false,
|
||||
event: 'click',
|
||||
disabled: [],
|
||||
cookie: null,
|
||||
spinner: 'Loading…',
|
||||
cache: false,
|
||||
idPrefix: 'ui-tabs-',
|
||||
ajaxOptions: null,
|
||||
fx: null,
|
||||
tabTemplate: '<li><a href="#{href}"><span>#{label}</span></a></li>',
|
||||
panelTemplate: '<div></div>',
|
||||
navClass: 'ui-tabs-nav',
|
||||
selectedClass: 'ui-tabs-selected',
|
||||
unselectClass: 'ui-tabs-unselect',
|
||||
disabledClass: 'ui-tabs-disabled',
|
||||
panelClass: 'ui-tabs-panel',
|
||||
hideClass: 'ui-tabs-hide',
|
||||
loadingClass: 'ui-tabs-loading'
|
||||
};
|
||||
var expected = {
|
||||
unselect: false,
|
||||
event: 'click',
|
||||
disabled: [],
|
||||
cookie: null,
|
||||
spinner: 'Loading…',
|
||||
cache: false,
|
||||
idPrefix: 'ui-tabs-',
|
||||
ajaxOptions: null,
|
||||
fx: null,
|
||||
tabTemplate: '<li><a href="#{href}"><span>#{label}</span></a></li>',
|
||||
panelTemplate: '<div></div>',
|
||||
navClass: 'ui-tabs-nav',
|
||||
selectedClass: 'ui-tabs-selected',
|
||||
unselectClass: 'ui-tabs-unselect',
|
||||
disabledClass: 'ui-tabs-disabled',
|
||||
panelClass: 'ui-tabs-panel',
|
||||
hideClass: 'ui-tabs-hide',
|
||||
loadingClass: 'ui-tabs-loading'
|
||||
};
|
||||
|
||||
var el = $("#tabs1").tabs();
|
||||
var el = $("#tabs1").tabs();
|
||||
|
||||
for (var optionName in expected) {
|
||||
var actual = el.data(optionName + '.tabs'), expects = expected[optionName];
|
||||
for (var optionName in expected) {
|
||||
var actual = el.data(optionName + '.tabs'), expects = expected[optionName];
|
||||
|
||||
if (optionName == 'disabled')
|
||||
ok(expects.constructor == Array && !expects.length, optionName);
|
||||
else
|
||||
equals(actual, expects, optionName);
|
||||
if (optionName == 'disabled')
|
||||
compare(actual, expects, optionName);
|
||||
else
|
||||
equals(actual, expects, optionName);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
test('add', function() {
|
||||
expect(0);
|
||||
test('add', function() {
|
||||
expect(0);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
test('remove', function() {
|
||||
expect(0);
|
||||
test('remove', function() {
|
||||
expect(0);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
test('enable', function() {
|
||||
expect(0);
|
||||
test('enable', function() {
|
||||
expect(0);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
test('disable', function() {
|
||||
expect(0);
|
||||
test('disable', function() {
|
||||
expect(0);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
test('select', function() {
|
||||
expect(0);
|
||||
test('select', function() {
|
||||
expect(0);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
test('load', function() {
|
||||
expect(0);
|
||||
test('load', function() {
|
||||
expect(0);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
test('url', function() {
|
||||
expect(0);
|
||||
test('url', function() {
|
||||
expect(0);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
module('options');
|
||||
module('tabs: Options');
|
||||
|
||||
test('select: null', function() {
|
||||
expect(3);
|
||||
test('select: null', function() {
|
||||
expect(3);
|
||||
|
||||
var el = $('#tabs1 > ul');
|
||||
var el = $('#tabs1 > ul');
|
||||
|
||||
el.tabs({ selected: null });
|
||||
equals( el.data('selected.tabs'), null, 'option set' );
|
||||
equals( $('li.ui-tabs-selected', el).length, 0, 'all tabs should be unselected' );
|
||||
equals( $('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden' );
|
||||
|
||||
// TODO select == null with cookie
|
||||
// TODO select == null with select method
|
||||
|
||||
});
|
||||
|
||||
test('unselect: true', function() {
|
||||
expect(7);
|
||||
|
||||
var el = $('#tabs1 > ul');
|
||||
|
||||
el.tabs({ unselect: true });
|
||||
equals( el.data('unselect.tabs'), true, 'option set' );
|
||||
equals( $('li.ui-tabs-unselect', el).length, 1, 'class "ui-tabs-unselect" attached once');
|
||||
equals( $('li', el).index( $('li.ui-tabs-unselect', el) ), 0, 'class "ui-tabs-unselect" attached to first tab');
|
||||
|
||||
el.tabs('select', 1);
|
||||
equals( $('li.ui-tabs-unselect', el).length, 1, 'class "ui-tabs-unselect" attached once');
|
||||
equals( $('li', el).index( $('li.ui-tabs-unselect', el) ), 1, 'class "ui-tabs-unselect" attached to second tab');
|
||||
|
||||
el.tabs('select', 1);
|
||||
equals( $('li.ui-tabs-unselect', el).length, 0, 'class "ui-tabs-unselect" not attached');
|
||||
// wait a bit for the fake animation...
|
||||
stop();
|
||||
setTimeout(function() {
|
||||
el.tabs({ selected: null });
|
||||
equals( el.data('selected.tabs'), null, 'option set' );
|
||||
equals( $('li.ui-tabs-selected', el).length, 0, 'all tabs should be unselected' );
|
||||
equals( $('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden' );
|
||||
start();
|
||||
}, 100);
|
||||
|
||||
});
|
||||
// TODO select == null with cookie
|
||||
// TODO select == null with select method
|
||||
|
||||
test('cookie', function() {
|
||||
expect(5);
|
||||
});
|
||||
|
||||
var el = $('#tabs1 > ul');
|
||||
var cookieName = 'ui-tabs-' + $.data(el[0]);
|
||||
$.cookie(cookieName, null); // blank state
|
||||
var cookie = function() {
|
||||
return parseInt($.cookie(cookieName), 10);
|
||||
};
|
||||
test('unselect: true', function() {
|
||||
expect(7);
|
||||
|
||||
el.tabs({ cookie: {} });
|
||||
equals(cookie(), 0, 'initial cookie value, no cookie given');
|
||||
var el = $('#tabs1 > ul');
|
||||
|
||||
el.tabs('destroy');
|
||||
el.tabs({ selected: 1, cookie: {} });
|
||||
equals(cookie(), 1, 'initial cookie value, given selected');
|
||||
el.tabs({ unselect: true });
|
||||
equals( el.data('unselect.tabs'), true, 'option set' );
|
||||
equals( $('li.ui-tabs-unselect', el).length, 1, 'class "ui-tabs-unselect" attached once');
|
||||
equals( $('li', el).index( $('li.ui-tabs-unselect', el) ), 0, 'class "ui-tabs-unselect" attached to first tab');
|
||||
|
||||
el.tabs('select', 2);
|
||||
equals(cookie(), 2, 'cookie value after tabs select');
|
||||
el.tabs('select', 1);
|
||||
equals( $('li.ui-tabs-unselect', el).length, 1, 'class "ui-tabs-unselect" attached once');
|
||||
equals( $('li', el).index( $('li.ui-tabs-unselect', el) ), 1, 'class "ui-tabs-unselect" attached to second tab');
|
||||
|
||||
el.tabs('destroy');
|
||||
$.cookie(cookieName, 1);
|
||||
el.tabs({ cookie: {} });
|
||||
equals(cookie(), 1, 'initial cookie value, from existing cookie');
|
||||
el.tabs('select', 1);
|
||||
equals( $('li.ui-tabs-unselect', el).length, 0, 'class "ui-tabs-unselect" not attached');
|
||||
defer(function() {
|
||||
equals( $('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden' );
|
||||
});
|
||||
|
||||
el.tabs('destroy');
|
||||
ok($.cookie(cookieName) === null, 'erase cookie after destroy');
|
||||
});
|
||||
|
||||
});
|
||||
test('cookie', function() {
|
||||
expect(5);
|
||||
|
||||
var el = $('#tabs1 > ul');
|
||||
var cookieName = 'ui-tabs-' + $.data(el[0]);
|
||||
$.cookie(cookieName, null); // blank state
|
||||
var cookie = function() {
|
||||
return parseInt($.cookie(cookieName), 10);
|
||||
};
|
||||
|
||||
el.tabs({ cookie: {} });
|
||||
equals(cookie(), 0, 'initial cookie value, no cookie given');
|
||||
|
||||
el.tabs('destroy');
|
||||
el.tabs({ selected: 1, cookie: {} });
|
||||
equals(cookie(), 1, 'initial cookie value, given selected');
|
||||
|
||||
el.tabs('select', 2);
|
||||
equals(cookie(), 2, 'cookie value after tabs select');
|
||||
|
||||
el.tabs('destroy');
|
||||
$.cookie(cookieName, 1);
|
||||
el.tabs({ cookie: {} });
|
||||
equals(cookie(), 1, 'initial cookie value, from existing cookie');
|
||||
|
||||
el.tabs('destroy');
|
||||
ok($.cookie(cookieName) === null, 'erase cookie after destroy');
|
||||
|
||||
});
|
||||
|
||||
|
||||
module('tickets');
|
||||
module('tabs: Tickets');
|
||||
|
||||
test('id containing colon #???', function() {
|
||||
expect(4);
|
||||
test('id containing colon, #????', function() {
|
||||
expect(4);
|
||||
|
||||
var el = $('#tabs2 > ul').tabs();
|
||||
ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel should be visible' );
|
||||
ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel should be hidden' );
|
||||
var el = $('#tabs2 > ul').tabs();
|
||||
ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel should be visible' );
|
||||
ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel should be hidden' );
|
||||
|
||||
el.tabs('select', 1).tabs('select', 0);
|
||||
ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel should be visible' );
|
||||
ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel should be hidden' );
|
||||
el.tabs('select', 1).tabs('select', 0);
|
||||
defer(function() {
|
||||
ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel should be visible' );
|
||||
ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel should be hidden' );
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
test('panel containing inline style, #????', function() {
|
||||
expect(2);
|
||||
|
||||
var inlineStyle = function(property) {
|
||||
return document.getElementById('inline-style').style[property];
|
||||
};
|
||||
var expected = inlineStyle('height');
|
||||
|
||||
var el = $('#tabs2 > ul').tabs();
|
||||
equals(inlineStyle('height'), expected, 'should not remove inline style after init');
|
||||
|
||||
el.tabs('select', 1);
|
||||
defer(function() {
|
||||
equals(inlineStyle('height'), expected, 'should not remove inline style after tabs select');
|
||||
el.tabs('select', 0);
|
||||
defer(function() {
|
||||
equals(inlineStyle('height'), expected, 'should not remove inline style after tabs select');
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// test('', function() {
|
||||
// expect(0);
|
||||
|
||||
@ -181,34 +181,32 @@ $.widget("ui.tabs", {
|
||||
else
|
||||
hideFx = showFx = o.fx || baseFx;
|
||||
|
||||
// reset some styles to maintain print style sheets etc.
|
||||
var resetCSS = { display: '', overflow: '', height: '' };
|
||||
if (!$.browser.msie) // not in IE to prevent ClearType font issue
|
||||
resetCSS.opacity = '';
|
||||
// Reset certain styles left over from animation to
|
||||
// maintain print style sheets and prevent IE's
|
||||
// ClearType bug...
|
||||
function resetStyle($el, fx) {
|
||||
$el.css({ display: '' });
|
||||
if ($.browser.msie && fx.opacity)
|
||||
$el[0].style.filter = '';
|
||||
}
|
||||
|
||||
// Hide a tab, animation prevents browser scrolling to fragment,
|
||||
// $show is optional.
|
||||
function hideTab(clicked, $hide, $show) {
|
||||
$hide.animate(hideFx, hideFx.duration || baseDuration, function() { //
|
||||
$hide.addClass(o.hideClass).css(resetCSS); // maintain flexible height and accessibility in print etc.
|
||||
if ($.browser.msie && hideFx.opacity)
|
||||
$hide[0].style.filter = '';
|
||||
if ($show)
|
||||
showTab(clicked, $show, $hide);
|
||||
$hide.addClass(o.hideClass);
|
||||
resetStyle($hide, hideFx);
|
||||
if ($show) showTab(clicked, $show, $hide);
|
||||
});
|
||||
}
|
||||
|
||||
// Show a tab, animation prevents browser scrolling to fragment,
|
||||
// $hide is optional.
|
||||
function showTab(clicked, $show, $hide) {
|
||||
if (showFx === baseFx)
|
||||
$show.css('display', 'block'); // prevent occasionally occuring flicker in Firefox cause by gap between showing and hiding the tab panels
|
||||
if (showFx === baseFx) $show.css('display', 'block'); // prevent occasionally occuring flicker in Firefox caused by gap between showing and hiding the tab panels
|
||||
$show.animate(showFx, showFx.duration || baseDuration, function() {
|
||||
$show.removeClass(o.hideClass).css(resetCSS); // maintain flexible height and accessibility in print etc.
|
||||
if ($.browser.msie && showFx.opacity)
|
||||
$show[0].style.filter = '';
|
||||
|
||||
// callback
|
||||
$show.removeClass(o.hideClass);
|
||||
resetStyle($show, showFx);
|
||||
self._trigger('show', null, self.ui(clicked, $show[0]));
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user