合肥企业建站程序,网站定制套餐,苏州外贸网站建设推广服务,淘宝店购买网站#为operamasks增加HTML扩展方式的组件调用##背景
之前的[博文](http://www.cnblogs.com/p2227/p/3540858.html)中有提及到#xff0c;发现easyui中的combobox,datebox,layout都有效率问题#xff0c;其中layout的问题在[这里](http://www.cnblogs.com/p2227/p/3541162.html)有…#为operamasks增加HTML扩展方式的组件调用##背景
之前的[博文](http://www.cnblogs.com/p2227/p/3540858.html)中有提及到发现easyui中的combobox,datebox,layout都有效率问题其中layout的问题在[这里](http://www.cnblogs.com/p2227/p/3541162.html)有直接的解决方法而combobox,datebox的问题其实在layout的DEMO中也处理了这里主要是写其处理过程。##处理旧问题发现新问题
既然easyui的组件有问题没什么好说了换另外一个组件好了当时试了很多UI解决方案鉴于界面、效率及源代码的质量问题决定用operamasks去替换easyui中的combobox和datebox但是用惯了easyui的人会发现easyui有一个很大的特点是有很多属性可以直接写在html上例如**div idwin iconClsicon-save titleMy Window/div**iconCls和title就会直接加上去产生的组件上而且也可以用类名去声明组件这些operamasks都没有但是不要紧两边的源代码都有研究一下就OK了##分析easyui源代码
虽然easyui的源代码混淆了但是认真看也能发现问题的PS后来发现[这里](http://jquery-easyui.googlecode.com/svn/trunk)有未经混淆的代码了
里面有一个叫parseOptions的函数就是把HTML上的属性转化为组件能使用的属性。而根据类名去渲染就更加容易找到了因为API中直接就有一个$.parser.parse的方法分析一下其源代码即可。##为operamasks增加HTML扩展方式的组件调用
经过测试和其他细节调整最后代码是这样的
javascript
var om {dataStore:{},parse:function(key){var setData {Button:{parseOptions:function(obj){var $obj obj instanceof jQuery ? obj : $(obj);return {//图片是用地址放上去的而不是css不科学待改进icons: {left:$obj.attr(iconLeft) || $obj.attr(iconCls),right:$obj.attr(iconRight)}}}},Calendar:{parseOptions:function(obj){var $obj obj instanceof jQuery ? obj : $(obj);return {}}},Combo:{parseOptions:function(obj){var $obj obj instanceof jQuery ? obj : $(obj);return {value:$obj.val(),readOnly:/(readonly)|(true)/i.test($obj.attr(readOnly)) ? true : false,dataSource:$obj.attr(dataSource),inputField:$obj.attr(inputField),optionField:$obj.attr(optionField) || text,valueField:$obj.attr(valueField) || value}}},NumberField:{parseOptions:function(obj){var $obj obj instanceof jQuery ? obj : $(obj);return {allowDecimals:/true/i.test($obj.attr(allowDecimals)) ? true : false,allowNegative:/true/i.test($obj.attr(allowNegative)) ? true : false,decimalPrecision:$obj.attr(decimalPrecision)}}},Panel:{parseOptions:function(obj){var $obj obj instanceof jQuery ? obj : $(obj);return {width:$obj.css(width),height:$obj.css(height),collapsed:$obj.attr(collapsed) true,collapsible:$obj.attr(collapsible) true || $obj.attr(collapsed) true || true}}},Tabs:{parseOptions:function(obj){var $obj obj instanceof jQuery ? obj : $(obj);return {}}}}return key ? setData[key] : setData;},omDocReady:function(){//$.om.omCombo.prototype.options.editable false;$.extend($.om.omCombo.prototype.options,{ //改变下拉框的默认值forceSelection : true,filterDelay : 200,listMaxHeight : 200,inputField:text,optionField:text,valueField:value});$.om.omCalendar.prototype.options.editable false;var sd om.parse();$.each(sd,function(key,val){$(.oma-key).each(function(oid,odm){var $obj $(odm);var conf sd[key].parseOptions($obj);$obj[omkey](conf);});})}
}
[完整的DEMO](http://p2227.github.io/demo/applyLayout/playout.html)##HTML扩展方式与纯JS调用
一开始使用extjs的时候推崇的是纯JS调用式的使用组件即
javascript
$(#id).Component({properties1:value1,properties2:value2
})现在在项目实践中发现easyui可以直接把属性定义在HTML上通过源代码的察看发现其实他们最终都是纯JS调用在起作用但是直接定义在HTML上更加容易入门对于项目中一些新手来说更加好用。反正经过我的封装项目组的其他不太熟悉前端的人使用起来是方便了。转载于:https://www.cnblogs.com/p2227/p/3541824.html
