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

Question

我正在使用标签Ui的jquery工具,

现在我想在页面重新加载时保持选项卡.有没有办法做到这一点？下面是我的代码

$(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的内容.

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

UPDATE

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

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

更新以与jQuery Tools一起使用

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