0

Twitterモーダルを使用して表示されているdiv内でTwitterブートストラップv2.2.2APIのタブ機能を使用しています（ここでも、ブートストラップの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に最大値を設定したいと思います。

デバッグを通じて、セレクターが正しい要素を戻していることを確認できます。「これ」は、イテレーターを最初に通過したときの最初のタブを明確に表しています。ただし、それを確認したので、問い合わせるdivのプロパティは常にnullまたはゼロです。私は「これ」の次のプロパティを試しました...

  • clientHeight
  • clientWidth
  • scrollHeight
  • scrollWidth
  • innerHeight
  • innerWidth
  • アウターハイト
  • アウター幅
  • style.height
  • style.pixelHeight
  • offsetHeight

そしておそらく私がリストしていないものがいくつかあります。

誰かが私が探していることを達成するかもしれないさらなるアイデアを持っていますか？JQuery.dialogがダイアログをコンテンツに合わせて自動的にサイズ変更できることを知っているので（JQuery.tabsと組み合わせた場合を含む）、それは可能だと確信していますが、Twitterのブートストラップを使用するのは遠すぎて、今は変更できません。

ありがとう。

4

2 に答える 2

1

要素の高さと幅のプロパティは、要素がHTMLでレンダリングされるまで設定されません。コンテナをプッシュしてページから外し、コンテンツをレンダリングし、いくつかの調整を行ってから、コンテンツを画面に戻すことができます。私の個人的な経験から、出力をレンダリングしてから、ドキュメントの準備ができたら（jQuery）、ページを調整します。これは非常に速く発生するはずであり、要素の数がかなり少ない限り、悪影響に気付くことはありません。

于 2013-03-17T01:54:55.820 に答える
0

DOM でない限り、ディメンションを読み取ることはできません。@Kalpers が提案したように、ビューポートの外にレンダリングします (たとえば、 append to <body>and haveposition:absolute; top: -9999pxまたは append 以外の場所に追加visibility:hiddenし、次に要素の寸法を取得します。

于 2013-03-17T02:10:44.933 に答える