JQuery UI框架DWZ在实际项目中的应用(一)

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

解决原理:所有tab页面都使用内嵌iframe方式,将tab标签的唯一标识(对应菜单的标识)存入cookie,刷新页面时读取cookie加载tab页面,代码如下:
dwz.navTab.jsopenTab事件中加入以下代码
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.jsinitEnv事件最后加入以下代码
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页面
}

dwz.navTab中加入_loadMenu事件,该事件用来遍历_tabidArr,触发对应菜单的click事件即可

原文地址:https://www.cnblogs.com/wxt2005/p/3021814.html