4

Twitterのブートストラップタブコンポーネントがあります。

2 つのタブをフォームの一部にしたいと考えています。3番目はそうではありません。

そこで、2 つのタブを 1 つのフォームにラップするだけにしようと考えました。

しかし、うまくいきません: http://jsfiddle.net/gLrr4/1/

基本的に、クラスは適切な要素に適用されますが、フォームがそれぞれのタブの可視性の変更を妨げているようです。

どうすればこれを修正できますか?

デモ: http://jsfiddle.net/gLrr4/1/
デモ コード:

<html>
<head>
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" type="text/css"/>
    <script src='http://twitter.github.com/bootstrap/js/bootstrap-tab.js'></script>
</head>
<body>
<div class="alert alert-error">Tab 1 and two are wrapped in a form tag!</div>
<div class='row'>
    <div class="span12">

        <div class="tabbable">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab1" data-toggle="tab">#tab1</a></li>
                <li><a href="#tab2" data-toggle="tab">#tab2</a></li>
                <li><a href="#tab3" data-toggle="tab">#tab3</a></li>
            </ul>

            <div class="tab-content">
                <form class="form-vertical">
                    <div class="tab-pane active" id="tab1">
                        <div class="alert alert-info">
                            This is #tab1
                        </div>
                        <div class='form-actions'>
                            <button type='submit' class='btn btn-primary'>Save changes</button>
                            <button id='cancel' class='btn'>Cancel</button>
                        </div>
                    </div>

                    <div class="tab-pane" id="tab2">
                        <div class="alert alert-info">
                            This is #tab2
                        </div>
                        <div class='form-actions'>
                            <button type='submit' class='btn btn-primary'>Save changes</button>
                            <button id='cancel' class='btn'>Cancel</button>
                        </div>
                    </div>
                </form>

                <div class="tab-pane" id="tab3">
                    <div class="alert alert-info">
                        This is #tab3
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

</body>
</html>​
4

3 に答える 3

4

Ok、

解決策を見つけました：

Javascript を少し使用すると、次のようになります。

$('a[data-toggle="tab"]').on('shown', function (e) {
    $(e.target.hash).closest('.tab-content')
        .find('> form > .tab-pane.active:not(' + e.target.hash + '), 
               > .tab-pane.active:not(' + e.target.hash + ')')
        .removeClass('active');
});

そしてCSSのほんの少し：

.tab-content > form > .tab-pane,
.pill-content > form > .pill-pane {
    display: none;
}
.tab-content > form > .active,
.pill-content > form > .active {
    display: block;
}

フォームでタブをネストできるようになりました。もちろん、これはフォーム タグのみをサポートし、子はサポートしません。
を削除することで任意の要素をサポートできます>が、ネストされたタブがあるとカスケード ダウンしてしまうという問題があります。

于 2012-09-19T23:49:54.510 に答える
2

そうですね、少し長い答えですが、ご容赦ください。これを機能させるには、「修正」する必要がある2つの問題があります...

最初の問題: 最初の 2 つのタブが同時に表示されます。

原因: boostrap.css (縮小されていない) 行 4042 および 4047 は、div の直下の子孫のみを選択します。

.tab-content > .tab-pane

と

.tab-content > .active

解決策: 次の CSS を別の CSS ファイルに追加します。

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

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

2 番目の問題: 3 番目のタブをクリックして別のタブを選択すると、常に 3 番目のタブが表示されるようになりました。

原因: これは、Boostrap がクリックされていないタブから「アクティブな」クラスをクリアするときに、コンテナーの直接の子孫のみを検索するためです。bootstrap.js の 1563 行目:

var $active = container.find('> .active')

解決策: これを修正するには、この行を次のように変更する必要があります。

var $active = container.find('.active')

ただし、これは理想的ではありません。したがって、ブートストラップコードを変更したくない場合は...

  • 1510 行と 1624 行の間のすべてのブートストラップ タブをコピーします。
  • 出現するすべての名前をTabto に変更NewTab
  • $.fn.tab1602 行から次の$.fn.modifiedTabように変更
  • (data = new Tab(this))1606 行から次の行に変更します。(data = new NewTab(this))
  • ドキュメントに従って使用し.tabますが、.modifiedTab

それが役立つことを願っています:)

于 2012-09-19T23:45:58.127 に答える
0

これがあなたが探していたものであることを願っています、ここにリンクがありますhttp://jsfiddle.net/gLrr4/2/

div-tabコンテンツの外でformタグを取得すると、機能するように見えます。

于 2012-09-19T23:27:30.293 に答える