OperamasksUI扩展插件使用指南V10Word文档下载推荐.docx
《OperamasksUI扩展插件使用指南V10Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《OperamasksUI扩展插件使用指南V10Word文档下载推荐.docx（11页珍藏版）》请在冰豆网上搜索。
{left:
'
images/help.png'
right:
images/edit_add.png'
},
width:
150,
Label:
'
按钮'
disabled:
disabled'
onClick:
function（event）{
alert（'
你点击了按钮'
）;
}
}）;
对方法的调用使用形式如下代码：
）.omButton（"
click"
而该文档中介绍的通过属性扩展方式是通过对html元素附加额外的属性来完成对组件的属性和事件定义，示例代码如下：
<
buttonid="
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格式进行定义，也可以对将每个事件做为一个独立的扩展属性进行定义，如下示例代码：
click="
}"
需要说明的是，由于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事件：
initUI（{
"
:
{
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等。
1.2.文档说明
本文档所指的OMUI插件指的就是基于Operamasks-UI，通过对HTML标签附加属性实现的插件。
文档中对所有已经扩展过的OM组件进行说明，包括属性、方法、事件，以及自行扩展的一些功能说明和使用示例。
在无特别说明的情况下，组件的属性、方法、事件名称均与原生的组件保持一致。
对于插件的初始化机制，以及属性定义的优先级已经在插件简介一节中介绍过，后面不再对这些内容进行说明，重点关注于介绍组件所支持的功能。
各组件介绍中所指的【支持的原生方法】即为可以通过组件ID以面向对象方式支持调用的方法，方法的入参请参考OM组件的方法介绍。
1.3.版权声明
任何组织和个人均可以在未经本文档原作者同意的情况下，对该文档进行任意的散播和使用，但不得对该文档进行销售或捆绑销售，不得对文档的版本信息（包括作者、邮箱、QQ等信息）进行篡改。
本文档原作者Dylan对该文档拥有署名权和所有权。
2.
omButton
2.1.组件扩展
类Class
ui-button
属性
支持的原生属性：
"
label"
"
width"
disabled"
插件扩展的属性：
属性名
类型
描述
left-icon
string
左侧的图标，同OM组件icons[left]
right-icon
右侧的图标，同OM组件icons[right]
方法
支持的原生方法
changeIcons"
changeLabel"
disable"
enable"
事件
支持的原生事件
onClick"
对onClick事件的属性扩展通过别名”click”实现，但也可以通过initUI预定义或通过fn属性进行定义。
插件扩展的事件：
click
onClick事件别名，同OM组件的onClick事件
2.2.使用说明
在下面这个示例中，分别定义了4个omButton，onClick事件分别通过fn属性，initUI函数预定义，click属性实现，并演示了通过对象ID调用其函数。
<
script>
varchangeCount=0;
functionchangeLabel（）{
btn5.changeIcons（{
right:
（changeCount++%2==0）?
images/down.png"
}）
functiondisable（）{
btn5.disable（）;
functionenable（）{
btn5.enable（）;
functionclick3（）{
alert（"
通过全局的事件及fn扩展属性实现点击事件."
$（document）.ready（function（）{
btn2"
label:
按钮2（标签通过预定义的配置实现）"
width:
320,
}）;
/script>
body>
buttonclass="
id="
btn1"
function（e）{alert（'
按钮1的事件通过扩展的属性实现'
按钮1"
right-icon="
left-icon="
btn3"
click3}"
按钮3"
!
---->
br/>
aclass="
按钮5"
btn5"
按钮5的事件通过扩展属性fn实现'
100"
/a>
inputtype="
button"
value="
更改btn5的标签"
onclick="
changeLabel（）;
禁用"
disable（）;
启用"
enable（）;
/body>
页面效果如下图：
3.omButtonbar
3.1.组件扩展
ui-buttonbar
3.2.使用说明
omButtonbar组件的核心不是该组件本身，而应该是该组件中所包含的omButton，在OMUI插件中，将omButton定义在omButtonbar所在HTML元素的内部，示例代码如下：
divclass="
ui-buttonbar"
300"
按钮1'
按钮2'
按钮2"
按钮3'
/div>
4.omMenu
4.1.组件扩展
ui-menu
contextMenu"
dataSource"
maxWidth"
minWidth"
conta
升级会员 