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

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

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

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

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

今天有同样的问题让我感到困惑。 这似乎是有效的:

  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以显示上次保存的选项卡。 第一次访问页面时,选项卡将折叠。

使用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布局:

 
tab 1 stuff...
tab 2 stuff...
tab 3 stuff...

使用HTML5的localStoragefunction为问题提供了解决方案,现在是推荐的做这种事情的方法。 Cookie会将额外数据添加到每个Web请求和响应中。

您会发现浏览器支持 localStorage与IE8一样古老,如果您真的想要支持IE6和IE7,那么可以使用它 。

HTML

 
    ....
...
...

JS

 currTabIndex=sessionStorage['mytab_1']; 

和tabfuntion电话

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

希望这会有所帮助。

事件选项卡激活,然后存储到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); } }); }); 

只是:

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

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

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

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

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

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决定删除此function,因为Cookie应该仅用于在我看来坚持会话而不是表单字段或标签。