cómo agregar y eliminar las pestañas jquery dinámicamente?

Question

Tengo una página aspx en la que tengo 2 pestañas jquery estáticas. Al hacer clic en un botón disponible en una de estas pestañas, me gustaría agregar una nueva pestaña dinámicamente, que obtiene su contenido cargado desde otra página aspx. también he intentado con la siguiente muestra de

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

he descargado el archivo zip jquery-ui-1.8rc3.custom y trató de añadir la página anterior con el guión correspondiente, archivos CSS a mi sitio web asp.net y ejecutar, pero parece que no funciona. Tampoco quiero tener una ventana de diálogo y pedirle al usuario que ingrese el título de la pestaña como se muestra en la muestra anterior.

¿Alguien podría ayudarme con esto?

Gracias.

Answer 1

¿Ha intentado utilizar el add method de las pestañas?

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

Actualización - A partir de jQuery UI 1.9 el complemento quitar métodos han quedado obsoletos y en jQuery UI 1.10 que se han eliminado.

La forma correcta de hacer esto por pestañas (Ajax) contenido remoto ahora es:

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

Y para cuando ya tiene el contenido:

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

También estoy añadiendo pestañas de forma dinámica.

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

funciona para obtener esa nueva pestaña agregada. en mi caso es un archivo JSP dinámico

Answer 3

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 4

Es posible que necesite obtener dos otros jQuery UI Widgets: diálogo y posición.

Tuve el mismo problema: descargué la demostración y manipulate.html no funcionó. En mi caso, estaba lanzando un error al cargar la página:

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

Y la página tenía 404: jquery.ui.position.js jquery.ui.dialog.js

Por lo tanto, la página tenía dependencias inesperadas y no incluidas en mi descarga personalizada. volví y nos dieron otra descarga personalizada desde http://jqueryui.com/download

Una vez que la demostración podría resolver jquery.ui.dialog.js funcionó, porque la función de diálogo existía:

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