jQuery UI Tabs trouble
jQuery UI Tabs trouble
After initializing the tab set (all disabled by default).
I click on a few buttons to advance the menu system. All works fine so
far.
Then I want to go back to a previous tab and disable the tabs after
it. All the tabs get disabled EXCEPT for the the one I WAS on.
I am having trouble disabling All Tabs beyond the one I select. I
basically want to do this so users won't be able to "jump around" the
menu if they go back to an earlier tab.
I've tried various iterations of the "for" loop.
I've also tried putting .tabs('disable',i) in the loop and disabled
the tab index [i] if its greater than the currently selected one.
Still didn't disable the previously selected tab.
You can see this behaviour here:
http://app.deltatrac.net/tabtest.html
Here is the code
--jquery version 1.3.2
--jquery ui version 1.7.1
JavaScript:
$(function() {
var tabSet = $('#mainTabs').eq(0).tabs(
{
fx: { opacity: 'toggle' },
disabled: [1,2,3,4,5,6]
}
)
.bind('tabsselect', function(event, ui) {
var currTab = ui.index
var tabsLength = tabSet.tabs('length')
var myArray2 = new Array()
j= 0
for (i = 0; i < tabsLength; i++ ) {
if (i > currTab) {
myArray2[j] = i
j++
}
}
tabSet.tabs('option','disabled',myArray2)
});
});
function enableNextOne (id ) {
var $tabs = $("#mainTabs").tabs()
$tabs.tabs('enable',id)
$tabs.tabs('select',id)
}
HTML:
<div id="mainTabs">
<ul>
<li><a id="tab0" href="#pg1">1</a></li>
<li><a id="tab1" href="#pg2">2</a></li>
<li><a id="tab2" href="#pg3">3</a></li>
<li><a id="tab3" href="#pg4">4</a></li>
<li><a id="tab4" href="#pg5">5</a></li>
<li><a id="tab5" href="#pg6">6</a></li>
<li><a id="tab6" href="#pg7">7</a></li>
</ul>
<div id="pg1">START PAGE<button onclick="enableNextOne
(1)">Enable Tab 2</button></div>
<div id="pg2">PAGE 2<button onclick="enableNextOne(2)">Enable
Tab 3</button></div>
<div id="pg3">PAGE 3<button onclick="enableNextOne(3)">Enable
Tab 4</button></div>
<div id="pg4">PAGE 4<button onclick="enableNextOne(4)">Enable
Tab 5</button></div>
<div id="pg5">PAGE 5<button onclick="enableNextOne(5)">Enable
Tab 6</button></div>
<div id="pg6">PAGE 6<button onclick="enableNextOne(6)">Enable
Tab 7</button></div>
<div id="pg7">LAST PAGE</div>
</div>