jquery panel加载（dialog加载类似）
项目情况：
主页面用引用了公共头文件（包含easui.min.js），使用easyui的dialog（href方式）打开窗口（被打开的窗口页面是纯html片段，无body元素等，也引入了公共头文件），结果主页的easyui组件全部异常。
原因：
easui的dialog是将打开的窗口页面加载到主页中，easui.min.js被加载了两次，组件重复初始化导致异常。
（dialog是继承panel的）
解决办法：
将加载的内容放于html的body中，公共头文件放于html的body外面，这样就不在有js的重复加载，问题解决。
总结：
panel方式（href、url等类似方式）加载页面，正常值加载页面的body部分，这样的话就可以将公共的js和css放于body外面，自定义的js和css放在body里面，加载到主页面后，就不会有js和css冲突了。
主体页面代码：
<%@include file="/framework/common/import-head.jsp"%>
<html>
<head>
<title>加载html</title>
</head>
<script language="javascript">
</script>
<body>
<button class="customButton" data-option="icon:'reply'" onclick="loadHtml()">加载html</button>
<div class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;">
tab1
</div>
<div title="Tab2" style="overflow:auto;padding:20px;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload'" style="padding:20px;">
tab3
</div>
</div>
<div id="loadDiv"></div>
<script type="text/javascript">
function loadHtml(){
var url = "htmlSpec.html";
//$("#loadDiv").load(url);
$("#loadDiv").panel({href:url});
}
</script>
</body>
</html>
被加载页面：
<%@include file="/framework/common/import-head.jsp"%>
<html>
<head>
<title>被加载html</title>
</head>
<body>
<div class="easyui-tabs" style="width:500px;height:250px;">
<div title="help" style="padding:20px;">
message
</div>
<div title="document" style="overflow:auto;padding:20px;">
somecontext
</div>
</div>
</body>
</html>
jquery panel加载（dialog加载类似）的更多相关文章
- jQuery Mobile 手动显示ajax加载器，提示加载中...
在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大 ...
- jQuery Mobile 手动显示ajax加载器
在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...
- jQuery瀑布流从不同方向加载3种效果演示
很实用的一款插件jQuery瀑布流从不同方向加载3种效果演示在线预览 下载地址 实例代码 <section class="grid-wrap"> <ul clas ...
- jquery easyui easyui-treegrid 使用异步加载数据
jquery easyui easyui-treegrid 使用异步加载数据 jquery easyui easyui-treegrid 异步请求 >>>>>>&g ...
- JQuery浮动层Loading页面加载特效
之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...
- 转载：用Jquery实现的图片预加载技术，可以实现有序加载和无序加载！
一.背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题. 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者 ...
- [转]jquery的ajax交付时“加载中”提示的处理方法
本文转自:http://www.educity.cn/wenda/77121.html jquery的ajax提交时“加载中”提示的处理方法 方法1:使用ajaxStart方法定义一个全局的“加 ...
- jquery.lazyload （JS懒加载框架使用详解）
/** 本地加载方式加载JS*/ NSString *path = [[NSBundle mainBundle] pathForResource:@"jquery.js&quo ...
- 《前端之路》之 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏
目录 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & ...
- WebView 加载网页 加载资源 总结 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
随机推荐
- ldap快速配置
1.[yum lamp环境] yum -y install httpd httpd-devel mysql mysql-server mysql-devel php php-mysql php-co ...
- springboot1.X 到2.X 的改变
参考:https://blog.csdn.net/tzs_1041218129/article/details/79514845
- Spring_JAP_CXF_maven
发送 pom,xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://ww ...
- 关于Nginx的负载均衡
一.关于Nginx的负载均衡 在服务器集群中,Nginx起到一个代理服务器的角色(即反向代理),为了避免单独一个服务器压力过大,将来自用户的请求转发给不同的服务器.详情请查看我的另一篇博客. 二.Ng ...
- word 2013 自动保存太慢，下面读条起码3分钟
该问题有可能是应用干扰或者安全设置问题导致的. 建议您尝试以下方法: 方法一: 尝试使用干净启动来暂时禁用计算机启动时所加载的第三方程序来进一步做测试: 如何在Windows 中执行干净启动步骤 具体 ...
- UI5-文档-4.12-Shell Control as Container
现在我们使用shell控件作为应用程序的容器,并使用它作为新的根元素.shell通过在桌面屏幕上引入一个所谓的信箱,来负责应用程序对设备屏幕大小的视觉调整. Preview The app is no ...
- Jquery detect page refresh
first thing there are 3 functions we will use: function setCookie(c_name, value, exdays) { ...
- js获取或判断任意数据类类型的通用方法(getDataType)和将NodeList转为数组（NodeListToArray）
function getDataType(any){ /* (1) Object.prototype.toString.call 方法判断类型: 优点:通用,返回"[object Strin ...
- CentOS7.0重置Root的密码 (忘记密码)
首先进入开启菜单,按下e键进入编辑现有的内核,如下图所示 然后滚动列表,找到ro,将它替换成rw,并加上init=/sysroot/bin/sh,最终变为如下图 然后按CTRL+X进入到单用户模式,在 ...
- 快速上手Vue
课程目录: ES6常用语法 Vue基础以及指令 Vue组件 Vue-Router Vue生命周期 npm webpack vue-cli Vuex以及axios