easyUI Menu

@author YHC

覆盖默认值$.fn.menu.defaults

这个menu通常用来做上下文菜单,这个是用来构建其他菜单组件的基本组件,例如menubutton 和splitbutton,也可以使用两个导航来执行命令.


使用示例

创建 Menu
通过标记创建menu,应该添加'easyui-menu' 样式给div标记,所有的菜单项都可以通过div标记创建,我们添加一个'iconCls'属性给菜单选项
定义一个icon他将显示在菜单项的左边,添加'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>
通过编程方式创建menu以及监听'onClick'事件:
$('#mm').menu({  
    onClick:function(item){  
        //...  
    }  
});
显示 Menu
当menu已经创建,是隐藏的没有显示,调用'show'方法显示menu
$('#mm').menu('show', {  
  left: 200,  
  top: 100  
});

Menu 选项

这个menu item 代表的是一个单独的选项它显示在menu(菜单的里面). 它包含一下属性:

Name Type Description Default
id string menu选项的id属性.  
text string 选项文本.  
iconCls string 一个Css样式,显示一个16*16 icon 在选项的左边.  
href string 这是页面连接地址位置当点击菜单选项的时候.  
disabled boolean 定义menu选项是否禁用. false
onclick function 这个函数当点击菜单选项的时候执行.  

Menu 属性

Name Type Description Default
zIndex number 菜单的z-index 样式,从这个值开始增加. 110000
left number 菜单左边的位置. 0
top number 菜单顶部的位置. 0

Menu 事件

Name Parameters Description
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>

Menu 方法

Name Parameter Description
show pos 显示一个菜单在一个特定的位置上.
pos参数有两个属性:
left: 新的左边的位置.
top:新的顶部的位置.
hide none 隐藏一个菜单.
getItem itemEl 得到菜单项属性,包含一个 'target'属性指定该项的DOM元素. 以下示例展示如何通过id得到一个特定的菜单项 : 
<div id="mm" class="easyui-menu" style="width:120px">
	<div>New</div>
	<div id="m-open">Open</div>
	<div>Save</div>
</div>

var itemEl = $('#m-open')[0];  // 菜单项元素
var item = $('#mm').menu('getItem', itemEl);
console.log(item);
setText param 设置一个特定的菜单项的文本.  'param'参数包含两个属性:
target: DOM 对象, 被设置的菜单项的DOM元素.
text: 字符串, 新的text值.

代码示例:

var item = $('#mm').menu('findItem', 'Save');
$('#mm').menu('setText', {
	target: item.target,
	text: 'Saving'
});
setIcon param 设置特定的菜单项的icon.  'param' 包含两个属性:
target: DOM 对象,菜单项的DOM元素.
iconCls: 新的 icon 样式.

代码示例:

$('#mm').menu('setIcon', {
	target: $('#m-open')[0],
	iconCls: 'icon-closed'
});
findItem text 查找特定的菜单项,返回的对象个getItem方法返回的一样.

代码示例:

// find 'Open' item and disable it
var item = $('#mm').menu('findItem', 'Open');
$('#mm').menu('disableItem', item.target);
appendItem options 附加一个新的菜单项,  'options'参数指定一个新的菜单项的属性.默认添加的菜单项将成为顶级菜单项.添加子菜单项,一个paren属性应该设置一个特定的parent菜单项元素,该项应该是当前菜单已有的子项.

代码示例:

// 附加顶级菜单项
$('#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');  // 查找'Open' 菜单项
$('#mm').menu('appendItem', {
	parent: item.target,  // parent菜单项元素
	text: 'Open Excel',
	iconCls: 'icon-excel',
	onclick: function(){alert('Open Excel')}
});
removeItem itemEl 移除一个特定的菜单项.
enableItem itemEl 启用一个菜单项.
disableItem itemEl 禁用一个菜单项.

      以上如果有错误信息,请指出,thanks!




posted @ 2012-07-31 17:11  java简单例子  阅读(872)  评论(0)  编辑  收藏  举报