Question

我想点击添加标签按钮，让它自动添加一个带有预选内容的标签，而没有对话窗口，如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>值，请使用.text()，例如添加tabCounter使其成为Home2等。

JQuery UI选项卡动态添加选项卡

1 个答案: