JQuery UI框架DWZ在实际项目中的应用（一）

最新推荐文章于 2017-10-08 17:48:58 发布

放错位的天才

最新推荐文章于 2017-10-08 17:48:58 发布

阅读量156

点赞数

CC 4.0 BY-SA版权

文章标签： ui javascript ViewUI

原文链接：http://www.cnblogs.com/wxt2005/archive/2013/04/15/3021814.html

本文介绍了一种通过内嵌iframe和使用cookie来保存tab页面唯一标识的方法，确保在页面刷新后能恢复已打开的tab标签。具体实现包括在openTab、_closeTab和closeAllTab事件中加入特定代码，以及在initEnv事件中初始化tab页面加载流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决问题一：页面刷新，当我们打开多个tab标签时刷新页面，这些打开的tab标签都没了

解决原理：所有tab页面都使用内嵌iframe方式，将tab标签的唯一标识(对应菜单的标识)存入cookie，刷新页面时读取cookie加载tab页面，代码如下：
在dwz.navTab.js的openTab事件中加入以下代码
var navtabcookies = $.cookies.get('navtabcookies');
if (navtabcookies != undefined && navtabcookies != null) {
    var isAdd = true; //是否需要新增
    $(navtabcookies).each(function (index, data) {
        if (data.tabid == tabid) {
            data.url = url;
            isAdd = false;
            return;
        }
    });
    if (isAdd)
        navtabcookies.push({ tabid: tabid, url: url });
} else {
    navtabcookies = [{ tabid: tabid, url: url}];
}
$.cookies.set('navtabcookies', navtabcookies);

_closeTab事件中加入以下代码
var navtabcookies = $.cookies.get('navtabcookies');
if (navtabcookies != undefined && navtabcookies != null) {
    $(navtabcookies).each(function (idx, data) {
        if (data.tabid == $('.navTab-tab').find('li:eq(' + index + ')').attr('tabid')) { //删除cookie值中当前页面的tabid
            navtabcookies.splice(idx, 1);
            return;
        }
    });
    $.cookies.set('navtabcookies', navtabcookies);
}

closeAllTab事件中加入以下代码
this._getTabs().filter(":gt(0)").each(function () {
    var navtabcookies = $.cookies.get('navtabcookies');
    var tempTabId = $(this).find('a:eq(0)').attr('class');
    if (navtabcookies != undefined && navtabcookies != null) {
        $(navtabcookies).each(function (idx, data) {
            if (data.tabid == tempTabId) {
                navtabcookies.splice(idx, 1);
                return;
            }
        });
        $.cookies.set('navtabcookies', navtabcookies);
    }
    $(this).remove();
});

在dwz.ui.js的initEnv事件最后加入以下代码
var navtabcookies = $.cookies.get('navtabcookies');
if (navtabcookies != undefined && navtabcookies != null && $(navtabcookies).length > 0) {
    $(navtabcookies).each(function (idx, data) {
        if (data.tabid == undefined) { //不存在tabid删除cookie中的值
            navtabcookies.splice(idx, 1);
            $.cookies.set('navtabcookies', navtabcookies);
        }
        else {
            navTab._tabidArr.push(data.tabid);
        }
    });
    navTab._loadMenu(); //载入tab页面
}