jquery 탭을 동적으로 추가 및 제거하는 방법은 무엇입니까?

Question

나는 aspx 페이지에 2 개의 정적 jquery 탭이 있습니다.이 탭 중 하나에서 사용할 수있는 버튼을 클릭하면 다른 탭에서 동적으로 새 탭을 추가하고 싶습니다. 다른 aspx 페이지에서로드 된 내용을 가져옵니다. 또한 내 asp.net 웹 사이트에 다음 나는 JQuery와 - UI를-1.8rc3.custom zip 파일을 다운로드하고 관련 스크립트 위의 페이지를 추가하려고했습니다

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

샘플, CSS 파일을 시도했습니다 실행하지만 작동하지 않는 것 같습니다. 또한 위의 샘플 에서처럼 탭을 입력하라는 대화 상자를 열고 사용자에게 묻는 것을 원하지 않습니다.

제발 내가 도와 줄 수 있습니까?

감사합니다.

Answer 1

탭의 add method을 사용해 보셨습니까?

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

업데이트 - UI 1.10 jQuery를 UI 1.9 제거 방법이 사용되지 않습니다 추가의로 및 jQuery를에 그들은 제거되었습니다.

이제 원격 (아약스) 콘텐츠 탭에 대해이 작업을 수행하는 올바른 방법은 다음과 같습니다

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

그리고 당신은 이미 내용이있는 경우에

.

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

새 탭을 추가 할 때 작동합니다. 내 경우 동적 JSP 파일

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

다른 두 개의 jQuery UI 위젯 (대화 상자 및 위치)이 필요할 수 있습니다.

동일한 문제가 있습니다. 데모를 다운로드하고 manipulate.html이 작동하지 않았습니다.

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

을 그리고 페이지가 404했다 : 내 경우에는, 그것은 페이지로드 오류를 던지고 jquery.ui.position.js jquery.ui.dialog.js 그래서

를, 페이지 예상치 못한 종속성이 있으며 내 사용자 지정 다운로드에 포함되지 않았습니다. 대화 기능이 존재하기 때문에 내가 다시 가서이 일을 jquery.ui.dialog.js를 해결할 수있는 데모 일단 http://jqueryui.com/download

에서 다른 사용자의 다운로드를 가지고 :

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