jQueryUI的標籤（1.9.1）激活負荷

Question

我有這樣的代碼：

var enTabs = { 
    "Layout": 0, 
    "Edit": 1, 
    "Stuff": 2 
} 

$("#tabs").tabs({ 
    activate: function (event, ui) { 
     switch (ui.newTab.index()) { 
      case enTabs.Layout: 
      // loads remote data, processes it, draws it to this tab; 
      break; 

      case enTabs.Edit: 
      // loads remote data, processes it, draws it to this tab; 
      break; 

      case enTabs.Stuff: 
      // loads remote data, processes it, draws it to this tab; 
      break; 

     } 
    } 
}).tabs("option","disabled",[enTabs.Edit,enTabs.Stuff]); 
console.log("active tab", $("#tabs").tabs("option","active")); // says "0" 

按照jQuery的「設計」的聲明（http://bugs.jqueryui.com/ticket/8735），當標籤是不處理的activate事件第一次繪製;或者當您設置.tabs("option","active",enTabs.Layout)時，如果當前索引與您設置的選項/活動相匹配，激活將不會觸發，並且它被初始化爲零。

什麼是最好的方法來確保當第一次繪製標籤，'激活'被激發的第一個（第0）選項卡，意識到我不想綁定到'創建'，因爲我沒有想要加載標籤上的數據，直到它們實際被點擊？

我一直沒能做出

$("#tabs").tabs("option", "active", -1).tabs("option", "active", enTabs.Layout) 

工作始終。

Answer 1

你可以使用這樣的事情

function loadTab(index) { 
    switch (index) { 
     case enTabs.Layout: 
     // loads remote data, processes it, draws it to this tab; 
     break; 

     case enTabs.Edit: 
     // loads remote data, processes it, draws it to this tab; 
     break; 

     case enTabs.Stuff: 
     // loads remote data, processes it, draws it to this tab; 
     break; 

    } 
} 
$(function() { 
     $("#tabs").tabs({ 
      create: function (event, ui) { loadTab(ui.tab.index()) }, 
      activate: function (event, ui) { loadTab(ui.newTab.index()) } 
     }); 
}); 

這裏有一個類似的問題 JQuery UI tabs 1.10.0 activate is not called after creation

Answer 2

這是一種方式來觸發頁面加載的激活功能：

$('#tabs') 
    .tabs({ 
     active: false, 
     collapsible: true, 
     activate: function(){console.log('Tab activated');} 
    }) 
    .tabs('option', 'active', 0) 
    .tabs('option', 'collapsible', false); 

釋：

JQuery選項卡s的帶有選項

• collapsible:true初始化//使用選項活躍需要：假
• active:false//意味着沒有選項卡中（全部摺疊）

然後，我們立即激活我們希望看到的頁面加載

• .tabs('option', 'active', 0)//這片0被激活，但可能是另一種

最後，我們刪除可摺疊的選項（如果你不希望它...）

• .tabs('option', 'collapsible', false)