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

Question

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

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

我还没有看到任何关于如何实现这一目标的其他文档!所以我一直在挠头.

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

Answer 1

今天有同样的问题咬我.这似乎有用:

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

2. 使用以下代码片段:

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

这将设置一个名为"activetab"的cookie,该cookie在10天后过期(有关更多选项,请参阅jquery.cookie文档),以便在单击任何选项卡时记住当前选定的选项卡.在初始化时读取此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

事件选项卡激活，然后存储到 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 4

使用 HTML5 的 localStorage 特性提供了解决问题的方法，并且现在是执行此类事情的推荐方法。Cookie 会导致将额外数据添加到每个 Web 请求和响应中。

你会发现像 IE8 这样过时的浏览器都支持localStorage ，如果你真的想要支持 IE6 和 IE7，那么有一个shim 可以做到这一点。

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 5

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

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

除了 cookie 之外，还有许多方法可以将值传递到网页。例如，您可以使用查询参数和隐藏字段。然后，您将创建一个 onload 脚本，该脚本将使用 jQuery 的 onload 示例读取任一示例。$(函数(){})。

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

Jquery读取查询字符串

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 实际上应该只用于持久会话，而不是形成字段或选项卡。