0

我正在使用 twitter 模式显示的 div 中使用 twitter bootstrap v2.2.2 API 的选项卡功能（同样，引导程序的 v2.2.2）。问题是，当我这样做时，模式对话框会随着选项卡的变化而改变形状和大小。

我一直在尝试通过询问这些选项卡窗格并将外部 div 设置为窗格遇到的最大大小和宽度来设置包装选项卡窗格的 div 的大小。问题是，无论我做什么，我似乎总是无法确定这些窗格的大小（我假设是因为它们尚未显示？）。

我的布局（大致）...

<div id="ClientEditPanel" class="modal hide" role="dialog">

  <div class="modal-header">
    <h3>Client details</h3>
  </div>

  <div class="modal-body form-horizontal">

    <ul class="nav nav-tabs">
      <li><a class="active" data-toggle="tab" href="#ClientEditPanel_Tab_Personal">Personal</a></li>
      <li><a href="#ClientEditPanel_Tab_Profile" data-toggle="tab">Profile</a></li>
      <li><a href="#ClientEditPanel_Tab_Other" data-toggle="tab">Other</a></li>
    </ul>

    <div id="ClientEditPanel_Tabs" class="tab-content">
      <div id="ClientEditPanel_Tab_Personal" class="tab-pane active">
        ...
      </div>
      <div id="ClientEditPanel_Tab_Profile" class="tab-pane">
        ...
      </div>
      <div id="ClientEditPanel_Tab_Other" class="tab-pane">
        ...
      </div>
    </div>

  </div>

  <div class="modal-footer form-actions">
    <input type="submit" class="btn btn-primary" />
  </div>

</div>

以下 CSS 进一步支持了这一点...

.tab-content {
  overflow: auto;
}

.tab-content > .tab-pane, {
  display: none;
}

.tab-content > .active, {
  display: block;
}

我正在尝试按如下方式获取窗格...

$.each($(".tab-pane"), function () {
  ...
});

从理论上讲，它应该就像将父 div 的宽度设置为最宽子的宽度并将父 div 的高度设置为最高子的高度一样简单。我想测量 ClientEditPanel_Tab_Personal、ClientEditPanel_Tab_Profile 和 ClientEditPanel_Tab_Other 并在 ClientEditPanel_Tabs 上设置最大值。

通过调试，我可以确认我的选择器带回了正确的元素“this”清楚地代表了我第一次通过迭代器时的第一个选项卡。不过，在确定了这一点后，我询问的 div 的任何属性始终为 null 或零。我已经尝试过“this”的以下属性......

  • 客户身高
  • 客户端宽度
  • 滚动高度
  • 滚动宽度
  • 内部高度
  • 内宽
  • 外高
  • 外宽
  • 样式.高度
  • 样式.pixelHeight
  • 偏移高度

可能还有一些我没有列出的。

有没有人有任何进一步的想法可以实现我正在寻找的东西。我确信它可以完成，因为我知道 JQuery.dialog 可以自动调整对话框的大小（包括与 JQuery.tabs 组合时），但是我现在使用 twitter 引导程序太远了，无法更改。

谢谢。

4

2 回答 2

1

在元素以 HTML 呈现之前，不会设置元素的高度和宽度属性。您可以将容器推离页面，渲染内容，进行一些调整，然后将内容移回屏幕。根据我的个人经验，我只会渲染输出，然后在准备好文档（jQuery）时对页面进行调整。这应该发生得非常快，只要元素的数量相当少，我就没有注意到任何不利影响。

于 2013-03-17T01:54:55.820 回答
0

You can't read dimensions unless it is in DOM. As @Kalpers suggested, render it outside viewport (e.g. append to <body> and have position:absolute; top: -9999px or append anywhere else but add visibility:hidden, then get element dimensions.

于 2013-03-17T02:10:44.933 回答