Question

我有一个aspx页面，我有2个静态jquery选项卡。单击其中一个选项卡上的按钮，我想动态添加一个新选项卡，从其他aspx页面加载其内容.I我们也试过以下样本

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

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

请有人帮我这个吗？

感谢。

Answer 1

您是否尝试过使用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" );

Answer 2

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;
}

Answer 3

我也在动态添加标签。

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

可以添加新标签。在我的例子中它是一个动态的jsp文件

Answer 4

您可能需要获得另外两个jQuery UI Widgets：Dialog和Position。

我遇到了同样的问题：下载了演示版，而且manipulate.html没有用。就我而言，它在页面加载时抛出错误：

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

页面有404s： jquery.ui.position.js jquery.ui.dialog.js

因此，该页面具有意外的依赖关系，并且未包含在我的自定义下载中。我回去了http://jqueryui.com/download

的另一个自定义下载

一旦演示可以解析jquery.ui.dialog.js就可以了，因为对话框功能已存在：

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

如何动态添加和删除jquery选项卡？

4 个答案: