Jquery工具：保持选定的选项卡刷新或保存数据 [英] Jquery Tool: Keep selected tab on refresh or save data
问题描述
我对标签Ui使用 jquery工具，
现在，我想在页面重新加载时保持选项卡。有什么办法吗？以下是我的代码
$（function（）{
//设置ul.tabs div直接在div.panes下
$（ul.tabs）。tabs（div.panes> div）;
}）;
这里是一个简单的实现， it：
function getCookie（c_name）{
var i，x，y，ARRcookies = document.cookie.split （;）;
for（i = 0; i
y = ARRcookies [i] .substr（ARRcookies [i] .indexOf（=）+ 1）;
x = x.replace（/ ^ \s + | \s + $ / g，）;
if（x == c_name）{
return unescape（y）;
}
}
}
函数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（）{
//在页面加载时检索cookie值
var $ tabs = ul
$（ul.tabs）。bind（'tabsselect'，function（event，ui）{
setCookie（selectedtab，ui.index + 1，365）;
}）;
}）;
当然，你可能想测试cookie是否设置并返回0 getCookie 不会返回undefined。
ul.tabs 可以通过指定选项卡按id改进。如果您确实在网页上有一个标签集合，您将需要一个更好的方式来存储cookie的名称 - 更具体的标签集已被选择/保存。
UPDATE
好的，我修复了ui.index的用法，现在以标签索引的+1增量保存。 / p>
这是一个工作示例： http://jsbin.com/esukop/7/edit#preview
UPDATE 用于jQuery工具
根据 jQuery Tools API ，它应该工作如下：
$（function（）{
// instantiate tabs object
$（ul.tabs）。tabs（div.panes> div）;
//获取api的句柄（必须在调用之前构造）
var api = $（ul.tabs）。data（tabs）;
//点击标签页时设置cookie
api.onClick（function ）{
setCookie（selectedtab，index + 1，365）;
}）;
//在页面加载时检索cookie值
var selectedTab = getCookie（selectedtab）;
if（selectedTab！=undefined）{
api.click（parseInt（selectedTab））; //必须将字符串解析为int以便api工作
}
}）;
function getCookie（c_name）{
var i，x，y，ARRcookies = document.cookie.split（;）;
for（i = 0; i
y = ARRcookies [i] .substr（ARRcookies [i] .indexOf（=）+ 1）;
x = x.replace（/ ^ \s + | \s + $ / g，）;
if（x == c_name）{
return unescape（y）;
}
}
}
函数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
这是我在Firefox中检查cookie从jsbin.com示例时看到的：
I am using jquery tool for tab Ui,
Now I want to keep tab selected on page reload. Is there any way to do that? below is my code
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div");
});
Here is a simple implementation of storing the cookie and retrieving it:
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;
}
Then, to save/retrieve cookie data with jQuery UI Tabs:
$(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);
});
});
Of course, you'll probably want to test if the cookie is set and return 0 or something so that getCookie doesn't return undefined.
On a side note, your selector of ul.tabs may be improved by specifying the tabs by id instead. If you truly have a collection of tabs on the page, you will need a better way of storing the cookie by name - something more specific for which tab collection has been selected/saved.
UPDATE
Ok, I fixed the ui.index usage, it now saves with a +1 increment to the tab index.
Here is a working example of this in action: http://jsbin.com/esukop/7/edit#preview
UPDATE for use with jQuery Tools
According the jQuery Tools API, it should work like this:
$(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;
}
Here is a working (unstyled) example: http://jsbin.com/ixamig/12/edit#preview
Here is what I see in Firefox when inspecting the cookie from the jsbin.com example:
这篇关于Jquery工具：保持选定的选项卡刷新或保存数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
