5.按钮控件
5.1.按钮简介
<Input type="button" ...>即为按钮控件,Freeform支持的按钮种类比较多,可以有如下几种:
1.平坦按钮,即无凸出边界的按钮,语法为<Input type="button" style="flat" ...>;
2.平坦全透明按钮,和平坦按钮类似,但鼠标滑过时是透明的,语法为<Input type="button" style="flat,transparent" ...>;
3.带图标的按钮,按钮中可以有一个小图标,语法为<Input type="button" icon="../res/btn.zip#33.bmp" ...>,只要该icon指向有效的url, 就是带图标按钮;
4.下拉菜单按钮,和<Menus>下某Menu关联, 其外观如下图,语法为<Input type="button" menuID="menu1" ...>;
下拉菜单按钮可以是平坦按钮,也可以是非平坦按钮,只要定义了menuID,就是下拉菜单按钮;
这种按钮还可以通过设置 isMenuButtonStyle 属性,决定是否需要上图中的右侧的黑色小三角。
5.动态下拉菜单按钮,和下拉菜单按钮类似,但是其弹出的菜单是需要js动态生成或修改的,语法为<Input type="button" menuID="menu1" isDynamicMenu="true" ...>;
6.普通按钮,无平坦效果、无背景色定义、无图标、无下拉菜单的按钮就是普通按钮,普通按钮的外观由操作系统决定;
按钮按下时会触发ButtonClicked事件,对于下拉菜单按钮,当鼠标选中弹出菜单的某个菜单项,则触发MenuClicked事件。
5.2.动态下拉菜单按钮
下拉菜单按钮的弹出菜单是和XML描述文件中内置的<Menus>资源相关联的,但是在很多情况下,弹出什么样的下拉菜单并非事先能预知,而是需要在菜单弹出前的瞬间,收集某些状态,然后再来动态修改、或生成具体的下拉菜单。在这种情况下,必须采用动态下拉菜单按钮。
属性 isDynamicMenu 为 true 就表示是动态下拉菜单按钮, 动态下拉菜单按钮的原理分析如下:
1.当用户点击该按钮时,并不弹出菜单,而是触发MenuBeforePopup页面事件;
2.页面js须考虑修改或生成菜单,可以调用如下函数:
SetMenu() - 动态生成菜单
SetMenuItemProp() - 修改菜单项
DeleteMenuItem() - 删除菜单项
3.js最后必须调用PopupMenu( )函数,表示菜单可以弹出:
在Demo页中有具体的实例可供参考.