菜单按钮

简介

菜单是用户界面中常见的元素。在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. 动态化