如何动态添加和删除 jquery 选项卡？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2416547/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to add and remove jquery tabs dynamically?
提问by kranthi
I have an aspx page on which I have 2 static jquery tabs.Upon clicking on a button avaiable on one of these tabs,I would like to add a new tab dynamically,which gets its content loaded from another aspx page.I've also tried with the following sample
我有一个 aspx 页面，其中有 2 个静态 jquery 选项卡。单击这些选项卡之一上可用的按钮后，我想动态添加一个新选项卡，该选项卡从另一个 aspx 页面加载其内容。我也尝试使用以下示例
http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/manipulation.html
http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/manipulation.html
I've downloaded jquery-ui-1.8rc3.custom zip file and tried to add the above page with the relevant script,css files to my asp.net website and run,but it does not seem to work.Also I do not want to have a dialog opening and asking the user to enter the tab title as in the above sample.
我已经下载了 jquery-ui-1.8rc3.custom zip 文件并尝试将带有相关脚本、css 文件的上述页面添加到我的 asp.net 网站并运行，但它似乎不起作用。我也不想要打开一个对话框并要求用户输入上面示例中的选项卡标题。
Please could someone help me with this?
请有人帮我解决这个问题吗？
Thanks.
谢谢。
回答by PetersenDidIt
Have you tried using the add methodof the tabs?
您是否尝试过使用选项卡的添加方法？
var tabs = $("#tabs").tabs();
$('#tabs-1 button').click(function(){
tabs.tabs('add','/url_for_tab/','New tab');
});
Update --As of jQuery UI 1.9 the add remove methods have been deprecated and in jQuery UI 1.10 they have been removed.
更新——从 jQuery UI 1.9 开始， add remove 方法已被弃用，而在 jQuery UI 1.10 中，它们已被删除。
The correct way to do this for remote (ajax) content tabs now is:
现在为远程（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" );
And for when you already have the content:
当您已经拥有内容时：
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" );
回答by kranthi
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;
}
回答by Monte Hayward
You may need to get two other jQuery UI Widgets: Dialog and Position.
您可能需要获得另外两个 jQuery UI 小部件：Dialog 和 Position。
I had the same issue: downloaded the demo, and manipulate.html did not work. In my case, it was throwing an error on page load:
我遇到了同样的问题：下载了演示，manage.html 不起作用。就我而言，它在页面加载时引发错误：
$("#dialog").dialog is not a function
close: function() {
And the page had 404s: jquery.ui.position.js jquery.ui.dialog.js
该页面有 404： jquery.ui.position.js jquery.ui.dialog.js
So, the page had dependencies that were unexpected, and not included in my custom download. I went back and got another custom download from http://jqueryui.com/download
因此，该页面具有意外的依赖项，并且未包含在我的自定义下载中。我回去从http://jqueryui.com/download获得了另一个自定义下载
Once the demo could resolve jquery.ui.dialog.js it worked, because the dialog function existed:
一旦演示可以解析 jquery.ui.dialog.js 它就可以工作了，因为对话框函数存在：
typeof $("#dialog").dialog
"function"
回答by Monte Hayward
i am also adding tabs dynamically.
我也在动态添加标签。
mytabs.tabs('add', '/url_for_tab/', 'New tab title');
works in getting that new tab added. in my case its a dynamic jsp file
用于添加新标签。在我的情况下它是一个动态的jsp文件
