《EasyUI兼容IE的方法.docVIP

EasyUI 兼容 IE6 方法总结 背景 项目介绍 安徽XXXXXX服务平台从 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 监听事件，再加载页面。 加载速度慢的问题 问题现象