EasyUI 兼容 IE6 方法总结 1 . 背景 1.1 项目介绍 安徽XXXXXX 服务平台从 7 月低开始框架搭建,前端UI 框架确定使用目前功能比较完善的Jquery EasyUI(没有考虑到客户方目前使用的浏览器大部分都是IE6,项目设计初期的不严谨)。11 初基本功能开发完成,期间一直致力于功能的实现和数据的一致性的核查,并没有太多关注浏览器的兼容性和性能问题。经过在客户现场几次演示的结果,暴露出严重的性能问题和兼容性问题,在IE6 下,系统基本不能运行。于是开始着手调整这些问题。 1.2 框架介绍 优点:JQuery EasyUI 是目前功能比较齐全的一套 UI 框架,为我们提供了大多数UI 控件的使用,如:accordion, combobox, menu, dialog, tabs, tree, validatebox, window 等,方便开发人员使用,提高开发效率,正是基于这些考虑,项目设计的时候决定使用该框架。 缺点:界面兼容程度不够,不过大部分都发生在IE6 下,在 IE7+ 、 FF 等浏览器中显示正常。 2 . 详细分析 2.1 页面重复加载问题 1) 问题现象 点击左侧的菜单,右侧页面被加载了两次。 第1 页,共10 页 2) 问题分析 ○1 修改前部分代码 $(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"); }); 第2 页,共10 页 } }); }; ○2 修改后部分代码 $(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 +...