Operamasks-UI扩展插件使用指南V1.0.doc

Error!:******@Date:2013-6-4Version:-UI扩展插件使用指南(基于Operamasks-)Operamasks-UI引言插件简介Operamasks-UI是一套基于JQuery的UI组件库,它提供了丰富的前端展示组件,统一的API体系和良好的可扩展性。Operamasks-UI通过编写大量的javascript代码来对组件进行定义,并提供对方法、事件的支持,其代码风格与JQueryUI类似。如对Button的基本属性和事件定义使用如下的代码:$('#btn').omButton({icons:{left:'images/',right:'images/'},width:150,Label:'按钮'disabled:'disabled',onClick:function(event){alert('你点击了按钮');}});对方法的调用使用形式如下代码:$('#btn').omButton("click");而该文档中介绍的通过属性扩展方式是通过对html元素附加额外的属性来完成对组件的属性和事件定义,示例代码如下:<buttonid="btn"class="ui-button"label="按钮"width="150"fn="{onClick:function(){alert('你点击了按钮');}}"left-icon="images/"right-icon="images/"></button>对于组件的事件定义,除了可以通过扩展的fn属性将所有的事件以json格式进行定义,也可以对将每个事件做为一个独立的扩展属性进行定义,如下示例代码:<buttonid="btn"class="ui-button"label="按钮"width="150"click="function(){alert('你点击了按钮');}"left-icon="images/"right-icon="images/"></button>需要说明的是,由于Operamasks-UI中的一些事件命名与html原生的事件重名,如omButton组件的onClick事件与html原生事件重名。在插件中对这种问题的处理办法是:为onClick事件提供一个别名,如上面示例代码中的”click”即为”onClick”的别名。另外,在插件中,对于方法的调用,除了可以通过Operamasks-UI原生支持的代码形式,也可以直接通过组件ID以面向对象的方式来调用其方法,如下的示例代码:();插件初始化通过属性扩展机制对组件定义完成之后,需要通过OMUI插件的initUI($config)函数告知OMUI对组件进行初始化。$(document).ready(function(){ initUI();});initUI函数可以接收一个JSON格式的参数,该参数可以对组件的一些属性进行预定义,如预定义btn的onClick事件:$(document).ready(function(){ initUI({ "btn":{ onCli