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 id="fragment-1"></div>
|
||||
<div id="fragment-2"></div>
|
||||
<div id="fragment-3"></div>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
@ -3,6 +3,14 @@
|
||||
*/
|
||||
(function($) {
|
||||
|
||||
function defer(defered, ms) {
|
||||
// wait a bit for the pseudo animation...
|
||||
stop();
|
||||
setTimeout(function() {
|
||||
defered();
|
||||
start();
|
||||
}, ms || 100);
|
||||
}
|
||||
|
||||
module('tabs');
|
||||
|
||||
@ -53,7 +61,7 @@ test("defaults", function() {
|
||||
var actual = el.data(optionName + '.tabs'), expects = expected[optionName];
|
||||
|
||||
if (optionName == 'disabled')
|
||||
ok(expects.constructor == Array && !expects.length, optionName);
|
||||
compare(actual, expects, optionName);
|
||||
else
|
||||
equals(actual, expects, optionName);
|
||||
|
||||
@ -97,7 +105,7 @@ test('url', function() {
|
||||
});
|
||||
|
||||
|
||||
module('options');
|
||||
module('tabs: Options');
|
||||
|
||||
test('select: null', function() {
|
||||
expect(3);
|
||||
@ -130,12 +138,9 @@ test('unselect: true', function() {
|
||||
|
||||
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() {
|
||||
defer(function() {
|
||||
equals( $('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden' );
|
||||
start();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@ -170,9 +175,9 @@ test('cookie', function() {
|
||||
});
|
||||
|
||||
|
||||
module('tickets');
|
||||
module('tabs: Tickets');
|
||||
|
||||
test('id containing colon #???', function() {
|
||||
test('id containing colon, #????', function() {
|
||||
expect(4);
|
||||
|
||||
var el = $('#tabs2 > ul').tabs();
|
||||
@ -180,8 +185,32 @@ test('id containing colon #???', function() {
|
||||
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');
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
@ -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