EasyUI笔记（四）菜单和按钮

本系列只列出一些常用的属性、事件或方法，具体完整知识请查看API文档

Menu（菜单）

菜单组件通常用于快捷菜单。他是构建其他菜单组件的必备基础组件。比如：menubutton和splitbutton。它还可以用于导航和执行命令。

1.通过标签创建菜单，给<div/>标签添加一个名为'easyui-menu'的类ID。每个菜单项都通过<div/>标签创建。我们可以添加'iconCls'属性来给菜单项定义一个图标显示到菜单项的左侧。添加'menu-sep'类ID菜单项将会生成一个菜单分割线。

1. <div id="mm" class="easyui-menu" style="width:120px;">
2. <div>New</div>
3. <div>
4. <span>Open</span>
5. <div style="width:150px;">
6. <div><b>Word</b></div>
7. <div>Excel</div>
8. <div>PowerPoint</div>
9. </div>
10. </div>
11. <div data-options="iconCls:'icon-save'">Save</div>
12. <div class="menu-sep"></div>
13. <div>Exit</div>
14. </div>

2.使用Javascript显示菜单项

1. $(document).on('contextmenu',function(e){
2. e.preventDefault();
3. //右键菜单显示要通过show方法
4. $("#menu-mm").menu('show',{
5. left:e.pageX,
6. top:e.pageY,
7. });
9. $("#menu-mm").menu({
10. onClick:function(item){
11. alert(item.name);
12. }
13. });
14. });

菜单方法

方法名	方法参数	描述
options	none	返回属性对象。
show	pos	显示菜单到指定的位置。'pos'参数有2个属性： left：新的左边距位置。 top：新的上边距位置。
hide	none	隐藏菜单。
destroy	none	销毁菜单。
getItem	itemEl	获取指定的菜单项。得到的是一个菜单项的DOM元素。下面的例子展示了如何根据ID获取指定的项： <div id="mm" class="easyui-menu" style="width:120px"> <div>New</div> <div id="m-open">Open</div> <div>Save</div> </div> var itemEl = $('#m-open')[0]; // 获取菜单项 var item = $('#mm').menu('getItem', itemEl); console.log(item);
setText	param	设置指定菜单项的文本。'param'参数包含2个属性： target：DOM对象，要设置值的菜单项。 text: 字符串，要设置的新文本值。 代码示例： var item = $('#mm').menu('findItem', '保存'); $('#mm').menu('setText', { target: item.target, text: '修改' });
setIcon	param	设置指定菜单项图标。'param'参数包含2个属性： target：DOM对象，要设置的菜单项。 iconCls：新的图标CSS类ID。 代码示例： $('#mm').menu('setIcon', { target: $('#m-open')[0], iconCls: 'icon-closed' });
findItem	text	查找的指定菜单项，返回的对象和getItem方法是一样的。 代码示例： // 查找“打开”项并禁用它 var item = $('#mm').menu('findItem', '打开'); $('#mm').menu('disableItem', item.target);
appendItem	options	追加新的菜单项，'options'参数代表新菜单项属性。默认情况下添加的项在菜单项的顶部。追加一个子菜单项，'parent'属性应该设置指定的父项元素，并且该父项元素必须是已经定义在页面上的。 代码示例： // 追加一个顶部菜单 $('#mm').menu('appendItem', { text: '新菜单项', iconCls: 'icon-ok', onclick: function(){alert('提示：新菜单项！')} }); // 追加一个子菜单项 var item = $('#mm').menu('findItem', '打开'); // 查找“打开”项 $('#mm').menu('appendItem', { parent: item.target, // 设置父菜单元素 text: '打开Excel文档', iconCls: 'icon-excel', onclick: function(){alert('提示：打开Excel文档！')} });
removeItem	itemEl	移除指定的菜单项。
enableItem	itemEl	启用菜单项。
disableItem	itemEl	禁用菜单项。

MenuButton（菜单按钮）

菜单按钮是下拉菜单的一部分。它伴随着linkbutton和menu组件。在用户点击linkbutton之前菜单是隐藏的，当用户用鼠标点击或移动到linkbutton上面的时候菜单才会显示。

 

1.通常菜单按钮通过标签创建

1. <a href="javascript:void(0)" id="mb" class="easyui-menubutton"
2. data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a>
3. <div id="mm" style="width:150px;">
4. <div data-options="iconCls:'icon-undo'">Undo</div>
5. <div data-options="iconCls:'icon-redo'">Redo</div>
6. <div class="menu-sep"></div>
7. <div>Cut</div>
8. <div>Copy</div>
9. <div>Paste</div>
10. <div class="menu-sep"></div>
11. <div data-options="iconCls:'icon-remove'">Delete</div>
12. <div>Select All</div>
13. </div>

2.使用Javascript创建菜单按钮

1. <a href="javascript:void(0)" id="mb">Edit</a>
2. <div id="mm" style="width:150px">
3. ...
4. </div>

1. $('#mb').menubutton({
2. iconCls: 'icon-edit',
3. menu: '#mm'
4. });

属性

菜单按钮属性扩展自linkbutton(按钮)，菜单按钮新增的属性如下：

属性名	属性值类型	描述	默认值
plain	boolean	为true时显示简易效果。	true
menu	string	用来创建一个对应菜单的选择器。	null
duration	number	定义鼠标划过按钮时显示菜单所持续的时间，单位为毫秒。	100

SplitButton（分割按钮）

类似菜单按钮，分割按钮也与linkbutton和菜单有关系。menubutton和splitbutton之间的区别是,splitbutton分为两部分。它只会在鼠标移动到splitbutton按钮右边的时候才会显示出“分割线”。

1.使用标签创建分割按钮。

1. <a href="javascript:void(0)" id="sb" class="easyui-splitbutton"
2. data-options="menu:'#mm',iconCls:'icon-ok'" onclick="javascript:alert('ok')">Ok</a>
3. <div id="mm" style="width:100px;">
4. <div data-options="iconCls:'icon-ok'">Ok</div>
5. <div data-options="iconCls:'icon-cancel'">Cancel</div>
6. </div>

2.使用Javascript创建分割按钮。

1. <a href="javascript:void(0)" id="sb" onclick="javascript:alert('ok')>Ok</a>
2. <div id="mm" style="width:100px;">
3. ...
4. </div>

1. $('#sb').splitbutton({
2. iconCls: 'icon-ok',
3. menu: '#mm'
4. });

属性

分割按钮属性扩展自linkbutton，分割按钮新增的属性如下：

属性名	属性值类型	描述	默认值
plain	boolean	设置为true将显示简洁效果。	true
menu	string	用来创建一个对应菜单的选择器。	null
duration	number	定义鼠标划过按钮时显示菜单所持续的时间，单位为毫秒。	100

实例代码下载

转载于:https://www.cnblogs.com/iwsx/p/7132393.html