jquery-ui - JQuery UI 标签动态添加标签

Question

这是我的 fiddle - http://jsfiddle.net/TTBzk/

我想单击添加选项卡按钮并让它自动添加一个带有预选内容的选项卡，而没有对话框窗口，如此处的 JQuery UI 操作示例所示 - http://jqueryui.com/tabs/#manipulation

我不知道我做错了什么。任何帮助将不胜感激。

jQuery

$(function() {
    var websiteframe = '<iframe src="browser.html" width="100%" height="100%" allowtransparency="true" frameBorder="0">Your browser does not support IFRAME</iframe>';
    var tabs = $("#tabs").tabs();
    tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
    tabCounter = 2;

    function addTab() {
        var label = tabTitle.val() || "" + tabCounter,
        id = "tabs-" + tabCounter,
        li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
        websiteframe = '<iframe src="browser.html" width="100%" height="100%" allowtransparency="true" frameBorder="0">Your browser does not support IFRAME</iframe>';
        tabs.find(".ui-tabs-nav").append(li);
        tabs.append("<div align='center' id='" + id + "'>" + websiteframe + "</div>");
        tabs.tabs("refresh");
        tabCounter++;
    }

    $("#add_tab").click(function() {
        addTab();
    });
});

HTML

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Home</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>
        <li style="float:right;"><a id="add_tab">+</a></li>
    </ul>
    <div id="tabs-1">
        <iframe src="browser.html" width="100%" height="100%" allowtransparency="true" frameBorder="0">
            Your browser does not support IFRAME's
        </iframe>
    </div>
</div>

CSS

#tabs li .ui-icon-close {
    float:left;
    margin:0.4em 0.2em 0 0;
    cursor:pointer;}

#add_tab {
    cursor:pointer;}

div#tabs {
    position:absolute;
    top:0px;
    left:50%;
    width:98%;
    height:98%;
    margin-left:-49.5%;}

div#tabs div {
    display:inline-block;
    padding:0px;
    width:100%;
    height:90%;}

Answer 1

在您的 addTab您使用此行的功能:

var label = tabTitle.val() || "" + tabCounter;

但你从不声明一个名为 tabTitle 的变量

更新 jsfiddle

变化:

<li>
    <a href="#tabs-1" id="tab_title">Home</a>
... 

var tabTitle = $('#tab_title');

给它一个 ID 用于测试目的。
声明的变量。

标签现在可以动态添加。您当然应该更改选项卡标题名称。对于 <a href>值(value)用途 .text()和例如添加 tabCounter到它所以它变成 Home2 等。