6

すべての入力/ヘルプ/アドバイスを事前に感謝します...

Twitter Bootstrap タブを使用して情報を整理しています。タブはフォーム ページに配置され、各タブは「連絡先フォーム」で構成されます。ユーザーはフォーム全体を送信する前に、このページに複数の連絡先を追加できます。

<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#contact_01" data-toggle="tab">Joe Smith</a><span>x</span></li>
        <li><a href="#contact_02" data-toggle="tab">Molly Lewis</a><span>x</span> </li>
        <li><a href="#" class="add-contact" data-toggle="tab">+ Add Contact</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="contact_01">Contact Form: Joe Smith</div>
        <div class="tab-pane" id="contact_02">Contact Form: Molly Lewis</div>
    </div>
</div>

完全なコードはこちら: http://jsfiddle.net/Harlow/zQnck/34/

タブの jQuery UI の「簡単な操作」の例の機能を模倣しようとしています。( http://jqueryui.com/tabs/#manipulation )

私が現在持っているものは新しいタブを追加しますが、「+ Add.新しい連絡先」は常に最後のタブになりますが、実際には独自のタブ コンテンツ ペインはありません。コンテンツを動的に追加するのとは反対に、各タブの小さな「x」をクリックしてコンテンツを削除できるようにしたいと考えています。

- 編集 -

明確にするために、jQuery の例では、[新しいタブ] をクリックするとモーダルがトリガーされます。私の目的のために、タブ名またはコンテンツを入力せずに新しいタブを作成したいだけです (コンテンツは常に同じ連絡フォームになります。タブ名は新しく生成された ID と同じであっても問題ありません。後で連絡先の名前に自動的に更新されます。)

4

2 に答える 2

13

編集：両方のフィドルが死んだので、私は元のフィドルを可能な限り再現しました。

新しいフィドル： http： //jsfiddle.net/dogoku/KdPdZ/2/

$(".nav-tabs").on("click", "a", function(e){
      e.preventDefault();
      $(this).tab('show');
    })
    .on("click", "span", function () {
        var anchor = $(this).siblings('a');
        $(anchor.attr('href')).remove();
        $(this).parent().remove();
        $(".nav-tabs li").children('a').first().click();
    });

    $('.add-contact').click(function(e) {
        e.preventDefault();
        var id = $(".nav-tabs").children().length; //think about it ;)
        $(this).closest('li').before('<li><a href="#contact_'+id+'">New Tab</a><span>x</span></li>');         
        $('.tab-content').append('<div class="tab-pane" id="contact_'+id+'">Contact Form: New Contact '+id+'</div>');
});

ホバー関数を削除し、代わりにcssを使用したことに注意してください

.nav-tabs > li:hover > span {
    display:block;
}
于 2013-03-11T22:03:10.890 に答える
2

Dogoku の jsfiddle は 404 のように見えるので、ここにソリューションの簡単な jsfiddle をまとめました: http://jsfiddle.net/xQ3f5/

これを更新して、「アクティブな」クラスが +Add Contact タブ要素に適用されないようにしました。これは、どのタブ要素にも対応していないためです。また、アクティブなタブを新しく作成したタブに切り替えることをお勧めします。これがJavaScriptです：

$(".nav-tabs").on("click", "a", function(e){
      e.preventDefault();
    if(this.id == "add-contact"){return false;}
      $(this).tab('show');
    })
    .on("click", "span", function () {
        var anchor = $(this).siblings('a');
        $(anchor.attr('href')).remove();
        $(this).parent().remove();
        $(".nav-tabs li").children('a').first().click();
    });

    $('#add-contact').click(function(e) {
        e.preventDefault();
        var id = $(".nav-tabs").children().length; //think about it ;)
        $(this).closest('li').before('<li id="contact_tab_'+id+'"><a href="#contact_'+id+'">New Tab</a></li>');         
        $('.tab-content').append('<div class="tab-pane" id="contact_'+id+'">Contact Form: New Contact '+id+'</div>');
        $("#contact_tab_"+id+" a").tab('show');
});
于 2013-09-23T16:23:40.220 に答える