码迷，mamicode.com
首页 > 其他好文 > 详细

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

时间：2015-04-03 22:18:08      阅读：196      评论：0      收藏：0      [点我收藏+]

标签：

前言

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

     原定计划这篇文章本来应该是关于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;">
<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("你点击了保存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!




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

标签：

原文地址：http://www.cnblogs.com/gcczhongduan/p/4391014.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！