EasyUI笔记（四）菜单和按钮

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

Menu（菜单）

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

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

<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> 

2.使用Javascript显示菜单项

$(document).on('contextmenu',function(e){
		e.preventDefault();
		//右键菜单显示要通过show方法
		$("#menu-mm").menu('show',{
			left:e.pageX,
			top:e.pageY,
		});
		
		$("#menu-mm").menu({
			onClick:function(item){
				alert(item.name);
			}
		});
	});

菜单方法

方法名	方法参数	描述
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.通常菜单按钮通过标签创建

<a href="javascript:void(0)" id="mb" class="easyui-menubutton"     
        data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a>   
<div id="mm" style="width:150px;">   
    <div data-options="iconCls:'icon-undo'">Undo</div>   
    <div data-options="iconCls:'icon-redo'">Redo</div>   
    <div class="menu-sep"></div>   
    <div>Cut</div>   
    <div>Copy</div>   
    <div>Paste</div>   
    <div class="menu-sep"></div>   
    <div data-options="iconCls:'icon-remove'">Delete</div>   
    <div>Select All</div>   
</div> 

2.使用Javascript创建菜单按钮

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

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

属性

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

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

SplitButton（分割按钮）

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

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

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

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

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

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

属性

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

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

实例代码下载