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");
    }
});

}）;

release note

问题是：当我添加标签时，会显示所有标签的内容。

我该如何解决？

由于

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/

在此我点击一个按钮添加一个标签，你可以在对话框中扩展它。

对话框jquery中的选项卡

1 个答案: