JQUERY UI - TABS & COOKIES - 如何让 cookie 保留新添加的选项卡答案

【问题标题】：JQUERY UI - TABS & COOKIES - How to make a cookie retain the newly added tabJQUERY UI - TABS & COOKIES - 如何让 cookie 保留新添加的选项卡
【发布时间】：2012-07-27 11:26:34
【问题描述】：

我有一个带有手风琴和标签的 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 );
        }
    });
});

【问题讨论】：

标签： jquery ajax cookies jquery-ui-tabs jquery-tabs

【解决方案1】：

我解决了这个问题。

我执行了以下操作来做到这一点。我在上面的代码中将 cookie 设置在错误的位置。

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

必须是：

    // 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" });

【讨论】：