文章目录
[隐藏]
需求分析：
大家应该都知道，panel的内容可以通过content设置，也可以通过href属性设置远程数据。当我们使用href的时候，如果href返回了包含easyui内部样式的时候，easyui能够自动渲染获取到的远程数据为对应的组件。
这是个非常必要的功能，省去了我们每次对href的数据进行parse的过程。然而，是不是我们每次都希望href的数据立刻被parse呢？我想有些特殊场景还是不希望立刻被parse的，比如说，我的目标href里面包含了代码高亮html的内容，自动href的话就会出问题了。
鉴于以上原因，个人觉得更为灵活和合理的办法是：给panel增加一个属性auto，默认值为true，即，默认情况下是自动parse的，设置为false的话，panel将不自动parse目标href的内容。
属性的增加，通过覆写$.fn.panel.defaults和$.fn.panel.parseOptions就可以了，但是根据这个属性值处理是否要立刻parse远程内容就需要对源码稍作修改了，这也是不得已而为之的办法，并不是所有功能都可以通过扩展的方式实现的。
实现步骤：
1.覆写属性转化器$.fn.panel.parseOptions
/**
* 覆写panel的属性转换器，使其增加对某些属性的转换。
* @param {Object} target
*/
$.fn.panel.parseOptions = function(target){
var t = $(target);
return {
//panel组件自带属性
id: t.attr("id"),
width: (parseInt(target.style.width) || undefined),
height: (parseInt(target.style.height) || undefined),
left: (parseInt(target.style.left) || undefined),
top: (parseInt(target.style.top) || undefined),
title: (t.attr("title") || undefined),
iconCls: (t.attr("iconCls") || t.attr("icon")),
cls: t.attr("cls"),
headerCls: t.attr("headerCls"),
bodyCls: t.attr("bodyCls"),
tools: t.attr("tools"),
href: t.attr("href"),
loadingMessage: (t.attr("loadingMessage") != undefined ? t.attr("loadingMessage") : undefined),
cache: (t.attr("cache") ? t.attr("cache") == "true" : undefined),
fit: (t.attr("fit") ? t.attr("fit") == "true" : undefined),
border: (t.attr("border") ? t.attr("border") == "true" : undefined),
noheader: (t.attr("noheader") ? t.attr("noheader") == "true" : undefined),
collapsible: (t.attr("collapsible") ? t.attr("collapsible") == "true" : undefined),
minimizable: (t.attr("minimizable") ? t.attr("minimizable") == "true" : undefined),
maximizable: (t.attr("maximizable") ? t.attr("maximizable") == "true" : undefined),
closable: (t.attr("closable") ? t.attr("closable") == "true" : undefined),
collapsed: (t.attr("collapsed") ? t.attr("collapsed") == "true" : undefined),
minimized: (t.attr("minimized") ? t.attr("minimized") == "true" : undefined),
maximized: (t.attr("maximized") ? t.attr("maximized") == "true" : undefined),
closed: (t.attr("closed") ? t.attr("closed") == "true" : undefined),
auto: (t.attr("auto") ? t.attr("auto") == "true" : true),
//扩展的属性
borderHeader: (t.attr("borderHeader") != undefined ? t.attr("borderHeader") : undefined),
borderBody: (t.attr("borderBody") != undefined ? t.attr("borderBody") : undefined),
auto: (t.attr("auto") ? t.attr("auto") == "true" : true)//本次扩展的auto属性
};
};
2.扩展$.fn.panel.defaults，定义auto默认值为true
$.fn.panel.defaults = $.extend({}, $.fn.panel.defaults, {
auto: true
});
3.修改源码，利用auto属性作为是否立刻paser的开关
1.2.6版本(1.2.5版本请查找相同功能的类似代码)的easyui找到panel组件的以下代码：
$.ajax({url:_18e.options.href,cache:false,success:function(data){
_190.html(_18e.options.extractor.call(_18d,data));
if($.parser){
$.parser.parse(_190);
}
_18e.options.onLoad.apply(_18d,arguments);
_18e.isLoaded=true;
}});
修改为：
$.ajax({url:_18e.options.href,cache:false,success:function(data){
_190.html(_18e.options.extractor.call(_18d,data));
if($.parser){
if(_18e.options.auto)
{
$.parser.parse(_190);
}
}
_18e.options.onLoad.apply(_18d,arguments);
_18e.isLoaded=true;
}});
使用方式：
在javascript或者DOM中定义auto属性均可以：
$(selector).panel({title:"my panel",fit:true,href:"a.html",auto:false});
<div class="easyui-panel" title="my panel" href="a.html" auto="false" fit="true></div>
