easyUI1.7学习第一天_menu表单

easyUI1.7学习第一天

1.menu表单

菜单（Menu）通常用于上下文菜单。它是创建其他菜单组件（比如：menubutton、splitbutton）的基础组件。它也能用于导航和执行命令。

图片展示

代码实现
创建菜单（Menu）
通过标记创建菜单（menu）应该添加 ‘easyui-menu’ class 到 <div> 标记。每个菜单项（menu item）通过\ <div> 标记创建。我们可以添加 ‘iconCls’ 属性到菜单项（menu item），以定义一个显示在菜单项（menu item）左边的图标。添加 ‘menu-sep’ class 到菜单项（menu item）将产生一个菜单（menu）分隔符。

<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）

$('#mm').menu('show', {
    left: 200,
    top: 100
});

---

要添加右键点击事件，js代码如下
$(selector)是jquery的选择器,用于选中一个或一组页面元素(HTML DOM),并返回jquery对象
document就是HTML DOM Document 对象,对应整个html文档,
$(document)就是对document的jquery操作
最常用的是$(document).ready(function(){}),即绑定文档加载完毕后事件
而$(document).bind(‘contextmenu’,function(){})是绑定右键菜单事件

<script>
		$(function(){
			$(document).bind('contextmenu',function(e){
				e.preventDefault();
				$('#mm').menu('show', {
					left: e.pageX,
					top: e.pageY
				});
			});
		});
</script>

最后添加一点：
<div class&#