jquery easyui Tab 引入页面的问题
jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:“href远程请求”和“content本地内容”,本文就两种方式的优缺点进行简单分析和思考。
两者特点:
href方式加载数据的特点:
- 被加载的页面只有body元素内部的内容才会被加载,也就是jQuery的ajax请求的只是html片段。
- 加载远程url时有遮罩效果,也就是“等待中……”效果,用户体验较好。
- 当加载的页面布局较为复杂,或者有较多的js脚本需要运行的时候,编码往往就需要谨慎了,容易出问题,后面会详细谈。
content方式加载数据的特点:
- 比较灵活,你可以在脚本里面拼写html代码,然后赋值给tab的content属性,不过这种写法会使得代码易读性变差。
- 可以把iframe赋给content,把一个iframe嵌入也就没有什么不能完成的了。
- 使用iframe会造成客户端js重复加载,浪费资源,比如说你主页面要引用easyui的库,你的iframe也要引用,浪费就产生了。
简单总结:
根据上面的分析,使用content的方式较为简洁,而且可以引入iframe来搞定一切,缺点也很明显,系统较为复杂的话,将带来极大地资源浪费,只适合较为简单的页面系统;
而href方式则对编码能力要求的稍微高一些,因为html的片段,稍微不注意就会处理不好,不过熟练的话,个人觉得href方式是不二之选。
href常见问题:
1.href只加载目标URL的html片段
这个特性是由jQuery封装的ajax请求处理机制所决定的,所以目标URL页面里不需要有html,head,body等标签,即使有这些元素,也会被忽略,所以放在head标签里面的任何脚本也不会被引入或者执行。
2.短暂的页面混乱:
href链接的页面比较复杂的时候,easyui对其渲染往往需要一个较长的过程,这时候,加载进来的html片段毫无布局可以,过一会自动会好,这时候easyui已经完成对它的渲染。如何避免这个混乱的过程呢,还得靠easyui的一个基础插件——解析器(Parser)。
Parser有个onComplete事件,这个事件就是指easyui对页面完成渲染时触发,这样思路就很清晰了:用一个div遮罩住让被加载进来的html片段,在onComplete事件中,让这个div淡出,这时候渲染好的html片段就能美人出浴了,同时还整了个等待中的效果,一举两得。这样要做两件事:
第一是在要加载的html片段中放一个遮罩用的div:
1
|
< div id = "loading" style = "position: absolute; z-index: 1000; top: 0px; left: 0px; width: 100%; height: 100%; background: #DDDDDB; text-align: center; padding-top: 20%;" ></ div >
|
第二是在被加载的html片段尾部处理相关事件:
1
|
function show(){
|
2
|
$( "#loading" ).fadeOut( "normal" , function (){
|
3
|
$( this ).remove();
|
4
|
});
|
5
|
}
|
6
|
var delayTime;
|
7
|
$.parser.onComplete = function (){
|
8
|
if (delayTime)
|
9
|
clearTimeout(delayTime);
|
10
|
delayTime = setTimeout(show,500);
|
11
|
}
|
需要注意的是,如果多个tab页面都使用了onComplete事件,当前定义的会覆盖之前定义的。其实每次easyui渲染完成均会调用onComplete事件,所以每打开一个包含easyui控件的tab页,onComplete事件就会被调用。
3.html片段的easyui组件相关脚本莫名地报错:
其实这个现象是跟第一个现象的原因一样的,easyui完成对html片段渲染需要一定的时间,页面越复杂,耗时越长,这时候难以避免html存在的脚本存在对easyui某些插件的调用,比如datagrid等,这个时候就会报错,解决方案同上,将这些脚本放到onComplete事件里处理,也就保证了渲染完成前,不会被执行。
4.放在window里面表单验证的提示信息会乱串:
这个现象应该是插件自身的bug,对位置的计算没有考虑到这些特殊的事情,解决方式可以投机取巧,在打开window后,让表单不符合验证的input获得焦点就可以了。
5.两次或者多次加载远程数据问题:
官方已经说明在1.2.5的版本中已经修正了这个Bug,但是还是有不少人反应会出现两次加载远程数据的现象,甚至在1.2.6版本中也会遇到,如果您确实遇到这种情况了,请按以下方式检查:
- 远程数据返回的数据中是否包含class=”easyui-tabs”或者class=”easyui-datagrid”这样的样式了, 如果有的话,easyui在获取html片段后会自动渲染,这时候已经对远程数据源做了一次请求;
- 您是否又用javascript去$(‘#tabsId’).tabs({…});或者$(‘#tabsId’).datagrid({…});去绑定事件或者设置属性,其实等于又一次渲染了对应控件,会再次请求远程数据。
为什么会这样,看看源码便知道了:
$.fn.tabs = function (options, param){
|
2
|
if ( typeof options == 'string' ) {
|
3
|
//这个地方的分支很清楚,只有当options为字符串的时候,才是直接调用控件本身提供的方法。
|
4
|
return $.fn.tabs.methods[options]( this , param);
|
5
|
}
|
6
|
//如果options不是字符串,直接构造控件,inxing渲染。
|
7
|
options = options || {};
|
8
|
return this .each( function (){
|
9
|
var state = $.data( this , 'tabs' );
|
10
|
var opts;
|
11
|
if (state) {
|
12
|
opts = $.extend(state.options, options);
|
13
|
state.options = opts;
|
14
|
}
|
15
|
else {
|
16
|
$.data( this , 'tabs' , {
|
17
|
options: $.extend({}, $.fn.tabs.defaults, $.fn.tabs.parseOptions( this ), options),
|
18
|
tabs: wrapTabs( this ),
|
19
|
selectHis: []
|
20
|
});
|
21
|
}
|
22
|
buildButton( this );
|
23
|
setProperties( this );
|
24
|
setSize( this );
|
25
|
initSelectTab( this );
|
26
|
});
|
27
|
};
|
因此,直接传入对象的话,所有控件都会重新构造的,tabs多次加载的问题大多数就是这么发生的。
转载于:https://www.cnblogs.com/chengJAVA/p/3930730.html
jquery easyui Tab 引入页面的问题相关推荐
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- ztree和php结合实例,实例详解jQuery EasyUI结合zTree树形结构制作web页面
JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的,z ...
- jQuery学习第三天(插件库、引入页面、jQ中的ajax)
插件库 superSlide.swiper 轮播图插件的网站,有说明书 jQ入口函数 $(document).ready(function(){}) 简写:$(function(){}); 与原生js ...
- jquery easyUi简单介绍
jquery easyui 下称(ui)适合一个网站后台的快速搭建,给我们开发人员节约了很多的时间,下面,对于操作,下面进行详细的介绍下: 首先下载ui包,下载地址http://www.jeasyui ...
- 【原】jQuery easyUI 快速搭建前端框架
jQueryEasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要 ...
- jQuery EasyUI ztree插件使用
1.下载easyUI的开发包 该包的结构是 2.将easyUI的资源文件引入的页面中: <link rel="stylesheet" type="text/css& ...
- JQuery EasyUi之界面设计——前言与界面效果(一)
为什么80%的码农都做不了架构师?>>> 如果冯巩的开场白是"观众朋友们,我想死你们了",那么我的开场白是"最近一直很忙,很久没有发文了" ...
- JQuery EasyUI学习框架
前言 前端技术,新项目的开发拟使用EasyUI框架(基于EasyUI丰富UI组件库),项目负责人的提示EasyUI分配给我这个任务.发展前,我需要这对于一个新手EasyUI框架学习一些基本的入门.记录 ...
- jquery easyui 操作总结
2019独角兽企业重金招聘Python工程师标准>>> src:http://lhdst-163-com.iteye.com/blog/1707232 1.dialog Java代码 ...
最新文章
- pte模拟考试_【PTE懒人攻略】如何在7天内通过PTE考试
- Windows 10 中 Eclipse中无法添加Courier New字体的解决方法!
- Android UI编程进阶——使用SurfaceViewt和Canvas实现动态时钟
- 人与计算机的未来_身边的很多人都在学习计算机,学习计算机到底能带来哪些好处...
- View.onMeasured的默认实现 (onMeasure必须调setMeasuredDimension)
- C++读取文件夹中所有文件的路径,包含子文件夹
- 例4:写一个把字符串的所有大写字母改为小写的程序。设字符串以0结尾。
- win7分区软件_神奇的工作室win7旗舰版重装系统连不上网怎么解决
- php正则匹配怎么写,正则表达式 - 求助怎么写php的正则匹配
- 【Prince2科普】P2七大主题之商业论证
- mssql mysql数据库大小_mssql查看数据库大小
- 使用Druid数据库连接池整合MyBatis Plus时,出现Error attempting to get column 'startTime' from result set. 类似错误
- java filechannel 并发_java.nio中的Channel系列(2)-FileChannel与零拷贝原理
- 【Java开发】之配置文件的读取
- LinkedIn领英上的几度人脉是什么意思?如何突破领英人脉限制高效率开发客户?
- 移动芯片巨头英国ARM的发展史
- HAL - RTC分析
- 【uni-app】模仿微信实现简易发送/取发语音功能
- 机器学习相关学习视频
- Eclipse设置护眼背景调整字体
热门文章
- mysql开通访问权限_mysql 用户远程访问权限开通
- 服务器 自检 修改,检查多台服务器初始密码是否修改的shell脚本
- linux python2.7 mssqlserver_连接到linux上的MSSQL Server 2008
- python建立sqlite数据库_5分钟快速入门,用Python做SQLite数据库开发,附代码适合初学...
- 交接文档怎么写_如何最快速的交接工作
- 8 适用于 Keras 用户的 TensorFlow.js 层 API
- 【博客大赛】100行js代码实现网站在线用户数量统计 nodejs + socket.io方案
- phpstorm docker php,使用phpstorm对docker中的脚本进行debug的方法
- C语言学习笔记---时间函数ctime()和gmtime()
- STM8学习笔记---IAR工程中添加文件夹