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页中有具体的实例可供参考.