2

我有带有tab1和的主标签元素tab2。Where有另一个带有和tab2的嵌套选项卡元素。subtab1subtab2

最初，主选项卡只有tab1.Then tab2，tab3依此类推 .. 是动态创建的，并且具有subtab1和subtab2。

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

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

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

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

在此处输入图像描述

JSFIDDLE：这里

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
4

1 回答 1

0

我不认为你可以，宽度在显示之前是未知的。有一些方法可以解决这个问题（参见这个答案：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 );

小提琴（很抱歉添加第二个选项卡的丑陋代码）

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

于 2013-10-10T09:43:23.380 回答