EasyUI学习之menu and button(菜单和按钮)
前言
今天下午的天气感觉格外的气闷,整个人有一种黏糊糊的感觉,格外的不舒服。加之立即要放假了了
,感觉自己全然坐不住呢(节前综合症么)。只是学习还是的继续的。
原定计划这篇文章本来应该是关于searchBox的介绍的,只是鉴于easyloader里面的依赖关系,searchBox依赖于menubutton,menubutton又依赖于menu和linkbutton。于是乎,打算先对easyui组件中的菜单和按钮进行学习了解。
LinkButton(链接button)
对于链接button因为前面已经做过相关介绍了,这里就不再赘述了.參考"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;"> 之后我们在打开chrome浏览器按F12就可以看到例如以下效果:
|
| setText | param |
设置特定菜单的文本,'param'參数包括2个属性: target:DOM对象,将要被设置的菜单项 text:字符串,新的文本值 一个简单的演示样例: $(function () { |
| 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 |
| 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("你点击了保存button");
}
}
});
2、显示菜单
当一个菜单创建完成后,默认情况下它是隐藏而不可见的,调用show方法能够显示菜单
$('#mm').menu('show', {
left: 200,
top: 100
}); 对于菜单的学习基本上也就这样了,更加具体的内容和Demo能够去easyui官网了解学习。
MenuButton(菜单button)
有了linkbutton和menu的基础之后接下来就能够进入到MenuButton的学习中了。菜单button能够说是下拉菜单的一部分，由一个链接button盒菜单组成。这个链接菜单默认将隐藏显示在菜单内。当用户点击或鼠标移动到链接button时,菜单将显示且同意点击它。
继承$.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 | 定义鼠标划过button时显示菜单所须要的时间,单位毫秒(几秒之后显示,点击button就可以立即显示) | 100 |
方法
这些方法继承至linkbutton,以下的是为splitbutton加入和重写的。
| 名称 | 属性 | 描写叙述信息 |
| options | none | 返回属性对行啊 |
| disable | none | 禁用菜单button |
| enable | none | 启用菜单button |
| destroy | none | 注销菜单button |
使用方式
1、通常情况下使用html创建button:
<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(分隔button)
移动到分隔或者点击才下拉的菜单button,分隔button有链接button和菜单组长。菜单button被分为两部分。当鼠标移动到分隔符上,一个split会显示出来。菜单显示时鼠标光标位于链接button邮冊部分。
继承$.fn.linkbutton.defaults,使用$.fn.splitbutton.defaults重载默认值。
依赖于菜单和链接button。
属性
属性继承链接button,也有其独有属性,独有属性和菜单按是一样的,这里我就不再展示了,可參考上面菜单button的属性表。
方法
| 名称 | 属性 | 描写叙述信息 |
| options | none | 返回属性对象 |
| disable | none |
禁用分隔button。演示样例:
$('#sb').splitbutton('disable');
|
| enable | none | 启用分隔button |
| destroy | none | 注销分隔button |
使用及Demo
1、使用标签创建分隔button:
<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的效果和菜单button的效果很相似,仅仅是细节上spliteButton仅仅有点击或者鼠标移动到分隔符才干下拉菜单。对于其Demo,相同官方的demo十分简单易懂,这里我也就不在演示了。OVER!
