jQuery EasyUI API 中文文档 - 菜单（menu）

最新推荐文章于 2024-04-08 08:50:19 发布

淘气宝宝

最新推荐文章于 2024-04-08 08:50:19 发布

阅读量1.5k

点赞数

分类专栏： jquery 文章标签： jquery-easyui框架 jquery-easyui菜单 jquery-easyui-menu menu removeItem

本文链接：https://blog.csdn.net/maildocgaojingru/article/details/11210355

版权

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<html>
<head>
	<script src="jquery-easyui/jquery.min.js"></script>
	<script src="jquery-easyui/jquery.easyui.min.js"></script>
	<script src="jquery-easyui/easyloader.js"></script>
	<script src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
	<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css" />
</head>
<body>
	<!--当class等于"menu-sep"时是一条直线-->
	<div id="mm" class="easyui-menu" style="width:120px;" data-options="left:100,top:100">
		<div id="b">New</div>  
		<div id="c">  
			<span >Open</span>  
			<div style="width:150px;">  
				<div><b>Word</b></div>  
				<div>Excel</div>  
				<div>PowerPoint</div>  
			</div>  
		</div>  
		<div iconCls="icon-save">Save</div>  
		<div class="menu-sep"></div>  
		<div id="a">Exit</div> 
	</div>
	<a class="easyui-linkbutton" id="aa1" href="javascript:void(0)">显示</a>
	<a class="easyui-linkbutton" id="aa2" href="javascript:void(0)">关闭</a>
	<a class="easyui-linkbutton" id="aa3" href="javascript:void(0)">改变</a>
	<a class="easyui-linkbutton" id="aa4" href="javascript:void(0)">图标</a>
	<a class="easyui-linkbutton" id="aa5" href="javascript:void(0)">添加</a>
	<a class="easyui-linkbutton" id="aa6" href="javascript:void(0)">移除</a>
	<a class="easyui-linkbutton" id="aa7" href="javascript:void(0)">禁用</a>
	<a class="easyui-linkbutton" id="aa8" href="javascript:void(0)">开启</a>

	
	<script>
		function aa(){
			alert('123');
		}
		$(function (){
			//点击显示，菜单显示
			$("#aa1").click(function (){
				$("#mm").menu('show',{
					left:100,
					top:100
				})
			})


			//点击关闭，菜单关闭
			$("#aa2").click(function (){
				$("#mm").menu('hide')
			})

			//点击改变，修改特定的菜单文本
			$("#aa3").click(function (){
				$("#mm").menu('setText',{
					target:$("#a"),
					text:'嘻嘻哈哈'
				})
			})

			//点击图标，修改特定的图标
			$("#aa4").click(function (){
				$("#mm").menu('setIcon',{
					target:$("#a"),
					iconCls:'icon-save'
				})
			})

			//点击添加，添加菜单
			$("#aa5").click(function (){
				$("#mm").menu('appendItem',{
					parent:$("#a"),
					text:'呼呼啦啦',
					iconCls:'icon-save'
				})
			})

			//点击移除，移除菜单某一项
			var itemEl = $('#b'); 
			$("#aa6").click(function (){
				$("#mm").menu('removeItem',itemEl)
			})

			//点击禁用，禁用菜单项
			var itemEl1 = $('#c'); 
			$("#aa7").click(function (){
				$("#mm").menu('disableItem',itemEl1)
			})

			//点击开启，开启禁用菜单项
			var itemEl1 = $('#c'); 
			$("#aa8").click(function (){
				$("#mm").menu('enableItem',itemEl1)
			})

			//把右键绑定当前的菜单
			$(document).bind('contextmenu',function(e){
				$('#mm').menu('show', {
						left: e.pageX,
						top: e.pageY
				});
				return false;
			});

		

		})
	</script>

	<!--
	menu的属性
	left：菜单的左边距
	<div id="mm" class="easyui-menu" style="width:120px;" data-options="left:100">  
		<div>New</div>   
	</div>

	top:菜单的右边距
	<div id="mm" class="easyui-menu" style="width:120px;" data-options="top:100">  
		<div>New</div>   
	</div>

	
	menu的事件
	onShow：当一个菜单被显示后触发。
	<div id="mm" class="easyui-menu" style="width:120px;" data-options="left:100,top:100,onShow:aa"> 
		<div>New</div>   
	</div>

	onHide：在一个菜单被隐藏后触发。
	<div id="mm" class="easyui-menu" style="width:120px;" data-options="left:100,top:100,onHide:aa"> 
		<div>New</div>   
	</div>

	onClick：当一个菜单被点击时触发。
	<div id="mm" class="easyui-menu" style="width:120px;" data-options="left:100,onClick:aa"> 
		<div>New</div>   
	</div>


	menu的方法
	show：在一个特定的位置显示菜单。
		参数有2个属性：
		left：新的左边距。
		top：新的顶边距。
	hide：隐藏一个菜单。
	setText：设置特定的菜单文本，
		参数包含2个属性：
		target：DOM对象，将要被设置的菜单项。
		text：字符串，新的文本值。
	setIcon：设置特定的菜单项图标，
		参数包含2个属性：
		target：DOM对象，菜单项目。
		iconCls: 新的图标css类。
	removeItem：移除特定的菜单项。
	enableItem：启用菜单项。
	disableItem：禁用菜单项。
	-->
</body>
</html>

淘气宝宝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery EasyUI API 中文文档 - 菜单（menu）

New Open Word Excel PowerPoint Save Exit 显示关闭改变图标添加移除禁用开启 function aa(){ alert('123'); } $(function (){ //点
复制链接

扫一扫

专栏目录