浅谈 easyui tabs 的href和content属性

众所周知，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：

<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片断尾部处理相关事件：

function show(){
   $("#loading").fadeOut("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片断的easyui组件相关脚本莫名地报错：

其实这个现象是跟第一个现象的缘由同样的，easyui完成对html片断渲染须要必定的时间，页面越复杂，耗时越长，这时候难以免html存在的脚本存在对easyui某些插件的调用，好比datagrid等，这个时候就会报错，解决方案同上，将这些脚本放到onComplete事件里处理，也就保证了渲染完成前，不会被执行。

4.放在window里面表单验证的提示信息会乱串：

这个现象应该是插件自身的bug，对位置的计算没有考虑到这些特殊的事情，解决方式能够投机取巧，在打开window后，让表单不符合验证的input得到焦点就能够了。

5.两次或者屡次加载远程数据问题：

官方已经说明在1.2.5的版本中已经修正了这个Bug，可是仍是有很多人反应会出现两次加载远程数据的现象，甚至在1.2.6版本中也会遇到，若是您确实遇到这种状况了，则可能由如下状况形成的：

5.1 本身的代码不严谨形成的，这是比较低级的错误，若是遇到请按照如下两个步骤检查缘由：

• 远程数据返回的数据中是否包含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不是字符串，直接构造控件，进行渲染。 
		    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屡次加载的问题大多数就是这么发生的。

5.2,事件冒泡引发的二次加载也是有可能的，详细状况请参照：
http://www.easyui.info/archives/501.html

摘自：http://www.easyui.info/archives/164.html