为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上更加容易入门,对于项目中一些新手来说更加好用。反正经过我的封装,项目组的其他不太熟悉前端的人使用起来是方便了。

转载于:https://www.cnblogs.com/p2227/p/3541824.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/294318.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python 带pydev的eclipse无法导入win32api包(或无法导入其他包)

需要重新配置pydev中的python解释器&#xff0c;因为它不会自动更新。 将原先的python.exe先remove掉&#xff0c;再重新new回来&#xff0c;new回来的时候会让你勾选system libs&#xff0c;把你想要更新的勾选上去就可以了。转载于:https://blog.51cto.com/xuewei/1111889

OC之非ARC环境下循环retain问题

观察上述情况&#xff0c;上述就是著名的循环引用问题&#xff0c;对于此类问题&#xff0c;“你包含我&#xff0c;我包含你”&#xff0c;里面相关的对象占用的内存永远回收不了&#xff0c;解决办法很简单&#xff0c;与常规方法不同。正常情况下&#xff0c;我们应在Person…

我的开源故事

| 作者&#xff1a;李扬| 编辑&#xff1a;钱奕| 设计&#xff1a;杨敏| 责编&#xff1a;钱英宇一、前 言我相信我与开源故事的开始并不是第一次用GitHub或者CSDN&#xff0c;而是突如其来的新冠疫情。2020年1月25日&#xff0c;大年初一&#xff0c;范晶晶的一条关于wuhan202…

matlab 类 使用,matlab中sortrows的用法

sortrows有三种用法&#xff1a;B sortrows(A)B sortrows(A,column)[B,index] sortrows(A,...)我们先创建一个矩阵Afloor(gallery(uniformdata,[6 7],0)*100);A(1:4,1)95; A(5:6,1)76; A(2:4,2)7; A(3,3)73A 95 45 92 41 13 1 8495 7 73 89 20 74 5295 7 73 5 19 44 2095 7 …

Spring+EhCache缓存实例(详细讲解+源码下载)

转载注明出处http://blog.csdn.net/u013142781 一、ehcahe的介绍 EhCache 是一个纯Java的进程内缓存框架&#xff0c;具有快速、精干等特点&#xff0c;是Hibernate中默认的CacheProvider。Ehcache是一种广泛使用的开源Java分布式缓存。主要面向通用缓存,Java EE和轻量级容器。…

大型打脸现场!被藐视的少女摇身一变成为“抽象代数之母”,哲学教授只能跪地喊爸爸...

全世界只有3.14 % 的人关注了爆炸吧知识今天小天要为大家介绍一位数学界的女神。在爱因斯坦、帕维尔亚历山德罗夫等人的眼中&#xff0c;她是数学史上最重要的女人&#xff0c;甚至被爱因斯坦称为数学界的雅典娜。她&#xff0c;就是诺特定理的提出者——艾米诺特。艾米诺特上学…

组策略应用之一:映射网络驱动器

在部署文件服务器时&#xff0c;我们经常会用映射网络驱动器的方法访问共享文件&#xff0c;但如果有新员工离职、调岗或更换电脑后&#xff0c;就不得不重新映射网络驱动器&#xff0c;在一定程度上即增加了系统管理员的工作负担&#xff0c;另外在一定程度上也会影响员工的工…

白话面向对象

关于面向对象的学习&#xff0c;将是一个长期的过程&#xff0c;每一个阶段都会有不同的看法&#xff0c;现在对面向对象中的各种术语有有了一点新的认识&#xff0c;我以白话的形式描述出来。 1.类和对象 一个对象就是一个实体&#xff0c;你是一个对象&#xff0c;我是一个对…

Shell常用命令总结

1、 ls: 类似于dos下的dir命令 ls最常用的参数有三个&#xff1a; -a -l -F。 ls –a Linux上的文件以.开头的文件被系统视为隐藏文件&#xff0c;仅用ls命令是看不到他们的&#xff0c;而用ls -a除了显示一般文件名外&#xff0c;连隐藏文件也会显示出来。 ls –l 该参…

Android JSON原生解析的几种思路,以号码归属地,笑话大全,天气预报为例演示...

Android JSON原生解析的几种思路&#xff0c;以号码归属地&#xff0c;笑话大全&#xff0c;天气预报为例演示 今天项目中要实现一个天气的预览&#xff0c;加载的信息很多&#xff0c;字段也很多&#xff0c;所以理清了一下思路&#xff0c;准备独立出来写一个总结&#xff0c…

C# WPF MVVM开发框架Caliburn.Micro 名称Transformer⑩①

使用名称TransformerNameTransformer是在Caliburn.Micro v1.1中引入的&#xff0c;它是ViewLocator和ViewModelLocator如何将类名映射到其伙伴角色的一个组成部分。虽然您可以覆盖这些服务上的各种函数来替换底层行为&#xff0c;但您的大多数需求都应该通过使用适当的NameTran…

史上最可怜的科学家:出生先天不足,家道中落吃不上饭,追个星丢工作,拜师被冤枉,写书又被烧,最后还被拖工资活活拖死了......

全世界只有3.14 % 的人关注了爆炸吧知识今天&#xff0c;小天来向各位模友介绍一个痴迷偶像正面刚的小迷弟吧。多病的贫家子&#xff0c;鲁莽的小迷弟1571年&#xff0c;开普勒在德国维尔镇呱呱落地了。作为一个善解人意的宝宝&#xff08;胚胎&#xff09;&#xff0c;开普勒没…

[zz]为 Lua 绑定 C/C++ 对象

转载自&#xff1a; http://blog.codingnow.com/2013/01/binding_c_object_for_lua.html 如何绑定 C/C 对象到 Lua 里&#xff1f;通常是创建一个 userdata &#xff0c;存放 C/C 对象指针&#xff0c;然后给 userdata 添加元表&#xff0c;用 index 元方法映射 C/C 中的对象方…

文本字符集转换

http://lqqnotes.blog.51cto.com/3329069/659886 拉取数据 在我opensuse下OK 产品的WIN下面乱码 # enca -L 现在文件的语言 -x 需要转换编码 需要转换编码的文件 查看文件编码jinlinux-gzy1:~> enca -d Downloads/store_sdb_ectools_regions_0211-3.csvDownloads/store_sdb…

php 身份认证服务,PHP的HTTP身份认证

PHP 的 HTTP 认证机制仅在 PHP 以 Apache 模块方式运行时才有效&#xff0c;因此该功能不适用于 CGI 版本。在 Apache 模块的 PHP 脚本中&#xff0c;可以用 header() 函数来向客户端浏览器发送“Authentication Required”信息&#xff0c;使其弹出一个用户名/密码输入窗口。当…

C# WPF MVVM开发框架Caliburn.Micro View / View Model 命名⑨

01—约定在收到Caliburn Micro中有关视图和ViewModel解析的反馈后&#xff0c;我们添加了新功能&#xff0c;以简化类型解析&#xff0c;同时保持驱动它的健壮的基于正则表达式的名称转换机制。为了更好地了解这些新功能以及类型解析通常如何在框架中工作&#xff0c;现在是详细…

rman归档删除

rman&#xff1a; delete [all] input 数据库oracle 11g 全备脚本如下&#xff1a;rman target / <<EOFrun {allocate channel t1 type disk; allocate channel t2 type disk; allocate channel t3 type disk; set limit channel t1 kbytes 4194304;set limit channel t…

史上最气人的数学家:文理双全智商还高,说话只说半句,解题只解半个,调戏人调戏了三百年还不够......

全世界只有3.14 % 的人关注了爆炸吧知识大家上学的时候有没有想过&#xff1a;在数学试卷上调戏阅卷人。想想小天&#xff0c;会都不会写&#xff0c;还调戏阅卷人&#xff1f;想都不敢想。但一个知乎大佬就做了。他居然用费马的原话作答&#xff1a;我已经想到了一个极佳的证明…

php验证手机验证码过期,验证过期时间

~~~//说明目前短信验证码发送成功 需要记录具体的验证码到session。//需要保证验证码有过期时间。关于过期时间 可以记录当前发送验证码的时间以及具体的有效时间$dataarray(code>$code,time>time(),//指定当前的时间limit>3600,//表示具体的过期时间);session(telcod…

数据库(连接)

连接&#xff1a; 为什么需要连接&#xff1f;&#xff1a;因为我们需要的数据在不同的表中 内连接&#xff1a; select 列A from 表A inner join 表B on 条件1条件2 在内连接中可以省去 inner 注&#xff1a;on 必须和join 一起出现 他没有单独存在的意义 外连接&#xff1a…