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?

Answer 1

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

Answer 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'); 
  } 
});