jQuery UI選項卡 - 如何禁用頂層菜單？

Question

我正在嘗試禁用jQuery UI選項卡上的頂層菜單 - 因此這些選項卡只能用next/prev按鈕操作。

禁用選項窗體文檔不接縫工作按預期。

請看看我這裏的例子：Live Demo

jQuery代碼：

$(document).ready(function() { 

    $(function() { 

      var $tabs = $('#tabs').tabs(); 

      $(".ui-tabs-panel").each(function(i){ 

       var totalSize = $(".ui-tabs-panel").size() - 1; 

       if (i != totalSize) { 
        next = i + 2; 
        $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>"); 
       } 

       if (i != 0) { 
        prev = i; 
        $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>"); 
       } 

      }); 

      $('.next-tab, .prev-tab').click(function() { 
        $tabs.tabs('select', $(this).attr("rel")); 
        return false; 
       }); 


     }); 

}); 

任何想法如何，我可以禁用頂級菜單，但保持結構，風格等..？

Answer 1

如何在選擇選項卡之前選中選項卡，然後再次禁用選項卡？

所以，在初始化時，所有選項卡將被禁用：

var $tabs = $('#tabs').tabs({ 
     disabled: [0, 1, 2] 
    }); 

並選擇選項卡時，在選擇前啓用它，然後再次關閉所有標籤：

 $tabs.tabs('enable', tabIndex) 
      .tabs('select', tabIndex) 
      .tabs("option","disabled", [0, 1, 2]); 

看到它在行動：http://jsfiddle.net/william/y6QeV/21/。

---

編輯：你可以簡單地僅禁用舊標籤：

 var newTabIndex = $(this).attr("rel"); 
     var oldTabIndex = $tabs.tabs('option', 'selected'); 
     $tabs.tabs('enable', newTabIndex) 
      .tabs('select', newTabIndex) 
      .tabs('disable', oldTabIndex); 

例子：http://jsfiddle.net/william/y6QeV/22/。