Question

我为这是一个开放式问题而道歉，但我不知所措。

从jquery UI的1.9版开始，他们使用cookie选项折旧，以便在多个页面中保存选项卡的活动状态。 http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option

我还没有看到关于如何实现这一目标的任何其他文档！所以我不得不挠头。

我最好的猜测是使用某种event创建一个cookie，然后加载cookie？或者是否有其他方法可以在多个页面中按用户偏好保存选项卡的活动状态？

Answer 1

今天同样的问题让我感到困惑。这似乎有用：

使用jquery.cookie插件（https://github.com/carhartl/jquery-cookie）（此步骤不是必需的，但它可以更轻松地处理cookie）

使用以下代码片段：

$( ".selector" ).tabs({
    active   : $.cookie('activetab'),
    activate : function( event, ui ){
        $.cookie( 'activetab', ui.newTab.index(),{
            expires : 10
        });
    }
});

这将设置一个名为“activetab”的cookie，该cookie在10天后过期（有关更多选项，请参阅jquery.cookie documentation），以便在单击任何选项卡时记住当前选定的选项卡。在初始化时读取此cookie以显示上次保存的选项卡。第一次访问该页面时，选项卡将被折叠。

Answer 2

使用localStorage执行此操作的简短，与布局无关的方式：

$("#tabs").tabs({
  active: localStorage.getItem("currentIdx"),
  activate: function(event, ui) {
      localStorage.setItem("currentIdx", $(this).tabs('option', 'active'));
  }
});

使用自定义数据属性进行特定于布局的方式（如果要在脚本的其他位置以某种方式使用属性值，则可能很有用）。

jQuery UI：

$("#tabs").tabs({
    active: localStorage.getItem("currentTabIndex"),
    activate: function(event, ui) {
        localStorage.setItem("currentTabIndex", ui.newPanel[0].dataset["tabIndex"]);
    }
});

示例HTML布局：

<div id="tabs">
    <div id="tabs-1" data-tab-index="0">
       tab 1 stuff...
    </div>
    <div id="tabs-2" data-tab-index="1">
       tab 2 stuff...
    </div>    
    <div id="tabs-3" data-tab-index="2">
       tab 3 stuff...
    </div>
</div>

Answer 3

使用HTML5的localStorage功能为问题提供了解决方案，现在就是做这类事情的推荐方法。 Cookie会导致额外的数据被添加每个网络请求和响应。

你会发现localStorage是supported by browsers和IE8一样古老，如果你真的想要支持IE6和IE7，那就有shim to do that。

<强> HTML

<div class="mytab" id="mytab_1">
 <ul>....</ul>
 <div id="xx1">...</div>
 ...
</div>

<强> JS

currTabIndex=sessionStorage['mytab_1'];

和tabfuntion调用

$('.mytab').tabs({
 active:currTabIndex,
 load:function(event,ui){
  sessionStorage[''+this.id]=(ui.panel.index()-1);
 }
});

希望这会有所帮助。

Answer 4

事件选项卡激活然后存储到sessionStorage或localStorage。

$(function() {
    var selectedTabId = sessionStorage.getItem("selectedTab");
    selectedTabId = selectedTabId === null ? 0 : selectedTabId; //your default being 0
    $("#tabs").tabs({
        active: selectedTabId,
        activate : function( event, ui ) {
            selectedTabId = $("#tabs").tabs("option", "active");
            sessionStorage.setItem("selectedTab", selectedTabId);
        }
    });
});

Answer 5

简单地说：

activate: function(event, ui) {        
    localStorage.setItem("accIndex", $(this).tabs("option", "active"))
},
active: parseInt(localStorage.getItem("accIndex"))

Answer 6

您可以使用活动选项设置活动标签，例如

$( ".selector" ).tabs({ active: 1 });

有很多方法可以将值传递给除Cookie之外的网页。例如，您可以使用查询参数和隐藏字段。然后，您将创建一个onload脚本，该脚本将使用jQuery的onload示例读取任一示例。 $（function（）{}）。

要阅读查询字符串，请查看此页面，其中提供了方法

Jquery read query string

function getParameterByName( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

并阅读隐藏的字段。

$( ".selector" ).tabs({ active: $('#my-hidden-fiel').val() });

我同意jquery ui决定删除此功能，因为Cookie应该仅用于在我看来保留会话，而不是用于表示字段或标签。

jquery ui tabs不再支持cookie？怎么办？

6 个答案: