2

ユーザーが好きなようにタブを追加および削除できるタブメニューがあります。新しいタブを作成するとき、彼らは好きなように名前を付けます（そのためのブートストラップモーダルボックスが開きます）。タブに名前を付けるとタブが作成されますが、コンテンツをどうするかわかりません。追加されたすべてのタブに同じコンテンツをロードする必要があります。オンラインで見つけたあらゆる種類のスクリプトを試しましたが、何も機能しないようです。

これは私が使用するjQueryです：

$('.tabs a:last').tab('show');
        $('#createTab').click(function() {
            /* opens the modal box */
            $('#tabModal').modal();
        });
/* after clicking on a link Submit that has the id of newTab */
        $('#newTab').click(function(){
            var title = $('#myInput4').val();
            $('#tabHeaders')
                .append($('<li><a href="#' + title + '" class="tabs"><h1>'+ title +'<i class="icon-remove"></i></h1></a></li>'));
            $('#myTabContent') /* this way adding content does not really work */
                .append($('<div class="tab-pane fade in active" id="'+ title +'"></div>')); 
            $(title).tab('show');
        });
    /* tab delete */
    $('.tabs i.icon-remove').live('click', function() {
       $(this).closest('li').remove();
    });

ボタンを追加するためのHTML：

<ul class="nav nav-tabs" id="tabHeaders">
  <li><a href="#" data-toggle="tab" id="createTab"><h1>&nbsp;&nbsp;<i class="icon-plus"></i>&nbsp;&nbsp;</h1></a></li>
</ul>

誰かが私にコンテンツをロードするのを手伝ってくれたら幸いです。コンテンツ部分にロードしたいファイルaddTab.phpを作成しました。ユーザーが#createTabをクリックすると、最初にタブの名前を選択し、次にコンテンツがそのタブにロードされます。

4

1 に答える 1

0

テスト例:

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <div class="tab-pane" id="profile">...</div>
    <div class="tab-pane" id="messages">...</div>
    <div class="tab-pane" id="settings">...</div>
</div>

タブを追加するには、これを行うだけです：

$(document).on('click', '#submit_button_in_the_modal', function(event){
    event.stopPropagation();

    var title = $('#myInput4').val();
    $('#tabHeaders').append('<li><a href="#new_tab_id" data-toggle="tab">'+ title +'</a></li>');
    $('.tabs a:last').tab('show');

    //this remove the active content
    $('div.active').removeClass('active').removeClass('in');

    //this add the new content
    $('.tab-content').append('<div class="tab-pane in active" id="new_tab_id"><p> Loading content ...</p></div>');
    //with this you add the tab
    $('#myTab').append('<li><a href="#new_tab_id" data-toggle="tab">Tab Name</a></li>');
    //this shows the tab
    $('#tab a:last').tab('show');
    //this loads the content you want in the content
    $('#new_tab_id').load('addTab.php');    
})

これを試してください。

于 2012-10-09T11:34:58.940 に答える