10. 工具栏、菜单和消息框控件的使用。
EasyUI菜单由EasyUI-menubutton类指定。菜单是树型结构，即每个菜单项（menu item）之下还可以有子菜单项。主菜单和子菜单可以通过<div>的嵌套来实现，也可以通过主菜单的data-options选项中定义menu属性来指定子菜单。菜单项的图标可由iconCls属性指定，菜单项之间的分隔符由menu-sep类表示。简单的菜单定义举例如下：
<div id="mm" class=“easyui-menu" style="width:120px;">
<div>New</div>
<div>
<span>Open</span>
<div style="width:150px;">
<div><b>Word</b></div>
<div>Excel</div>
<div>PowerPoint</div>
</div>
</div>
<div data-options="iconCls:'icon-save'">Save</div>
<div class="menu-sep"></div>
<div>Exit</div>
</div>
菜单项对应的事件可以在主菜单（即class=“easyui-menu"的菜单）的data-options中指定，也可以按下列方法定义：
$('#mm').menu({
onClick:function(item){
alert(item.id);
}
});
消息框（messager）提供不同样式的信息提示框，包括警示（alert）、确认（confirm）、提示（prompt）、进展（progress）等。所有的消息框都是异步的。用户可以在与消息框交互后使用回调函数来完成一些动作。
本例在页面中定义一个工具栏、5个linkbutton按钮、一个菜单按钮及其下拉菜单条、一个右键菜单。在“新增”、“删除”和“保存”按钮事件中使用$.messager消息框进行信息提示和操作确认。本例程序运行界面如图2-8所示，其主要程序实现方法与过程如下：
图2-8 工具栏、菜单和消息框程序运行界面
①首先使用layout控件将屏幕分成上下两部分，在屏幕上方定义一个工具栏；在工具栏中定义若干个EasyUI-linkbutton按钮和一个EasyUI-menubutton菜单（“帮助”），每个按钮可定义一个事件。
<div id='layout' class=“easyui-layout" style="height:500px">
<div id='toolbar' class='EasyUI-panel' data-options="region:'north'"
style="overflow:hidden; background-color: #E0ECFF; height:30px; padding: 1px 1px 1px 10px;">
<a href="#" class="btn-separator"></a>
<a href="#" id="btnadd" xtype="button" class=“easyui-linkbutton" data-options="iconCls:'addIcon',
plain:true, onClick:fn_add" style="">新增</a>
<a href="#" id="btnedit" xtype="button" class=“easyui-linkbutton" data-options="iconCls:'editIcon',
plain:true" style="">修改</a>
<a href="#" class="btn-separator"></a>
<a href="#" id="btndelete" xtype="button" class=“easyui-linkbutton" data-options="iconCls:'deleteIcon',
plain:true, onClick:fn_delete" style="">删除</a>
<a href="#" class="btn-separator"></a>
<a href="#" id="btnsave" xtype="button" class=“easyui-linkbutton" data-options="iconCls:'saveIcon',
plain:true, onClick:fn_save" style="">保存</a>
<a href="#" class="btn-separator"></a>
<a href="#" id="btnrefresh" xtype="button" class=“easyui-linkbutton"
data-options="iconCls:'refreshIcon',
plain:true" style="">刷新</a>
<a href="#" class="btn-separator"></a>
<a href="#" xtype="button" class=“easyui-menubutton" data-options="menu:'#btnhelp_menuitem',
iconCls:'helpIcon'">帮助</a>
</div>
<div id='bottom' data-options="region:'center'" style="padding: 2px 0px 0px 2px; "></div>
</div>
②使用层嵌套方法，定义上面“帮助”菜单（btnhelp_menuitem）的两个子菜单项。
<div id="btnhelp_menuitem" style="width:150px;">
<div id="btnbookonline" data-options="iconCls:'pdfIcon'">操作说明</div>
<div id="btndemo" data-options="iconCls:'wordIcon'">实例演示</div>
</div>
③定义一个右键菜单myMenu1及其它的点击事件fn_myMenu1Click。该右键菜单的子菜单项通过appendItem()方法在javascript语句中动态添加实现。
<div id="myMenu1" class=“easyui-menu" data-options="onClick: fn_myMenu1Click" style="width: auto;"></div>
④利用appendItem()方法，逐个添加右键菜单myMenu1的六个子菜单项和两个菜单的分隔线。
$("#myMenu1").menu('appendItem', {text: '新增结点',id: 'mnadd', iconCls:'addIcon'} );
$("#myMenu1").menu('appendItem', {text: '修改记录',id: 'mnedit', iconCls:'editIcon'} );
$("#myMenu1").menu('appendItem',
{text: '删除记录',id: 'mndelete', iconCls:'deleteIcon', onclick: function(){ fn_delete(); }});
$("#myMenu1").menu('appendItem', {separator:true});
$("#myMenu1").menu('appendItem',
{text: '保存记录',id: 'mnsave', iconCls:'saveIcon', onclick: function(){ fn_save(); }});
$("#myMenu1").menu('appendItem',{separator:true});
$("#myMenu1").menu('appendItem',{text: '重置',id: 'mnreset', iconCls:'resetIcon'} );
$("#myMenu1").menu('appendItem',{text: '刷新',id: 'mnrefresh', iconCls:'refreshIcon'});
⑤绑定（bind）“刷新”按钮和菜单的click事件，这是另一种定义按钮和菜单事件的方法。
$("#btnrefresh,#mnrefresh").bind('click', function(e){ fn_refresh(e); });
⑥定义表单的右键点击事件。在表单myForm1中通过绑定其contextmenu事件，采用菜单的show()方法，实现右键菜单的弹出和触发。这里, e.preventDefault()用于禁止系统原有菜单的显示。
$('#myForm1').bind('contextmenu',function(e){
e.preventDefault(); //关闭系统原有的右键菜单
$('#myMenu1').menu('show', {
left: e.pageX,
top: e.pageY
});
});
⑦编写各按钮和菜单的click点击事件。点击“新增”按钮，使用$.messager.show()缓缓弹出一个消息框；点击“保存”按钮，使用$.messager.alert()弹出一个信息提示框；点击“删除”按钮，使用$.messager.confirm()弹出一个信息确认框；点击“重置”菜单，在重置表单各个控件值之后，使用$.messagershow()缓缓弹出一个信息提示框，2秒钟后消息框自动消失。
function fn_add(){
$.messager.show({
title:'系统提示',
msg:'系统已切换至新增记录模式。<br>表单已经清空。',
showType:'show',
width:200,
timeout:0,
style:{
top: 100
}
});
}
function fn_save(){
$.messager.alert('系统提示','数据已经保存成功！','info'); //icon可选项：error、question、warning
}
function fn_delete(){
$.messager.confirm('系统提示','是否确定删除记录？',function(r){
if (r){
alert('确定删除');
}
});
}
function fn_refresh(){
alert('refresh');
}
function fn_myMenu1Click(item){
if (item.id=='mnreset'){
$("#main")[0].reset();
$.messager.show({
title:'系统提示',
width:200,
msg:'表单数据已经被重置。',
timeout:2000,
showType:'slide'
});
}
}