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片段尾部处理相关事件:
2 |
$( "#loading" ).fadeOut( "normal" , function (){
|
7 |
$.parser.onComplete = function (){
|
9 |
clearTimeout(delayTime);
|
10 |
delayTime = setTimeout(show,500);
|
需要注意的是,如果多个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' ) {
|
4 |
return $.fn.tabs.methods[options]( this , param);
|
7 |
options = options || {};
|
8 |
return this .each( function (){
|
9 |
var state = $.data( this , 'tabs' );
|
12 |
opts = $.extend(state.options, options);
|
16 |
$.data( this , 'tabs' , {
|
17 |
options: $.extend({}, $.fn.tabs.defaults, $.fn.tabs.parseOptions( this ), options),
|
因此,直接传入对象的话,所有控件都会重新构造的,tabs多次加载的问题大多数就是这么发生的。
分享到:
相关推荐
总结,通过结合 EasyUI 的 tabs 组件和 jQuery 的 contextmenu 事件,我们可以轻松地为 EasyUI 的 tabs 添加右键菜单功能,提高用户体验。在开发过程中,理解组件的工作原理和事件机制是非常重要的,这有助于我们更...
在标题中提到的"手把手教你制作easyUI工作站",我们就是要通过tabs组件来实现多工作区的切换和管理。 1. **初始化tabs** 在HTML文件中,我们需要创建一个div元素作为tabs的容器。例如: ```html <div id="tabs">...
- `href`: 如果内容来自外部资源,可以使用`href`属性设置链接,EasyUI会自动加载链接内容到选项卡中。 通过上述方式,你可以轻松地根据需要刷新jQuery EasyUI选项卡中的内容。这种方法不仅适用于加载动态数据,还...
这个标签页的 `href` 属性指向了 `Table.aspx`,在用户切换到这个标签页时,会通过 `$.ajax` 发送异步请求获取页面内容,然后使用 `tabs('update')` 方法将数据填充到标签页内。 `Table.aspx` 文件可能是用于展示...
`options`对象包含两个属性:`tab`表示要更新的Tab,`options`内嵌套的`content`属性用于指定新内容,这里同样是创建一个`iframe`,其`src`与新`url`对应,从而实现Tab内容的刷新。 `createFrame(url)`函数的作用是...
在 jQuery EasyUI 中,添加动态的 Tabs 是一个常见的需求。Tabs 是一种方便的信息组织方式,可以将多个内容区域分割到不同的标签页中,用户可以通过点击标签在各个内容之间切换。在本文中,我们将探讨如何通过调用 `...
这涉及到对`easyui-tabs`的API的熟练运用,例如`tabs('add', {title: '新标签', content: '新内容', closable: true})`来添加一个新的可关闭的Tab页。 至于 **标签** ,这里提到了 "jQuery easyui java jsp"。这...
jQuery EasyUI 是一个基于 jQuery 的前端开发框架,它提供了一系列的组件和插件,使得开发者可以快速构建用户界面。这个框架充分利用了 jQuery 的简洁性和高效性,并结合了丰富的UI组件,如布局(Layout)、面板...
<link rel="stylesheet" type="text/css" href="easyui.css"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="easyui.min.js"> <div id="tabs" class=...
本文档介绍了jQuery EasyUI中的Layout组件,特别关注了其中的Tabs布局,这是用来创建多个标签页的组件。以下是对文档中提到的知识点的详细说明: ### jQuery EasyUI 中文API Layout(Tabs) #### 1. 引入文件 在...
总结来说,jQuery EasyUI Layout 实现 tabs 标签功能,需要通过引入库文件、设置 Layout 结构、编写 JavaScript 代码动态创建 tabs,并结合用户交互来管理和更新 tabs 内容。这样可以创建出富有层次感、易于导航的 ...
总结一下,解决EasyUI加载的JavaScript不执行的问题,关键是理解EasyUI的Tab组件如何处理`href`属性指向的外部HTML文件,以及在处理Ajax请求时HTML片段的概念。避免在外部HTML文件中包含完整的HTML结构,只保留`...
选项卡是Web应用中常见的UI元素之一,使用easyUI的`tabs`组件可以方便地创建和管理多个选项卡。 ```javascript $('#tt').tabs(); ``` ##### 动态添加选项卡 除了静态创建选项卡之外,还可以根据需要动态地添加新的...
接下来我们将继续探讨其他重要的 EasyUI 组件,如 Dialog(对话框)、Messager(提示框)、NumberBox(数字框)、ValidateBox(验证框)、Pagination(分页)、Window(窗口)、Panel(面板)、Tabs(标签)、Tree...
接下来将分别对 ComboBox、Dialog、Message、NumberBox、ValidateBox、Pagination、Window、Panel、Tabs、Tree、Layout 和 DataGrid 这些组件进行详细的介绍和分析,以帮助读者更好地理解和使用 jQuery EasyUI。
1. **Href 方式**:通过设置 `href` 属性,`Tabs` 会通过 AJAX 远程请求加载数据。这种方式只加载 `body` 元素内的内容,提供加载中遮罩效果,提升用户体验。但当加载的页面复杂,包含大量 JS 脚本时,可能需要谨慎...
jQuery EasyUI 框架中几个常见的组件,该框架还包含了大量的其他组件和功能,如`Messager`(提示框)、`NumberBox`(数字框)、`ValidateBox`(验证框)、`Pagination`(分页)、`Window`(窗口)、`Panel`(面板)...
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> ...
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> ...
此示例中,首先引入了 jQuery 和 EasyUI 的相关样式和脚本文件,然后通过 JavaScript 初始化了一个 Accordion 组件,并设置了宽度、高度和是否适应父容器的大小等属性。 - **参数** Accordion 组件支持多种配置...