mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Tab: modified init to display correct content of misordered div when hash present in url. Fixed #6125 - Incorrect selection of tab on init with hash in url and misordered divs
This commit is contained in:
parent
e66cdfcf59
commit
c3145b691b
@ -61,7 +61,7 @@
|
||||
<li><a href="#colon:test"><span>1</span></a></li>
|
||||
<li><a href="#inline-style"><span>2</span></a></li>
|
||||
<li><a href="data/test.html#test"><span>3</span></a></li>
|
||||
<li><a href="data/test.html" title="∫ßáö Սե"<span>4</span></a></li>
|
||||
<li><a href="data/test.html" title="∫ßáö Սե"><span>4</span></a></li>
|
||||
</ul>
|
||||
<div id="colon:test"></div>
|
||||
<div style="height: 300px;" id="inline-style"></div>
|
||||
@ -107,6 +107,14 @@
|
||||
<div id="tabs6-1"></div>
|
||||
<div id="tabs6-2"></div>
|
||||
</div>
|
||||
<div id="tabs7">
|
||||
<ul id="tabs7-list">
|
||||
<li><a href="#tabs7-1">1</a></li>
|
||||
<li><a href="#tabs7-2">2</a></li>
|
||||
</ul>
|
||||
<div id="tabs7-2"></div>
|
||||
<div id="tabs7-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -21,6 +21,42 @@ test('init', function() {
|
||||
equals( $('div', el).index( $('div.ui-tabs-hide', '#tabs1') ), 1, 'second panel should be hidden' );
|
||||
});
|
||||
|
||||
test('init with hash', function() {
|
||||
expect(5);
|
||||
|
||||
//set a hash in the url
|
||||
location.hash = '#fragment-2';
|
||||
|
||||
//selection of tab with divs ordered differently than list
|
||||
el = $('#tabs1').tabs();
|
||||
|
||||
equals(el.tabs('option', 'selected'), 1, 'second tab should be selected');
|
||||
|
||||
ok(!$('#tabs1 ul li:eq(0)').is('.ui-tabs-selected.ui-state-active'), 'first tab should not be selected nor active');
|
||||
ok($('#tabs1 div:eq(0)').is('.ui-tabs-hide'), 'first div for first tab should be hidden');
|
||||
|
||||
ok($('#tabs1 ul li:eq(1)').is('.ui-tabs-selected.ui-state-active'), 'second tab should be selected and active');
|
||||
ok(!$('#tabs1 div:eq(1)').is('.ui-tabs-hide'), 'second div for second tab should not be hidden');
|
||||
});
|
||||
|
||||
test('init mismatched order with hash', function() {
|
||||
expect(5);
|
||||
|
||||
//set a hash in the url
|
||||
location.hash = '#tabs7-2';
|
||||
|
||||
//selection of tab with divs ordered differently than list
|
||||
el = $('#tabs7').tabs();
|
||||
|
||||
equals(el.tabs('option', 'selected'), 1, 'second tab should be selected');
|
||||
|
||||
ok(!$('#tabs7-list li:eq(0)').is('.ui-tabs-selected.ui-state-active'), 'first tab should not be selected nor active');
|
||||
ok($('#tabs7 div:eq(1)').is('.ui-tabs-hide'), 'second div for first tab should be hidden');
|
||||
|
||||
ok($('#tabs7-list li:eq(1)').is('.ui-tabs-selected.ui-state-active'), 'second tab should be selected and active');
|
||||
ok(!$('#tabs7 div:eq(0)').is('.ui-tabs-hide'), 'first div for second tab should not be hidden');
|
||||
});
|
||||
|
||||
test('destroy', function() {
|
||||
expect(6);
|
||||
|
||||
|
4
ui/jquery.ui.tabs.js
vendored
4
ui/jquery.ui.tabs.js
vendored
@ -210,13 +210,13 @@ $.widget( "ui.tabs", {
|
||||
this.lis.removeClass( "ui-tabs-selected ui-state-active" );
|
||||
// check for length avoids error when initializing empty list
|
||||
if ( o.selected >= 0 && this.anchors.length ) {
|
||||
this.panels.eq( o.selected ).removeClass( "ui-tabs-hide" );
|
||||
$( self._sanitizeSelector( self.anchors[ o.selected ].hash ) ).removeClass( "ui-tabs-hide" );
|
||||
this.lis.eq( o.selected ).addClass( "ui-tabs-selected ui-state-active" );
|
||||
|
||||
// seems to be expected behavior that the show callback is fired
|
||||
self.element.queue( "tabs", function() {
|
||||
self._trigger( "show", null,
|
||||
self._ui( self.anchors[ o.selected ], self.panels[ o.selected ] ) );
|
||||
self._ui( self.anchors[ o.selected ], $( self._sanitizeSelector( self.anchors[ o.selected ].hash ) ) ) );
|
||||
});
|
||||
|
||||
this.load( o.selected );
|
||||
|
Loading…
Reference in New Issue
Block a user