come aggiungere e rimuovere le schede jquery in modo dinamico?

Question

Ho una pagina aspx su cui ho 2 schede jquery statiche. Facendo clic su un pulsante disponibile in una di queste schede, vorrei aggiungere una nuova scheda dinamicamente, che ottiene il suo contenuto caricato da un'altra pagina di aspx.I ' ve anche provato con il seguente esempio

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

ho scaricato il file zip jquery-ui-1.8rc3.custom e ho cercato di aggiungere la pagina di cui sopra con lo script in questione, i file CSS al mio sito web asp.net e funziona, ma non sembra funzionare. Inoltre, non voglio aprire una finestra di dialogo e chiedere all'utente di inserire il titolo della scheda come nell'esempio precedente.

Per favore qualcuno potrebbe aiutarmi con questo?

Grazie.

Answer 1

Hai provato a utilizzare lo add method delle schede?

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

Update - Come di jQuery UI 1.9 del componente aggiuntivo rimuovere metodi sono stati deprecati e in jQuery UI 1.10 sono stati rimossi.

Il modo corretto di fare questo per schede di contenuto (Ajax) a distanza ora è:

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

E per quando hai già il contenuto:

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

sto anche l'aggiunta di schede in modo dinamico.

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

funziona per ottenere quella nuova scheda aggiunta. nel mio caso è un file jsp dinamico

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

Potrebbe essere necessario ottenere altri due widget UI jQuery: Finestra di dialogo e Posizione.

Ho avuto lo stesso problema: ho scaricato la demo e manipulate.html non ha funzionato. Nel mio caso, si stava gettando un errore al caricamento della pagina:

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

E la pagina ha avuto 404: jquery.ui.position.js jquery.ui.dialog.js

Quindi, la pagina aveva dipendenze che erano inaspettate e non incluse nel mio download personalizzato. sono tornato e ho trovato un altro download personalizzato da http://jqueryui.com/download

Una volta che la demo potrebbe risolvere jquery.ui.dialog.js ha funzionato, perché la funzione di dialogo esisteva:

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