EasyUI兼容IE方法解析.doc
文本预览下载声明
EasyUI 兼容 IE6 的方法总结
背景
项目介绍
XX服务平台从 7 月低开始框架搭建，前端UI框架确定使用目前功能比较完善的Jquery EasyUI（没有考虑到客户方目前使用的浏览器大部分都是IE6，项目设计初期的不严谨）。11 初基本功能开发完成，期间一直致力于功能的实现和数据的一致性的核查，并没有太多关注浏览器的兼容性和性能问题。经过在客户现场几次演示的结果，暴露出严重的性能问题和兼容性问题，在IE6 下，系统基本不能运行。于是开始着手调整这些问题。
框架介绍
优点：JQuery EasyUI 是目前功能比较齐全的一套 UI 框架，为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，tree，validatebox，window等，方便开发人员使用，提高开发效率，正是基于这些考虑，项目设计的时候决定使用该框架。
缺点：界面兼容程度不够，不过大部分都发生在IE6下，在 IE7+ 、FF等浏览器中显示正常。
详细分析
页面重复加载问题
问题现象
点击左侧的菜单，右侧页面被加载了两次。
问题分析
修改前部分代码
$(document).ready(function(){
$(#header).panel({href: ctx +/view/common/header.jsp,onLoad:function(){
$(div.topMenu li a).click(function(){
$(this).addClass(topMenu-item-current);
$(this).parent().siblings().children().removeClass(topMenu-item-current);
if(this.id == js) {
$(#main).panel(refresh,ctx +/view/busi/busi_index.jsp);
addLeftClick();
}else if(this.id == cl) {
…………..
}
});
}});
});
function addLeftClick(){
$(#main).panel({
onLoad:function(){
$(.leftMenu li a).click(function(){
$(this).addClass(selected);
$(this).parent().siblings().children().removeClass(selected);
});
}
});
};
修改后部分代码
$(document).ready(function(){
$(#header).panel({href: ctx +/view/common/header.jsp,onLoad:function(){
$(div.topMenu li a).click(function(){
$(this).addClass(topMenu-item-current);
$(this).parent().siblings().children().removeClass(topMenu-item-current);
if(this.id == js) {
addLeftClick(ctx +/view/busi/busi_index.jsp);
}else if(this.id == cl) {
…………….
}
});
}});
});
function addLeftClick(url){
$(#main).panel({
onLoad:function(){
$(.leftMenu li a).click(function(){
$(this).addClass(selected);
$(this).parent().siblings().children().removeClass(selected);
});
}
}).panel(refresh,url);
};
代码实现的功能是点击主菜单的时候，刷新下面的 panel 控件，加载新页面，并且默认选择左侧菜单的第一个。
修改前的代码是先刷新页面，再添加 onLoad 监听事件，导致panel 刷新两次，页面重复加载，修改后先添加 onLoad 监听事件，再加载页面。
加载速度慢的问题
问题现象
在 IE
显示全部