Вкладки в диалоговом окне jquery

Question

Я хотел бы получить вкладки в диалоговом окне. Вот код:

HTML:

<div id="box_form1"> 
<div id="dialog" title="Tab data"> 
    <form> 
    <fieldset class="ui-helper-reset"> 
     <label for="tab_title">Title</label> 
     <input type="text" name="tab_title" id="tab_title" value="Tab Title" class="ui-widget-content ui-corner-all"> 
     <label for="tab_content">Content</label> 
     <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all">Tab content</textarea> 
    </fieldset> 
    </form> 
</div> 

<button id="add_tab">Add Tab</button> 

<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">TOTAL</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li> 
    </ul> 
    <div id="tabs-1"> 
    <table> 
    <thead> 
     <tr> 
      <th>title</th> 
      <th>2015</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>INV</td> 
      <td>1000</td> 
     </tr> 
    </tbody> 
</table> 
    </div> 
</div> 

JAVASCRIPT:

$(document).ready(function() { 
$('#box_form1').dialog({ 
    title: "test", 
    autoOpen: false, 
    height: 600, 
    width: 600, 
    modal: true, 
}); 
$('#module_ppi').button().click(function (e) { 
    $('#box_form1').dialog('open'); 
}); 

var tabTitle = $("#tab_title"), 
    tabContent = $("#tab_content"), 
    tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>", 
    tabCounter = 2; 

var tabs = $("#tabs").tabs(); 

// modal dialog init: custom buttons and a "close" callback resetting the form inside 
var dialog = $("#dialog").dialog({ 
    autoOpen: false, 
    modal: true, 
    buttons: { 
     Add: function() { 
      addTab(); 
      $(this).dialog("close"); 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
    }, 
    close: function() { 
     form[0].reset(); 
    } 
}); 

// addTab form: calls addTab function on submit and closes the dialog 
var form = dialog.find("form").submit(function (event) { 
    addTab(); 
    dialog.dialog("close"); 
    event.preventDefault(); 
}); 

// actual addTab function: adds new tab using the input from the form above 
function addTab() { 
    var label = tabTitle.val() || "Tab " + tabCounter, 
     id = "tabs-" + tabCounter, 
     li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)), 
     tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content."; 

    tabs.find(".ui-tabs-nav").append(li); 
    tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>"); 
    tabs.tabs("refresh"); 
    tabCounter++; 
} 

// addTab button: just opens the dialog 
$("#add_tab") 
    .button() 
    .click(function() { 
    dialog.dialog("open"); 
}); 

// close icon: removing the tab on click 
tabs.delegate("span.ui-icon-close", "click", function() { 
    var panelId = $(this).closest("li").remove().attr("aria-controls"); 
    $("#" + panelId).remove(); 
    tabs.tabs("refresh"); 
}); 

tabs.bind("keyup", function (event) { 
    if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) { 
     var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls"); 
     $("#" + panelId).remove(); 
     tabs.tabs("refresh"); 
    } 
}); 

});

http://jsfiddle.net/y25zw254/1/

Проблема: когда я добавить закладку, содержание всех закладок.

Как это исправить?

Благодаря

Answer 1

Вы можете посмотреть на этот раствор

$(document).ready(function() { 
    $("div#tabs").tabs(); 

    $("button#add-tab").click(function() { 

     var num_tabs = $("div#tabs ul li").length + 1; 

     $("div#tabs ul").append(
      "<li><a href='#tab" + num_tabs + "'>#" + num_tabs + "</a></li>" 
     ); 
$("div#tabs").append(
      "<div id='tab" + num_tabs + "'>#" + num_tabs + "</div>" 
     ); 
     $("div#tabs").tabs("refresh"); 
    });      
}); 

http://jsfiddle.net/axrwkr/ujUu2/

В этом я добавляю на вкладку нажатием кнопки вы можете расширить, что в диалоговом окне.