菜单是用户界面中常见的元素。在wafⅡ框架体系中, 菜单的应用可由菜单按钮(menuButton)、菜单选项(menuItem)、水平分割按钮(hsplitButton)相互组合来完成,以满足用户的设计需求。其中:
1、菜单按钮:用于触发打开下拉菜单事件的按钮控件,id为必要属性,需要在标签中设置属性值。
2、 菜单选项:下拉菜单中的菜单选项,caption为必要属性,需要在标签中进行设置属性值
3、 水平分割按钮:显示为一条横线,用于对menuItem进行分组
<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>
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);
<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);
//调用方法
waf("#id").wafMenuButton('method', parameter...);
waf("#id").wafMenuItem('method', parameter...);
//eg:更改事件
waf("#id").wafMenuButton("option","onchange",fn);
waf("#id").wafMenuItem("option","onchange",fn);
定义菜单按钮的id
定义菜单按钮的文字表述
定义菜单按钮是否为禁用状态,默认为false
定义菜单按钮的样式
定义菜单按钮的样式类
定义菜单按钮的隐藏状态,默认值为false
定义下拉菜单的宽度
定义按下tab键时控件获得焦点的顺序
定义文字左侧显示图标,属性值为class样式类名称。
用于绑定WebAction,执行actionBinding中定义的操作。
定义下拉菜单选项的id,必填属性
定义下拉菜单选项的文字表述
定义是否禁用下拉菜单选项,默认为false
定义下拉菜单选项的样式
定义下拉菜单选项的样式类
定义下拉菜单选项文字左侧的图标样式。
用于绑定WebAction,执行actionBinding中定义的操作。
定义下拉菜单选项的隐藏状态,默认值为false
获得或设置菜单按钮某属性的值,当value参数存在时,设置控件的property属性值,且无返回值,否则返回控件的property属性值.[参考样例]
获得或设置下拉菜单选项某属性的值,当value参数存在时,设置控件的property属性值,且无返回值,否则返回控件的property属性值.[参考样例]
当菜单按钮被点击时,将触发onclick 事件.[参考样例]
当下拉菜单选项被点击时,将触发onclick 事件.[参考样例]