JQUERY UI - TABS＆COOKIES - 如何使cookie保留新添加的標籤

Question

我有一個帶有手風琴和選項卡的JSP。

在手風琴上選擇的選項，啓動創建並啓動一個新選項卡 - 它也將IFRAME加載到選項卡中。這工作正常。我有一個始終顯示的靜態選項卡。我有jquery cookie js腳本。我在jQuery UI網站上看到，Cookie代碼適用於靜態選項卡。但我需要這個爲我爲新創建的標籤工作。

當我選擇創建並啓動新選項卡時，如果我刷新頁面，它將被刪除。我希望這個被保留，除非使用關閉那個標籤。

請幫忙！ :)

這是我的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); 
     } 
    }); 
}); 

Answer 1

我解決了這個問題。

我執行以下操作來完成此操作。我在上面的代碼中設置了錯誤的地方。

我也添加了我需要的其他功能。

它需要的是：

// Tabs 
    $('#tabs').tabs({ 
     cookie: { 
      // store cookie for a day, without, it would be a session cookie 
      expires: 1 
     }, 
     collapsible: true 
    }).find(".ui-tabs-nav").sortable({ axis: "x" });