1、众所周知，jQuery Easyui 的 tabs 插件有两种方式加载某个 tab(标签页)上的内容：“href 远程请求”和“content 本地内容”，本文就两种方式的优缺点进行简单分析和思考。两者特点：href 方式加载数据的特点：1. 被加载的页面只有 body 元素内部的内容才会被加载，也就是 jQuery 的 ajax 请求的只是 html 片段。2. 加载远程 url 时有遮罩效果，也就是“等待中”效果，用户体验较好。3. 当加载的页面布局较为复杂，或者有较多的 js 脚本需要运行的时候，编码往往就需要谨慎了，容易出问题，后面会详细谈。content 方式加载数据的特点：1. 比
2、较灵活，你可以在脚本里面拼写 html 代码，然后赋值给 tab 的 content 属性，不过这种写法会使得代码易读性变差。2. 可以把 iframe 赋给 content，把一个 iframe 嵌入也就没有什么不能完成的了。3. 使用 iframe 会造成客户端 js 重复加载，浪费资源，比如说你主页面要引用 easyui的库，你的 iframe 也要引用，浪费就产生了。简单总结：根据上面的分析，使用 content 的方式较为简洁，而且可以引入 iframe 来搞定一切，缺点也很明显，系统较为复杂的话，将带来极大地资源浪费，只适合较为简单的页面系统；而 href 方式则对编码能力要求的稍
3、微高一些，因为 html 的片段，稍微不注意就会处理不好，不过熟练的话，个人觉得 href 方式是不二之选。href 常见问题：1.href 只加载目标 URL 的 html 片段这个特性是由 jQuery 封装的 ajax 请求处理机制所决定的，所以目标 URL 页面里不需要有html,head,body 等标签，即使有这些元素，也会被忽略，所以放在 head 标签里面的任何脚本也不会被引入或者执行。2.短暂的页面混乱：href 链接的页面比较复杂的时候，easyui 对其渲染往往需要一个较长的过程，这时候，加载进来的 html 片段毫无布局可以，过一会自动会好，这时候 easyui 已经完
4、成对它的渲染。如何避免这个混乱的过程呢，还得靠 easyui 的一个基础插件解析器(Parser)。Parser 有个 onComplete 事件，这个事件就是指 easyui 对页面完成渲染时触发，这样思路就很清晰了：用一个 div 遮罩住让被加载进来的 html 片段，在 onComplete 事件中，让这个 div 淡出，这时候渲染好的 html 片段就能美人出浴了，同时还整了个等待中的效果，一举两得。这样要做两件事：第一是在要加载的 html 片段中放一个遮罩用的 div：第二是在被加载的 html 片段尾部处理相关事件：function show()$(“#loading“).fad
5、eOut(“normal“, function()$(this).remove();); var delayTime;$.parser.onComplete = function()if(delayTime) clearTimeout(delayTime);delayTime = setTimeout(show,500);需要注意的是，如果多个 tab 页面都使用了 onComplete 事件，当前定义的会覆盖之前定义的。其实每次 easyui 渲染完成均会调用 onComplete 事件，所以每打开一个包含 easyui控件的 tab 页，onComplete 事件就会被调用。3.html
6、片段的 easyui 组件相关脚本莫名地报错：其实这个现象是跟第一个现象的原因一样的，easyui 完成对 html 片段渲染需要一定的时间，页面越复杂，耗时越长，这时候难以避免 html 存在的脚本存在对 easyui 某些插件的调用，比如 datagrid 等，这个时候就会报错，解决方案同上，将这些脚本放到 onComplete 事件里处理，也就保证了渲染完成前，不会被执行。4.放在 window 里面表单验证的提示信息会乱串：这个现象应该是插件自身的 bug，对位置的计算没有考虑到这些特殊的事情，解决方式可以投机取巧，在打开 window 后，让表单不符合验证的 input 获得焦点就可
7、以了。5.两次或者多次加载远程数据问题：官方已经说明在 1.2.5 的版本中已经修正了这个 Bug，但是还是有不少人反应会出现两次加载远程数据的现象，甚至在 1.2.6 版本中也会遇到，如果您确实遇到这种情况了，请按以下方式检查： 远程数据返回的数据中是否包含 class=”easyui-tabs”或者 class=”easyui-datagrid”这样的样式了， 如果有的话， easyui 在获取 html 片段后会自动渲染，这时候已经对远程数据源做了一次请求； 您是否又用 javascript 去 $(#tabsId).tabs();或者$(#tabsId).datagrid();去绑定事
8、件或者设置属性，其实等于又一次渲染了该应控件，会再次请求远程数据。为什么会这样，看看源码便知道了：$.fn.tabs = function(options, param)if (typeof options = string) /这个地方的分支很清楚，只有当 options 为字符串的时候，才是直接调用控件本身提供的方法。return $.fn.tabs.methodsoptions(this, param);/如果 options 不是字符串，直接构造控件，inxing 渲染。options = options | ;return this.each(function()var state
9、= $.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 多次加载的问题大多数就是这么发生的。
