jQueryのUIタブでタブのナビゲーションを無効にする

Question

を使用してタブのナビゲーションを無効にしようとしましたが、これもナビゲーション用に使用しているフローリンクを無効にしています：

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

理想的には、現在のタブの右に移動し、< < prevとnext > >タブナビゲーションボタンが常に機能するようにします。

何か提案がありますか？

Answer 1

$(document).readyに渡す関数の最初のクロージャにフラグを格納し、次の/前のボタンがクリックされたときにtrueに設定し、そのタブが表示されているときにfalseに戻してから、ボタンを使ってタブを変更することしかできません。

チェックthis working sampleと、次のコードスニペット：

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

Answer 2

は、あなたが（すべてであれば）解雇される可能性が低いものにevent optionを設定しようとしたことがありますか？例えば

：

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

または

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