jquery ui 选项卡 : get width of nested tabs on creation

Question

我有带有 tab1 和 tab2 的主选项卡元素。其中 tab2 有另一个嵌套选项卡元素，其中包含 subtab1 和 subtab2。

最初主选项卡只有 tab1。然后 tab2、tab3 等动态创建并具有 subtab1 和 subtab2。

目标: 我想在创建嵌套选项卡 (subtabs-*) 时获取它们的宽度。而不必选择它们或使用任何令人讨厌的事件。

问题: 我可以得到 Mater 选项卡的宽度 var master_width = $("div.ui-tabs-panel:not(.ui-tabs-hide)",$master).width(); 但我无法获取从选项卡的宽度。

我的猜测是因为当 tab2 创建但尚未选择时，因此 subtab-* 不可见，因此宽度为零。 但是子选项卡已经创建，因此必须有一种方法来获取其宽度。

我能够通过 atcive:event 获取从属选项卡的宽度。但这不是我的要求。 我需要在创建它时获取它的宽度。

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 (抱歉添加第二个选项卡的丑陋代码)

否则您可能需要查看我上面链接的答案，其中有很多通用选项。我想知道您是否可以在顶部选项卡“下方”创建子选项卡(因此隐藏)，测量它们，然后将它们添加到第二个选项卡。