如何動態添加和刪除jquery選項卡？

我有一個aspx頁面，我有2個靜態jquery選項卡。點擊這些選項卡上的某個按鈕後，我想動態添加一個新選項卡，從另一個aspx頁面加載它的內容。我'以前也試過用以下示例如何動態添加和刪除jquery選項卡？

http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/manipulation.html

我已經下載的jQuery-UI-1.8rc3.custom zip文件，並試圖與相關的腳本中添加上述頁面，css文件到我的asp.net網站並運行，但它似乎並沒有工作。此外，我不想打開對話框，並要求用戶輸入標籤標題，如上面的示例。

請有人可以幫助我嗎？

謝謝。

來源

2010-03-10 kranthi

有人能修的聯繫？ – mavis 2014-09-15 13:21:54

您是否嘗試過使用標籤的add method？

var tabs = $("#tabs").tabs(); 
$('#tabs-1 button').click(function(){ 
    tabs.tabs('add','/url_for_tab/','New tab'); 
});

更新 -在jQuery UI 1.9的添加刪除方法已經過時，並在jQuery UI的1.10它們已被刪除。

的正確方法現在遠程（AJAX）內容標籤做到這一點：

var tabs = $("#tabs").tabs(); 
var ul = tabs.find("ul"); 
$("<li><a href='/url_for_tab/'>New Tab</a></li>").appendTo(ul); 
tabs.tabs("refresh");

而當你已經擁有的內容：

var tabs = $("#tabs").tabs(); 
var ul = tabs.find("ul"); 
$("<li><a href='#newtab'>New Tab</a></li>").appendTo(ul); 
$("<div id='newtab'><p>New Content</p></div>").appendTo(tabs); 
tabs.tabs("refresh");

來源

2010-03-12 03:25:22 PetersenDidIt

添加和刪除方法自jQuery 1.9開始已棄用，並在1.10中刪除。改爲使用刷新方法。 [jQuery升級指南]（http://jqueryui.com/upgrade-guide/1.9/#deprecated-add-and-remove-methods-and-events-use-refresh-method） – Narayana 2013-01-20 13:33:59

.appendTo（tabs）會導致「新內容「顯示在每個標籤上... – nicordesigns 2013-04-08 13:37:57

@nicordesigns我沒有看到任何問題：http：// jsbin。com/ucusud/1 /編輯 – PetersenDidIt 2013-04-10 13:47:02

我也動態地添加標籤。

mytabs.tabs('add', '/url_for_tab/', 'New tab title');

在增加新選項卡的工作。在我的情況下，它的動態jsp文件

來源

2010-03-25 15:14:14

var main = document.getElementById('main'); 
var tabber = createMainTab(); 
tabber.setAttribute("id","tabber") 
var mainHelper = createTabHelper(); 
var testH = createTabHelperElement("Test tab",tabber); 
var testTab = createTab(testH); 
tabber.appendChild(mainHelper); 

mainHelper.appendChild(testH); 
tabber.appendChild(testTab); 

main.appendChild(tabber); 
$(tabber).tabs(); 

function createMainTab(){ 
    var mainDiv = document.createElement("div"); 
    mainDiv.setAttribute("class","ui-tabs ui-widget ui-widget-content ui-corner-all"); 
    mainDiv.style.height="100%"; 
    mainDiv.onk_initialised = false; 
    return mainDiv; 
} 
function createTabHelper(){ 
    var mainUl = document.createElement("ul"); 
    mainUl.setAttribute("class","ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"); 
    return mainUl; 
} 
function createTabHelperElement(name,mainTab){ 
    var mainLi = document.createElement("li"); 
    var active = !mainTab.onk_initialised; 
    mainTab.onk_initialised=true; 
    if(active){ 
     mainLi.setAttribute("class","ui-state-default ui-corner-top ui-tabs-selected ui-state-active"); 
    }else{ 
     mainLi.setAttribute("class","ui-state-default ui-corner-top"); 
    } 
    mainLi.onk_createdActive = active; 
    mainLi.onk_id = "tab_"+cache; 
    var oLink = document.createElement("a"); 
    oLink.setAttribute("href","#tab_"+cache); 
    oLink.innerHTML = name; 
    mainLi.appendChild(oLink); 
    cache++; 
    return mainLi; 
} 
function createTab(tabHelper){ 
    var tabDiv = document.createElement("div"); 
    if(tabHelper.onk_createdActive){ 
     tabDiv.setAttribute("class","ui-tabs-panel ui-widget-content ui-corner-bottom"); 
    }else{ 
     tabDiv.setAttribute("class","ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"); 
    } 
    tabDiv.setAttribute("id",tabHelper.onk_id); 
    return tabDiv; 
}

來源

2010-03-25 15:24:10

您可能需要另外兩個jQuery UI小部件：對話框和位置。

我有同樣的問題：下載演示，並且manipulate.html不起作用。對我來說，它是在頁面加載拋出一個錯誤：

$("#dialog").dialog is not a function 
    close: function() {

和頁面有404： jquery.ui.position.js jquery.ui.dialog.js

因此，頁面具有意想不到的依賴性，並且未包含在我的自定義下載中。我回去，並得到了http://jqueryui.com/download

一旦演示的另一個自定義下載可以解決它的工作jquery.ui.dialog.js，因爲對話框的功能存在：

typeof $("#dialog").dialog 
"function"

來源

2011-05-04 23:23:44

如何動態添加和刪除jquery選項卡？

回答

相關問題