Question

我正在使用jquery tool标签Ui，

现在我想在页面重新加载时选择标签。有没有办法做到这一点？下面是我的代码

$(function() {
    // setup ul.tabs to work as tabs for each div directly under div.panes
    $("ul.tabs").tabs("div.panes > div");
});

Answer 1

以下是存储cookie并检索它的简单实现：

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

然后，使用jQuery UI选项卡保存/检索cookie数据：

$(function() {
   // retrieve cookie value on page load
   var $tabs = $('ul.tabs').tabs();
   $tabs.tabs('select', getCookie("selectedtab"));

   // set cookie on tab select
   $("ul.tabs").bind('tabsselect', function (event, ui) {
      setCookie("selectedtab", ui.index + 1, 365);
   });
});

当然，您可能想要测试cookie是否已设置并返回0或其他内容，以便getCookie不返回undefined。

在旁注中，您可以通过ID指定标签来改进ul.tabs的选择器。如果页面上确实有一组选项卡，则需要更好的方式按名称存储cookie - 更具体的选择/保存选项卡集合。

更新

好的，我修正了ui.index的用法，它现在以tab增量的+1增量保存。

以下是一个实际操作示例：http://jsbin.com/esukop/7/edit#preview

用于jQuery工具的

更新

根据jQuery Tools API，它应该是这样的：

$(function() {
   //instantiate tabs object 
   $("ul.tabs").tabs("div.panes > div");

   // get handle to the api (must have been constructed before this call)
   var api = $("ul.tabs").data("tabs");

   // set cookie when tabs are clicked
   api.onClick(function(e, index) {
          setCookie("selectedtab", index + 1, 365);
   });     
   // retrieve cookie value on page load
   var selectedTab = getCookie("selectedtab");

   if (selectedTab != "undefined") {
    api.click( parseInt(selectedTab) ); // must parse string to int for api to work
   }

});

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

这是一个有效的（无格式）示例：http://jsbin.com/ixamig/12/edit#preview

以下是我在从jsbin.com示例检查cookie时在Firefox中看到的内容：

enter image description here

Answer 2

这对我有用......至少我还没有遇到任何问题：

$('#tabs').tabs({
            select: function (event, ui)
            {
                $.cookie('active_tab', ui.index, { path: '/' });
            }
        });
$('#tabs').tabs("option", "active", $.cookie('active_tab'));

我正在使用：jQuery 1.8.2，jQuery UI 1.9.1，jQuery Cookie Plugin。

我设置了“路径”，因为在C＃中我将此值设置在默认为“/”的mvc控制器中。如果路径不匹配，则不会覆盖现有cookie。这是我的C＃代码，用于设置上面使用的相同cookie的值：

Response.Cookies["active_tab"].Value = "myTabIndex";

编辑：从jQuery UI 1.10.2（我刚试过这个版本，不确定它是否在以前的版本中被破坏），我的方法不起作用。这个新代码将使用jQuery UI 1.10.2

设置cookie

 $('#tabs').tabs({
     activate: function (event, ui) {
         $.cookie('active_tab', ui.newTab.index(), { path: '/' });
     }
 });

Answer 3

在页面刷新之间生存的最简单方法是在会话中或通过任何服务器端脚本存储选定的选项卡ID。

只有在客户端存储数据的方法有：Cookies或localStorage。

参考主题：Store Javascript variable client side

Jquery工具：在刷新或保存数据时保持选定的选项卡

3 个答案: