菜单按钮

简介

菜单是用户界面中常见的元素。在wafⅡ框架体系中， 菜单的应用可由菜单按钮（menuButton）、菜单选项（menuItem）、水平分割按钮（hsplitButton）相互组合来完成，以满足用户的设计需求。其中：
1、菜单按钮：用于触发打开下拉菜单事件的按钮控件，id为必要属性，需要在标签中设置属性值。
2、 菜单选项：下拉菜单中的菜单选项，caption为必要属性，需要在标签中进行设置属性值
3、 水平分割按钮：显示为一条横线，用于对menuItem进行分组

使用方法

2.1 静态框架使用方法 仅EAS7.5版本
<wafctrl:menuButton id="mb_e" caption="查看" onclick="show('查看')">
    <wafctrl:menuItem caption="上查" actionBinding="${actionBinding}">
        <wafctrl:menuItem caption="上查1" onclick="show('上查1')"></wafctrl:menuItem>
        <wafctrl:menuItem caption="上查2"></wafctrl:menuItem>
    </wafctrl:menuItem>
    <wafctrl:menuItem caption="下查"></wafctrl:menuItem>
</wafctrl:menuButton>
2.2 JS动态创建 EAS8.0+
var itemOpts = {id:"menuButton1",style:"height:50px",caption:"menuButton"};
var menubuttonDom = waf.createDOM("menuButton", itemOpts);
waf.appendDOM(waf("body"), menubuttonDom);
waf.initComponent("menuButton", itemOpts, menubuttonDom);

var itemItemOpts = {id:"menuItem1",style:"height:50px",caption:"menuItem1"};
var itemDom = waf.createDOM("menuItem", itemItemOpts);
waf("#menuButton1").wafMenuButton("appendChildren", itemDom);
waf.initComponent("menuItem", itemItemOpts, itemDom);
2.3 通用DOM创建 EAS8.0+
<a id="btnID1" class="ui-menubutton ui-linkbutton enter2tab" ctrlrole="menuButton" data-domcreated="true" accesskey="" style="" tabindex="0" aria-haspopup="true" aria-owns="btnID1_ul">
    <span class="ui-lb-text">工作流</span>
    <span class="ui-menubtn-right icondefault ui-icon-triangle-1-s ui-menubtn-right-triangle" style="display: inline-block;"></span>
</a>
$("#btnID1").wafMenuButton(options);

<a id="menuItemID" tabindex="-1" role="menuitem" ctrlrole="menuItem" accesskey="" class="ui-a-menuitem ui-linkbutton" data-domcreated="true" style="">
    <span class="ui-lb-icon" hasicon="false" style="display: inline;">
    </span><span class="ui-lb-text">菜单选项</span>
</a>
$("#menuItemID").wafMenuItem(options);
2.4 方法&事件使用 EAS7.5+
//调用方法
waf("#id").wafMenuButton('method', parameter...);
waf("#id").wafMenuItem('method', parameter...);
//eg:更改事件
waf("#id").wafMenuButton("option","onchange",fn);
waf("#id").wafMenuItem("option","onchange",fn);

属性说明

菜单属性

id String 缺省值: null 不可以在运行期改变 EAS7.5+

定义菜单按钮的id

caption String 缺省值: null EAS7.5+

定义菜单按钮的文字表述

disabled Boolean 缺省值: false EAS7.5+

定义菜单按钮是否为禁用状态，默认为false

style String 缺省值: null EAS7.5+

定义菜单按钮的样式

tagClass String 缺省值: null EAS7.5+

定义菜单按钮的样式类

hidden Boolean 缺省值: false EAS7.5+

定义菜单按钮的隐藏状态，默认值为false

定义下拉菜单的宽度

tabindex Integer 缺省值: 0 EAS7.5+

定义按下tab键时控件获得焦点的顺序

iconCls String 缺省值: null EAS7.5+

定义文字左侧显示图标，属性值为class样式类名称。

actionBinding Object 缺省值: null 不可以在运行期改变 EAS7.5+

用于绑定WebAction，执行actionBinding中定义的操作。

菜单项属性

id String 缺省值: null 不可以在运行期改变 EAS7.5+

定义下拉菜单选项的id，必填属性

caption String 缺省值: null EAS7.5+

定义下拉菜单选项的文字表述

disabled Boolean 缺省值: false EAS7.5+

定义是否禁用下拉菜单选项，默认为false

style String 缺省值: null EAS7.5+

定义下拉菜单选项的样式

tagClass String 缺省值: null EAS7.5+

定义下拉菜单选项的样式类

iconCls String 缺省值: null EAS7.5+

定义下拉菜单选项文字左侧的图标样式。

actionBinding Object 缺省值: null 不可以在运行期改变 EAS7.5+

用于绑定WebAction，执行actionBinding中定义的操作。

hidden Boolean 缺省值: false EAS7.5+

定义下拉菜单选项的隐藏状态，默认值为false

方法说明

菜单方法

​option 参数: (property[,value]) 返回值类型: (any) EAS7.5+

获得或设置菜单按钮某属性的值，当value参数存在时，设置控件的property属性值，且无返回值，否则返回控件的property属性值.[参考样例]

  • 参数说明:
        - property：必要参数，菜单按钮的属性
        - value：可选参数，菜单按钮的属性值
  • 返回值说明：
        - 当value参数不存在时，有返回值，该返回值为与property对应的属性值，可以是任意类型的javascript对象。

菜单项方法

​option 参数: (property[,value]) 返回值类型: (any) EAS7.5+

获得或设置下拉菜单选项某属性的值，当value参数存在时，设置控件的property属性值，且无返回值，否则返回控件的property属性值.[参考样例]

  • 参数说明:
        - property：必要参数，下拉菜单选项的属性
        - value：可选参数，下拉菜单选项的属性值
  • 返回值说明：
        - 当value参数不存在时，有返回值，该返回值为与property对应的属性值，可以是任意类型的javascript对象。

事件说明

菜单事件

onclick 参数:(none) 返回值类型: (none) EAS7.5+

当菜单按钮被点击时，将触发onclick 事件.[参考样例]

菜单项事件

onclick 参数:(none) 返回值类型: (none) EAS7.5+

当下拉菜单选项被点击时，将触发onclick 事件.[参考样例]

样例集合

  1. 菜单按钮示例
  2. 菜单选项示例
  3. 综合示例
  4. 动态化