cookies - jQuery工具: Keep selected tab on refresh or save data

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 Tabs保存/检索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不会返回未定义。

附带一提，您可以通过用id指定选项卡来改进 ul.tabs的选择器。如果您在页面上确实有一个选项卡集合，则需要一种更好的方式来按名称存储cookie-一种更具体的选择/保存选项卡集合的方法。

更新

好的，我修复了ui.index的用法，现在它以+1的增量保存到选项卡索引中。

这是一个实际的工作示例: http://jsbin.com/esukop/7/edit#preview

用于jQuery工具的UPDATE 更新

根据 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中看到的内容: