为operamasks增加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 id="win" iconCls="icon-save" title="My 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["om"+key](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上更加容易入门,对于项目中一些新手来说更加好用。反正经过我的封装,项目组的其他不太熟悉前端的人使用起来是方便了。


分享给朋友:
您可能感兴趣的文章:
随机阅读: