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

前言

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

     原定计划这篇文章本来应该是关于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> </di