首页 > 代码库 > EasyUI学习之menu and button(菜单和按钮)

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

前言

    今天下午的天气感觉格外的气闷,整个人有一种黏糊糊的感觉,格外的不舒服。加之马上要放假了了,感觉自己完全坐不住呢(节前综合症么)。不过学习还是的继续的。

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

LinkButton(链接按钮)

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

Menu(菜单)

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

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

菜单项(menu item)

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

名称类型描述信息       默认值
idstring菜单项"id" 
textstring菜单项名称 
iconClsstring一个css类在菜单项右边显示一个16*16图标 
hrefstring设置点击菜单项的链接 
disableboolean定义是否禁止菜单项false
onclikfunction单击菜单项函数 

 

菜单属性


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

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

 

事件

名称属性描述信息                      
onShownone当一个菜单被显示的时候触发。
onHidenone当一个菜单被隐藏的时候触发。
onClickitem

当一个菜单被点击时触发。下面的例子显示了如何处理所有菜单项的点击事件:

<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也是可以的啦)。

名称参数描述信息                                                 
optionsnone返回菜单的options参数对象
showpos在一个特定的位置显示菜单
hidenone隐藏一个菜单
destroynone销毁一个菜单
getItemitemEl

获得菜单项数据并将其返回,数据包含以下属性:

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即可看到如下效果:

QQ截图20140603110900


setTextparam   

设置特定菜单的文本,‘param‘参数包含2个属性:

target:DOM对象,将要被设置的菜单项

text:字符串,新的文本值

一个简单的示例:

$(function () {
var item = $(‘#mm‘).menu(‘findItem‘, ‘Save‘);
$(‘#mm‘).menu(‘setText‘, {
target: item.target,
text: ‘Saving‘
});
});
原本的菜单项字符串属性值为"Save",执行上述代码之后变为了"Saving"这里就不再贴图了,可尝试之。

setIconparam

设置特定的菜单项的图标,‘param‘参数包含两个属性:

target:DOM对象,菜单项目。

iconCls:新的图标css类。

一个简单的例子:

$(‘#mm‘).menu(‘setIcon‘, {
	target: $(‘#m-open‘)[0],
	iconCls: ‘icon-closed‘
});


findItemtext

根据给定的text查找特定的菜单项,与getItem返回相同的数据

一个简单例子:

// find ‘Open‘ item and disable it
var item = $(‘#mm‘).menu(‘findItem‘, ‘Open‘);
$(‘#mm‘).menu(‘disableItem‘, item.target);


appenditemoptions

添加一个新的菜单项,参数表示新条目属性。默认情况下,添加的项目将成为一个顶级菜单项,附加的子菜单。附加的子菜单项,父属性应该设置为指定父条目元素,已经有字条目

‘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

移除指定的菜单项。
enableitemitemEl启用指定的菜单项。
disableitemitemEl禁用菜单项。

      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的属性,也有菜单按钮的独有属性。

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

 

方法

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

名称属性描述信息                    
optionsnone返回属性对行啊                                                       
disablenone禁用菜单按钮
enablenone启用菜单按钮
destroynone注销菜单按钮


使用方式

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重载默认值。

       依赖于菜单和链接按钮。

属性

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

方法

名称属性描述信息                                                                            
optionsnone返回属性对象
disablenone

禁用分隔按钮。示例:


$(‘#sb‘).splitbutton(‘disable‘);


enablenone启用分隔按钮
destroynone注销分隔按钮

使用及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!