Как динамически добавлять и удалять вкладки jquery? - PullRequest
Новая
       37

Как динамически добавлять и удалять вкладки jquery?

13 голосов
/ 10 марта 2010

У меня есть страница aspx, на которой у меня есть 2 статические вкладки jquery. После нажатия кнопки, доступной на одной из этих вкладок, я хотел бы динамически добавить новую вкладку, которая загружает содержимое с другой страницы aspx. также пробовал со следующим образцом

http://jquery -ui.googlecode.com / SVN / багажник / демки / закладки / manipulation.html

Я скачал jquery-ui-1.8rc3.custom zip-файл и попытался добавить вышеуказанную страницу с соответствующим скриптом, css-файлы на мой сайт asp.net и запустить, но, похоже, он не работает. не хочу, чтобы открывалось диалоговое окно с просьбой ввести заголовок вкладки, как в примере выше.

Пожалуйста, кто-нибудь может мне помочь с этим?

Спасибо.

Ответы [ 4 ]

36 голосов
/ 12 марта 2010

Вы пробовали использовать метод добавления вкладок? 

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

Обновление - Начиная с jQuery UI 1.9 методы удаления add устарели, а в 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" );
1 голос
/ 25 марта 2010 
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;
}
0 голосов
/ 05 мая 2011

Вам может потребоваться получить два других виджета пользовательского интерфейса jQuery: диалог и положение.

У меня возникла та же проблема: скачал демо, и файл манипулировать.html не работал. В моем случае это выдает ошибку при загрузке страницы: 

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

А на странице было 404: jquery.ui.position.js jquery.ui.dialog.js

Итак, на странице были неожиданные зависимости, которые не были включены в мою пользовательскую загрузку. Я вернулся и получил еще одну пользовательскую загрузку с http://jqueryui.com/download

Как только демоверсия могла разрешить jquery.ui.dialog.js, она работала, потому что существовала диалоговая функция: 

typeof $("#dialog").dialog
"function"
0 голосов
/ 25 марта 2010

Я также добавляю вкладки динамически. 

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

работает над добавлением этой новой вкладки. в моем случае это динамический файл JSP

...