You simply cannot disable a selected tab. You'd had to unselect it first, for that the collapsible option has to be set to true.
--Klaus On 1 Mai, 09:29, Pinoy Paul <[email protected]> wrote: > 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> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
