jQuery UI的选项卡不再支持饼干吗？怎么办？(jquery ui tabs no lon

我这是一个开放式的问题道歉，但我很茫然。

由于jQuery UI的1.9版本，他们折旧使用cookie选项，以节省跨越多个页面的选项卡的激活状态。 http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option

我还没有看到任何其他文件在那里如何，现在做到这一点！所以我离开了抓我的头。

我最好的猜测是使用某种类型的event来创建一个cookie，然后加载饼干吗？或者是有一些其他的方式来保存在多个页面和用户偏好选项卡的激活状态？

Answer 1:

有同样的问题今天咬我。这里是什么似乎工作：

使用jquery.cookie插件（ https://github.com/carhartl/jquery-cookie ）（这一步是没有必要的，但它使生活更轻松处理饼干）

使用下面的代码片段：

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

这台名为“activetab”这期满后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用户界面：

$("#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的使用本地存储功能使该问题的解决方案，现在做这类事情的推荐方式。饼干会导致额外的数据添加到每个Web请求和响应。

你会发现localStorage的是通过浏览器支持的古老的IE8，如果你真的想为IE6和IE7的支持，还有一个垫片来做到这一点。

HTML

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

currTabIndex=sessionStorage['mytab_1'];

而tabfuntion通话

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

希望这将是有益的。

Answer 4:

事件tabsactivate然后存储的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 });

有很多种方法传递值比其它饼干的网页。您可以使用查询参数和例如隐藏字段。然后，您可以创建一个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的决定删除此功能饼干真的应该只被用来坚持我的意见会议，并没有形成如字段或标签。

文章来源: jquery ui tabs no longer supporting cookie? now what?