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:
第二是在被加载的html片段尾部处理相关事件:
需要注意的是,如果多个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){ if (typeof options == 'string') { //这个地方的分支很清楚,只有当options为字符串的时候,才是直接调用控件本身提供的方法。 return $.fn.tabs.methods[options](this, param); } //如果options不是字符串,直接构造控件,inxing渲染。 options = options || {}; return this.each(function(){ var state = $.data(this, 'tabs'); var opts; if (state) { opts = $.extend(state.options, options); state.options = opts; } else { $.data(this, 'tabs', { options: $.extend({}, $.fn.tabs.defaults, $.fn.tabs.parseOptions(this), options), tabs: wrapTabs(this), selectHis: [] }); } buildButton(this); setProperties(this); setSize(this); initSelectTab(this); }); };
因此,直接传入对象的话,所有控件都会重新构造的,tabs多次加载的问题大多数就是这么发生的。
原文详见:http://blog.csdn.net/superdog007/article/details/8225518
相关推荐
- **引入资源**:将jQuery和jQuery EasyUI的CSS及JS文件添加到项目中。 - **基本设置**:根据项目需求配置全局选项,如默认的主题样式等。 #### 四、核心组件详解 - **1. 按钮(Button)** - 功能概述:实现基本的...
1. **基础使用**:如何引入 jQuery 和 EasyUI 的库文件,以及在 HTML 页面中启用 EasyUI 模式,这通常涉及到在头部添加 CSS 和 JS 文件链接。 2. **组件库**:EasyUI 提供的组件包括但不限于 Dialog(对话框)、...
### jQuery EasyUI 培训文档知识点概览 #### 一、Accordion(手风琴面板) **1.1 概述** Accordion 组件是 jQuery EasyUI 中的一个非常实用的插件,它允许用户轻松地创建可折叠的手风琴面板。这对于节省页面空间...
值得注意的是,使用`update`方法时,确保你的jQuery EasyUI和相关依赖库已经正确引入,并且你的选项卡容器已经正确初始化。例如,你的HTML可能会这样设置: ```html <div id="frame_tabs"></div> $(function() { ...
1. CSS和JavaScript引用:在HTML文件中,需要引入jQuery库、jQuery EasyUI的核心CSS和JS文件,以及相应的主题文件,以保证所有组件的正常显示和功能。 2. 数据绑定:EasyUI的组件大多支持数据绑定,可以通过JSON...
在页面中,需要引入JQuery EasyUI的相关文件,包括主题文件、样式表以及jQuery EasyUI的核心JavaScript文件。对于zTree,需要引入包含核心功能以及其他扩展功能(如隐藏节点、编辑节点、复选框等)的JavaScript文件...
在使用EasyUI进行Web开发时,我们可能会遇到与`jquery.easyui.min.js`函数库相关的各种问题。EasyUI是基于jQuery的一个强大且易用的前端框架,它提供了丰富的组件和功能,如表格、对话框、菜单、布局等,极大地简化...
通过以上步骤,你可以利用 jQuery EasyUI 实现一个基本的左右布局页面,同时,EasyUI 提供的其他组件如 Dialog、Form、Grid 等,可以帮助你进一步完善后台管理系统的功能,如数据录入、查看、编辑等。EasyUI 的灵活...
在JavaScript库中,EasyUI和jQuery是常见的工具,用于创建高效、美观且易用的界面。本文将深入探讨如何将Dialogr(一个对话框插件)与EasyUI的Tab组件相结合,以实现类似浏览器中多标签页的效果。 EasyUI 是一个...
文档中的这部分内容为开发者提供了如何使用jQuery EasyUI创建一个基本的Tab布局的示例,包括如何引入必要的文件、定义HTML结构、使用jQuery进行初始化及操作Tabs组件,以及对组件中涉及的特性、事件、方法的详细说明...
《jQuery EasyUI与zTree结合构建Web页面中的树形结构》 在Web开发中,创建交互式的用户界面是一项重要的任务。jQuery EasyUI和zTree这两个JavaScript库为开发者提供了强大的工具,使得这一过程变得更为简便。本文将...
当在***中使用UpdatePanel控件时,虽然能够实现部分页面内容的异步更新而无需刷新整个页面,但这却可能导致引入的jQuery EasyUI库的功能失效。jQuery EasyUI是一个基于jQuery的前端UI框架,它提供了一系列的用户界面...
首先,要创建一个基本的标签组件,你需要引入 jQuery 库和 jQuery EasyUI 的相关文件。在 HTML 页面中,你可以通过创建一个 `<div>` 元素,并给它添加一个 `easyui-tabs` 类来定义一个标签组件容器。每个面板(Tab ...
1. easyui.css:这是一个EasyUI框架的CSS样式文件,它提供了基本的样式定义,包括淡蓝色背景,使得jQuery Tab看起来美观。EasyUI是一个基于jQuery的轻量级UI库,它提供了一系列预设的UI组件,如表格、对话框、菜单等...
1、引入jquery.js与easyUi相关文件 2、效果如图: 二、创建Layout主页: <%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> ...
本文讲解了如何使用jQuery EasyUI框架实现右键菜单来关闭标签页(选项卡)。...通过组合使用jQuery EasyUI的各种组件和事件处理,以及适当的页面布局和样式的引入,开发者可以创建出具有高级交互功能的Web应用。
### Jquery easyui框架概述 Jquery easyui是一个基于jQuery的前端UI框架,它为用户界面的开发提供了一套完整的解决方案。通过easyui,开发者可以快速构建出具有交互性的网页应用,无需编写大量JavaScript代码。它...
- 引入Bootstrap的JavaScript库,如`bootstrap.min.js`,并根据需要引入jQuery和其他必要的JS插件。 4. **自定义样式**: - 虽然Bootstrap提供了一套完整的预设样式,但可能无法完全匹配原有EasyUI的视觉效果。...