jquery ui選項卡：獲取創建嵌套選項卡的寬度

Question

我有Master選項卡元素tab1和tab2。其中tab2具有subtab1和subtab2的另一個嵌套選項卡元素。

最初掌握卡具有隻tab1。然後tab2，tab3等..被動態創建和具有subtab1和subtab2。

目標： 我想嵌套的標籤的寬度（subtabs-*）時，他們不得不選擇它們或使用任何骯髒的事件created.Without。

問題： 我可以得到母校標籤的寬度與 var master_width = $("div.ui-tabs-panel:not(.ui-tabs-hide)",$master).width(); 但我不能讓從標籤的寬度。

我的猜測是因爲tab2被創建但尚未被選中，因此subtab- *不可見，因此寬度爲零。 但是已經創建了子標籤，所以必須有一種方法來獲得它的寬度。

我能通過atcive：event獲得slave tab的widht。但這不是我的要求。 創建時我需要獲取它的寬度。

的jsfiddle：HERE

HTML：

<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">tab1</a></li> 
    <li><a href="#tabs-2">tab2</a></li> 
    </ul> 
    <div id="tabs-1"> 
    some data 
    </div> 
    <div id="tabs-2">  
     <div id="subtabs"> 
      <ul> 
      <li><a href="#subtabs-1">subtab1</a></li> 
      <li><a href="#subtabs-2">subtab2</a></li> 
      </ul> 
      <div id="subtabs-1"> 
      some data 
      </div> 
      <div id="subtabs-2"> 
      some data 
      </div> 
     </div>  
    </div> 
</div> 

JS：

var $master = $("#tabs").tabs(); 
var $slave = $("#subtabs").tabs(); 

var master_width = $("div.ui-tabs-panel:not(.ui-tabs-hide)",$master).width(); 
// For display purpose append to body or use console.log 
$("body").append("Master : "+master_width+"<br>"); 
var slave_width = $("div.ui-tabs-panel:not(.ui-tabs-hide)",$slave).width(); 
// For display purpose append to body or use console.log 
$("body").append("Slave : "+slave_width);//returns zero 

Answer 1

我不認爲你可以，直到顯示寬度才知道。有一些方法可以解決這個問題（請參閱此答案：jQuery - Get Width of Element when Not Visible (Display: None)）。

但最簡單的方法是隻選擇標籤並獲取寬度，如果以後取消選擇它，用戶應該看不到它（儘管這可能取決於系統/瀏覽器）。這得到長度沒有我的系統上的任何閃爍：

// Activate new tab 
var oldActive = $("#tabs").tabs("option", "active"); 
$("#tabs").tabs("option", "active", 1); 

// Get the width 
var slave_width = $("div.ui-tabs-panel:not(.ui-tabs-hide)",$slave).width();   
$("body").append("Slave : "+slave_width); 

// Make the original tab active 
$("#tabs").tabs("option", "active",oldActive); 

Fiddle（抱歉醜陋的代碼添加第二個選項卡）

否則，你可能需要看看我上面這有很多鏈接的答案的通用選項。我想知道是否可以在頂部標籤下（如此隱藏）創建子標籤，測量它們，然後將它們添加到第二個標籤。