jQuery UI tabs disable tab navigation

Question

I tried to disable tab navigation using

var $tabs = $("#tabs").tabs({
    select: function(event, ui) { return false; }
});

However, this also disables the flow links I'm using for navigation:

$('input.nexttab').click(function() {
    var tab_num = $tabs.tabs('option', 'selected');
    // error check this tab before proceeding
    if ( check_tab(tab_num) ) {
        $tabs.tabs('select', tab_num + 1 );
    }
});

Ideally, I'd want to disable tab navigation for tabs to right of current tab, and ensure my <<prev and next>> tab navigation buttons always work.

Any suggestions?

CBono · Accepted Answer · 2013-03-19 21:49:12Z

9

Have you tried setting the event option to something that isn't likely to be fired (if at all)?

For instance:

$('#tabs').tabs({ event: 'change' });

or

$('#tabs').tabs({ event: '' }); //probably better

edited Mar 19, 2013 at 21:49

CBono

3,8131 gold badge35 silver badges40 bronze badges

answered Jul 13, 2009 at 5:50

Jason Berry

2,4791 gold badge17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jfrobishow Over a year ago

+1 setting it to onchange works fine, empty doesn't though. Odds are that the tab control won't fire an onchange anyway.

Christian C. Salvadó · Accepted Answer · 2009-07-11 06:38:12Z

2

You should store a flag on the first closure, in the function you pass to $(document).ready, set it true when your next/prev buttons are clicked, and set back to false when the tab has been shown, by doing so, you will be only able to change tab by using the buttons.

Check this working sample and the following code snippet:

$(document).ready(function(){ 
  var allowTabChange = false; 
  var $myTabs = $("#tabs"); 

  $myTabs.tabs({ 
                    select: function(event, ui) { return allowTabChange; }, 
                    show: function(event, ui) { allowTabChange = false; }, 
               }); 

  $('#nextButton').click(function(){offsetTab(1);}); 
  $('#prevButton').click(function(){offsetTab(-1);}); 

  // Helper functions

  function offsetTab(offset){ 
    var tab_num = $myTabs.tabs('option', 'selected'); 
    var nextTab = tab_num + offset; 

    if ( check_tab(nextTab) ) { 
      allowTabChange = true; 
      $myTabs.tabs('select', nextTab); 
    } 
  }

  function check_tab(tab_num){        
    return tab_num >= 0 && tab_num < $myTabs.tabs('length'); 
  } 
});

answered Jul 11, 2009 at 6:38

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

1 Comment

cliveholloway Over a year ago

Hmmmm, seems a little messy - I was hoping there's would be a one liner to easily add/remove the event handler from the tabs. I could live with all tabs being disabled as long as the prev/next links work (to simplify the logic). Use a selector on the .ui-tabs-nav class elements and delete the click event? Would that work?

Collectives™ on Stack Overflow

jQuery UI tabs disable tab navigation

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related