JQuery用戶界面選項卡動態添加標籤

這裏是我的小提琴 - http://jsfiddle.net/TTBzk/JQuery用戶界面選項卡動態添加標籤

我想單擊添加標籤按鈕，有如下介紹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%;}

來源

2013-05-21 Michael Schwartz

在你addTab樂趣ction您使用此行：

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

，但你從來沒有聲明一個變量與更新jsfiddle

更名tabTitle

：

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

var tabTitle = $('#tab_title');

給它一個ID爲測試目的。聲明的變量。

現在可以動態添加標籤了。您當然應該更改標籤標題名稱。對於<a href>值使用.text()並且例如添加tabCounter它，所以它成爲Home2等

來源

2013-05-21 20:41:20 SirDerpington

方式讓我感覺像一個白癡大聲笑 –

哈哈：D Nevermind ...我想這發生在我們所有人在某個時刻;） – SirDerpington

JQuery用戶界面選項卡動態添加標籤

回答

相關問題