如何动态添加和删除jquery选项卡？ [英] how to add and remove jquery tabs dynamically?

问题描述

我有一个aspx页面，我有2个静态jquery选项卡。通过点击这些选项卡上的一个按钮，我想动态添加一个新的选项卡，它从其他aspx页面加载其内容。我也尝试过以下样本。

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

我已经下载了jquery-ui-1.8rc3.custom zip文件，并尝试将上述页面与相关脚本，css文件添加到我的asp.net网站并运行，但似乎不起作用。我也不想要打开一个对话框，并要求用户输入上述示例中的标签标题。

请问有人可以帮我吗？

谢谢。

解决方案

您是否尝试使用添加方法标签？

  var tabs = $（＃tabs）。 
 $（'＃tabs-1 button'）。click（function（）{
 tabs.tabs（'add'，'/ url_for_tab /'，'New tab'）; 
} ）; 
  

更新 - 截至jQuery UI 1.9，添加删除方法已被已经弃用，在jQuery UI 1.10中已被删除。

现在，为远程（ajax）内容选项卡执行此操作的正确方法是：

 code> var tabs = $（#tabs）.tabs（）; 
 var ul = tabs.find（ul）; 
 $（< li>< a href ='/ url_for_tab /'>新标签< / a>< / li>）.appendTo（ul）; 
 tabs.tabs（refresh）; 
  

当您已经拥有内容时：

  var tabs = $（#tabs）.tabs（）; 
 var ul = tabs.find（ul）; 
 $（< li>< a href ='＃newtab'>新标签< / a>< / li>）.appendTo（ul）; 
 $（< div id ='newtab'>< p>新内容< / p>< / div>）.appendTo（tabs）; 
 tabs.tabs（refresh）; 
  

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

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.

Please could someone help me with this?

Thanks.

解决方案

Have you tried using the add method of 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.

The correct way to do this for remote (ajax) content tabs now is:

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" );

这篇关于如何动态添加和删除jquery选项卡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！