EasyUI学习之menu and button(菜单和按钮)

时间：2014-06-07 14:37:56 阅读：501 评论：0 收藏：0 [点我收藏+]

前言

今天下午的天气感觉格外的气闷,整个人有一种黏糊糊的感觉,格外的不舒服。加之马上要放假了了 bubuko.com,布布扣

,感觉自己完全坐不住呢(节前综合症么)。不过学习还是的继续的。

原定计划这篇文章本来应该是关于searchBox的介绍的,不过鉴于easyloader里面的依赖关系,searchBox依赖于menubutton,menubutton又依赖于menu和linkbutton。于是乎,打算先对easyui组件中的菜单和按钮进行学习了解。

LinkButton(链接按钮)

对于链接按钮由于前面已经做过相关介绍了,这里就不再赘述了.参考"EasyUI基础入门之pagination"即可。

Menu(菜单)

使用$.fn.menu.defaults重载默认值。

菜单通常是用于上下文菜单的。这是基本组件构建其他菜单组件如menubutton、splibutton。它还可以用于导航和执行命令。

菜单项(menu item)

菜单项代表的是一个单独的项目,是显示在一个菜单里的。包含如下属性:

名称	类型	描述信息	默认值
id	string	菜单项"id"
text	string	菜单项名称
iconCls	string	一个css类在菜单项右边显示一个16*16图标
href	string	设置点击菜单项的链接
disable	boolean	定义是否禁止菜单项	false
onclik	function	单击菜单项函数

菜单属性

到最新版本,菜单具有如下的一些属性:

名称	类型	描述信息	默认值
zIndex	number	菜单的z-index样式，从第一个菜单开始递增(默认值如此大,基本保证了所有菜单项在最上层)	11000000
left	number	菜单的左边距	0
top	number	菜单的顶边距	0
minWidth	number	菜单的最小宽度	120
hideOnUnhover	boolean	当设置为true时,鼠标退出时自动的隐藏菜单	true

事件

名称	属性	描述信息
onShow	none	当一个菜单被显示的时候触发。
onHide	none	当一个菜单被隐藏的时候触发。
onClick	item	当一个菜单被点击时触发。下面的例子显示了如何处理所有菜单项的点击事件: <div class="easyui-menu" data-options="onClick:menuHandler" style="width:120px;"> <div data-options="name:‘new‘">New</div> <div data-options="name:‘save‘,iconCls:‘icon-save‘">Save</div> <div data-options="name:‘print‘,iconCls:‘icon-print‘">Print</div> <div class="menu-sep"></div> <div data-options="name:‘exit‘">Exit</div> </div> <script type="text/javascript"> function menuHandler(item){ alert(item.name) } </script>

方法

对菜单的操作都会有一些方法,比如打开"File"菜单,这一操作什么时候被触发,了解这些在处理起来会更加的心应手(后期查API也是可以的啦)。

名称	参数	描述信息
options	none	返回菜单的options参数对象
show	pos	在一个特定的位置显示菜单
hide	none	隐藏一个菜单
destroy	none	销毁一个菜单
getItem	itemEl	获得菜单项数据并将其返回,数据包含以下属性: target:DOM对象,菜单项目。 id:字符串,分配给元素的ID。 text：字符串,菜单项的文本。 href:字符串,超链接的地址。 disabled:boolean,菜单项是否启用。 onclick:function,点击菜单时将执行的函数。 iconCls:字符串,图标css类。下面是一个简单的例子: <div id="mm" class="easyui-menu" style="width:120px;"> <div id="m-new">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> var itemEl = $(‘#m-new‘)[0]; // the menu item element var item = $(‘#mm‘).menu(‘getItem‘, itemEl); console.log(item); console.info(item); 之后我们在打开chrome浏览器按F12即可看到如下效果:
setText	param	设置特定菜单的文本,‘param‘参数包含2个属性: target:DOM对象,将要被设置的菜单项 text:字符串,新的文本值一个简单的示例: $(function () { var item = $(‘#mm‘).menu(‘findItem‘, ‘Save‘); $(‘#mm‘).menu(‘setText‘, { target: item.target, text: ‘Saving‘ }); }); 原本的菜单项字符串属性值为"Save",执行上述代码之后变为了"Saving"这里就不再贴图了,可尝试之。
setIcon	param	设置特定的菜单项的图标,‘param‘参数包含两个属性: target:DOM对象,菜单项目。 iconCls:新的图标css类。一个简单的例子: $(‘#mm‘).menu(‘setIcon‘, { target: $(‘#m-open‘)[0], iconCls: ‘icon-closed‘ });
findItem	text	根据给定的text查找特定的菜单项,与getItem返回相同的数据。一个简单例子: // find ‘Open‘ item and disable it var item = $(‘#mm‘).menu(‘findItem‘, ‘Open‘); $(‘#mm‘).menu(‘disableItem‘, item.target);
appenditem	options	添加一个新的菜单项,参数表示新条目属性。默认情况下,添加的项目将成为一个顶级菜单项，附加的子菜单。附加的子菜单项,父属性应该设置为指定父条目元素,已经有字条目。 ‘param‘参数包含如下属性: parent:待添加新菜单的DOM对象,如果没有被设置,新菜单项将作为顶级菜单添加。 text:字符串,菜单项文本。 href:字符串,超链接地址。 onclick:字符串或者函数,当用户点击菜单项时将要被执行的脚本代码。 iconCls:图标类。一个简单的示例: // append a top menu item $(‘#mm‘).menu(‘appendItem‘, { text: ‘New Item‘, iconCls: ‘icon-ok‘, onclick: function () { alert(‘New Item‘) } }); // append a sub menu item var item = $(‘#mm‘).menu(‘findItem‘, ‘Open‘); // find ‘Open‘ item $(‘#mm‘).menu(‘appendItem‘, { parent: item.target, // the parent item element text: ‘Open Excel‘, iconCls: ‘icon-excel‘, onclick: function () { alert(‘Open Excel‘) } });
removeitem	itemEl	移除指定的菜单项。
enableitem	itemEl	启用指定的菜单项。
disableitem	itemEl	禁用菜单项。

Tips: 上面代码示例中使用了console.info(console.log),console是控制台打印日志信息的,主要是用于调试的。这里也是建立使用console方式来调试(FF,Chrome)。新手一般使用alert进行调试，这样不仅会是程序中断执行(如果alert在loop中,呵呵累死你),而且打印的信息太简单，并不适合调试。

console可以完美纠正。

使用menu

1、创建菜单

使用html标签创建菜单必须对<div>标签引用‘easyui-menu‘类,每个菜单项都将使用<div>标签创建。为菜单添加‘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>

使用脚本创建菜单并且监听‘onClick‘事件。

$('#mm').menu({
 onClick: function (item) {
 if(item.text=="保存")
 {
   alert("你点击了保存按钮"); 
 }
 }
 });

2、显示菜单

当一个菜单创建完毕后,默认情况下它是隐藏而不可见的,调用show方法可以显示菜单

$('#mm').menu('show', {   
  left: 200,   
  top: 100   
});

对于菜单的学习基本上也就这样了,更加详细的内容和Demo可以去easyui官网了解学习。

MenuButton(菜单按钮)

有了linkbutton和menu的基础之后接下来就可以进入到MenuButton的学习中了。菜单按钮可以说是下拉菜单的一部分，由一个链接按钮盒菜单组成。这个链接菜单默认将隐藏显示在菜单内。当用户点击或鼠标移动到链接按钮时,菜单将显示且允许点击它。

继承$.fn.linkbutton.defaults,使用$.fn.menubutton重载默认值。

依赖于menu和linkbutton

属性

继承linkbutton的属性,也有菜单按钮的独有属性。

名称	类型	描述信息	默认值
plain	boolean	设置为true的时候将显示简洁效果(链接菜单没有边框)	true
menu	string	用来创建一个相应菜单的选择器	null
menuAlign	string	菜单的对齐方式,从1.3.6开始,可选值为left、right	left
duration	number	定义鼠标划过按钮时显示菜单所需要的时间,单位毫秒(几秒之后显示,点击按钮即可马上显示)	100

方法

这些方法继承至linkbutton,下面的是为splitbutton添加和重写的。

名称	属性	描述信息
options	none	返回属性对行啊
disable	none	禁用菜单按钮
enable	none	启用菜单按钮
destroy	none	注销菜单按钮

使用方式

1、通常情况下使用html创建按钮:

<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 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>
<script>
	$(function () {
		$('#mb').menubutton({
			iconCls: 'icon-edit',
			menu: '#mm'
		});

	});
</script>

关于一些demo,这里就不再做演示了,官网的例子也是比较简单易懂的啦。

SlitButton(分隔按钮)

移动到分隔或者点击才下拉的菜单按钮,分隔按钮有链接按钮和菜单组长。菜单按钮被分为两部分。当鼠标移动到分隔符上,一个split会显示出来。菜单显示时鼠标光标位于链接按钮邮册部分。

继承$.fn.linkbutton.defaults,使用$.fn.splitbutton.defaults重载默认值。

依赖于菜单和链接按钮。

属性

属性继承链接按钮,也有其独有属性,独有属性和菜单按是一样的,这里我就不再展示了,可参考上面菜单按钮的属性表。

方法

名称	属性	描述信息
options	none	返回属性对象
disable	none	禁用分隔按钮。示例: $(‘#sb‘).splitbutton(‘disable‘);
enable	none	启用分隔按钮
destroy	none	注销分隔按钮

使用及Demo

1、使用标签创建分隔按钮:

<head>
	<meta charset="UTF-8">
	<title>Basic Draggable - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css">
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css">
	<script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
	<script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
</head>
<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、使用脚本创建:

<a href="javascript:void(0)" id="sb" 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>
<script>
	$(function () {
		$('#sb').splitbutton({
			iconCls: 'icon-ok',
			menu: '#mm'
		});

	});
</script>

其实,spliteButton的效果和菜单按钮的效果非常相似,只是细节上spliteButton只有点击或者鼠标移动到分隔符才能下拉菜单。对于其Demo,同样官方的demo十分简单易懂,这里我也就不在演示了。OVER!

EasyUI学习之menu and button(菜单和按钮),布布扣,bubuko.com

EasyUI学习之menu and button(菜单和按钮)

原文：http://blog.csdn.net/lcore/article/details/28390559

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)