0

BackboneJSとTwitterBootstrapを使用してタブコンテナを構築しています。基本的に、コンテナビュー（タブナビゲーションとタブ自体のコンテナdivを含む）があり、各タブはコンテナに追加される異なるバックボーンビューです。

タブが読み込まれる前のマークアップは次のようになります。

<div class="container">
  <ul class="nav nav-tabs">
    <li><a href="#1" data-toggle="tab">Tab1</a></li>
    <li><a href="#2" data-toggle="tab">Tab2</a></li>
  </ul>
  <div class="tab-content">
  </div>
</div>

タブビューがtab-contentdivに追加されます。

私の問題は、ブートストラップタブのレイアウトが実際に定着していないことです。コンテナ内のタブ付きレイアウトの代わりに、divの垂直セットを取得します。基本的には、コンテナビューがレンダリングされた直後にタブレイアウトがアクティブ化されているかのようです。したがって、追加されたタブは、最初はDOMの一部ではないため、考慮されません。

私は基本的に、タブがすべてDOMにロードされた後、Bootstrapを呼び出してタブをアクティブ化する方法を探しています。のような行を追加して$(".nav-tabs a:first").tab('show')も、修正されないようです。

jQuery UIでは、タブをアクティブ化するために関数を明示的に呼び出す必要があることを知っています。ブートストラップに似たものはありますか？

4

2 に答える 2

1

リスト要素内のアンカーは、href を tab-content クラス内の div の ID に設定する必要があります。タブ コンテンツ内の div には、「タブ ペイン」クラスと、アンカーによって参照される ID が必要です。

<div class="container">
  <ul class="nav nav-tabs">
    <li><a href="#tab1" data-toggle="tab">Tab1</a></li>
    <li><a href="#tab2" data-toggle="tab">Tab2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane" id="tab1">tab1</div>
    <div class="tab-pane" id="tab2">tab2</div>
  </div>
</div>

ここに jsfiddle があります: http://jsfiddle.net/TVUPF/98/

于 2012-10-01T22:08:43.657 に答える
0

これが役立つかもしれません: http://lostechies.com/derickbailey/2012/02/20/using-jquery-plugins-and-ui-controls-with-backbone/

この投稿では、DOM 内の要素に依存するブートストラップなどのコントロール スイートを操作する方法の例を示します。

これを機能させるには、いくつかの異なるソリューションがあります。

于 2012-10-02T00:51:38.307 に答える