0
아코디언과 탭이있는 JSP가 있습니다.JQUERY UI - TABS & COOKIES - 쿠키가 새로 추가 된 탭을 유지하는 방법
아코디언에서 선택한 옵션을 실행하면 새 탭이 만들어지고 실행됩니다.이 탭은 IFRAME도 탭에로드합니다. 이것은 잘 작동합니다. 정적 탭이 항상 표시됩니다. jquery 쿠키 js 스크립트가 있습니다. jquery UI 웹 사이트에서 본 쿠키 코드는 정적 탭에서 작동합니다. 그러나 나를 위해 새로 생성 된 탭에서이 작업이 필요합니다.
내 옵션으로 새 탭을 만들고 실행하면 페이지를 새로 고침하면 제거됩니다. 그 탭을 닫지 않는 한 이것을 유지하고 싶습니다.
도와주세요! :)
여기 내 JS 코드가 전부입니다.
$(function() {
// Tabs
$('#tabs').tabs();
$("#accordion")
.accordion({
collapsible: true,
header: "> div > h3"
})
.sortable({
axis: "y",
handle: "h3",
stop: function(event, ui) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children("h3").triggerHandler("focusout");
}
});
// actual addTab function: adds new tab using the title input from the form above
function addTab(href, page, id, p_id, ul_value) {
var tab_title = "title: <b>" + ul_value + "</b> | " + p_id;
var tab_title = tab_title || "Tab " + tab_counter;
$tabs.tabs("add", "#tabs-" + tab_counter, tab_title);
tab_counter++;
$('#'+id).html(page);
}
// Add a new iframe tab
$('a.treeLink').click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
var page = '<iframe src="'+href+'" width="100%" height="100%"></iframe>';
var id = $(this).closest("div").attr("id");
var ui_id = $(this).closest("ul").attr("id");
var li_id = $(this).closest("li").attr("id");
var ul_value = $(this).closest("ul").attr("value");
addTab(href, page, ui_id, li_id, ul_value);
});
var $tab_title_input = $("#tab_title"),
$tab_content_input = $("#tab_content");
tab_counter = 2;
href = "http://localhost:8080/processRequest";
// tabs init with a custom tab template and an "add" callback filling in the content
var $tabs = $("#tabs").tabs({
cookie: {
// store cookie for a day, without, it would be a session cookie
expires: 1
},
tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
add: function(event, ui) {
var tab_content = "Content" || "Tab " + tab_counter + " content.";
href = href;
$tabs.tabs('select', '#' + ui.panel.id);
$(ui.panel).append('<iframe frameborder="0" style="border:0px" src="'+href+'" width="100%" height="100%"></iframe>');
}
});
// close icon: removing the tab on click
// note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
$("#tabs span.ui-icon-close").live("click", function() {
var index = $("li", $tabs).index($(this).parent());
if(index != 0){
$tabs.tabs("remove", index);
}
});
});