Operamask-UI扩展插件使用指南V1.0.docVIP

引言 插件简介 Operamasks-UI是一套基于JQuery的UI组件库，它提供了丰富的前端展示组件，统一的API体系和良好的可扩展性。 Operamasks-UI通过编写大量的javascript代码来对组件进行定义，并提供对方法、事件的支持，其代码风格与JQueryUI类似。如对Button的基本属性和事件定义使用如下的代码： $(#btn).omButton({ icons : {left:images/help.png,right:images/edit_add.png}, width : 150, Label : 按钮 disabled : disabled, onClick : function(event){ alert(你点击了按钮); } }); 对方法的调用使用形式如下代码： $(#btn).omButton(click); 而该文档中介绍的通过属性扩展方式是通过对html元素附加额外的属性来完成对组件的属性和事件定义，示例代码如下： button id=btn class=ui-button label=按钮 width=150 fn={onClick:function(){alert(你点击了按钮);}} left-icon=images/help.png right-icon=images/edit_add.png /button 对于组件的事件定义，除了可以通过扩展的fn属性将所有的事件以json格式进行定义，也可以对将每个事件做为一个独立的扩展属性进行定义，如下示例代码： button id=btn class=ui-button label=按钮 width=150 click=function(){alert(你点击了按钮);} left-icon=images/help.png right-icon=images/edit_add.png /button 需要说明的是，由于Operamasks-UI中的一些事件命名与html原生的事件重名，如omButton组件的onClick事件与html原生事件重名。在插件中对这种问题的处理办法是：为onClick事件提供一个别名，如上面示例代码中的”click”即为”onClick”的别名。 另外，在插件中，对于方法的调用，除了可以通过Operamasks-UI原生支持的代码形式，也可以直接通过组件ID以面向对象的方式来调用其方法，如下的示例代码： btn.click(); 插件初始化 通过属性扩展机制对组件定义完成之后，需要通过OMUI插件的initUI($config)函数告知OMUI对组件进行初始化。 $(document).ready(function() { initUI(); }); initUI函数可以接收一个JSON格式的参数，该参数可以对组件的一些属性进行预定义，如预定义btn的onClick事件： $(document).ready(function() { initUI({ btn:{ onClick:function(e){alert(通过initUI的初始化配置实现点击事件.);} } }); }); 在不同地方进行组件定义的优先级为：initUI进行预定义 通过扩展的fn定义 通过扩展的独立属性定义。 如同时在initUI()，fn属性，click属性中定义了一个按钮的onClick事件，则最终使用的是click属性定义的事件。 调用initUI函数对组件进行初始化时，根据HTML元素的class属性来判断所需的组件类型，如omButton需要的class属性为”ui-button”。 插件开发思想 通过该插件的使用，力求达到的目的是： 简化页面中的JSON和JS代码量，减少了维护的工作量 降低开发人员学习OMUI的难度 提供可插拔式的插件支持 能够方便地通过属性的是否输出或EL表达式等方式实现权限的控制 标签扩展的代码样式可以方便地通过代码生成器来达到快速生成代码的目的 这里的后两项可能需要结合特定的语言环境来实现，如java，asp，php等。 文档说明 本文档所指的OMUI插件指的就是基于Operamasks-UI，通过对HTML标签附加属性实现的插件。 文档中对所有已经扩展过的OM组件进行说明，包括属性、方法、事件，以及自行扩展的一些功能说明和使用示例。在无特别说明的情况下，组件的属性、方法、事件名称均与原生的组件保持一致。 对于插件的初始化机制，以及属性定义的优先级已经在插件简介一节中介绍过，后面不再对这些内容进行说明，重点关注于介绍组件