JQuery EasyUI 之Menu(菜单)组件

发布时间:2019-03-14 整理:脚本之家 作者:未知
脚本之家收集整理的这篇文章主要介绍了JQuery EasyUI 之Menu(菜单)组件脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随脚本之家小编过来看看吧!

代码:

menu.html

<!DOCTYPE html>
<html>
<head>
<title>菜单选项</title>
<meta charset="utf-8">
<script type="text/javascript" src="easyui/jQuery.min.js"></script>
<script type="text/javascript" src="easyui/jQuery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<script type="text/javascript" src="js/menu.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/Themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/Themes/icon.css" />
</head>
<body>
   <div id="box" class="easyui-menu" data-options="left:10,top:10,minwidth:120,hideOnUnhover:false,">
       <div id="new">新建</div>
       <div>
           打开
           <div>
               <div>Word</div>
               <div>Excel</div>
               <div>PowerPoint</div>
           </div>
       </div>
       <div data-options="iconCls:'icon-save',disabled:true">保存</div>
	   <div>退出</div>
   </div>
</body>
</html>

menu.js

$(function (){
   	$(document).on('contextmenu',function (e) {
		e.preventDefault();
		$('#box').menu('show',{
			left : e.pageX,top : e.pageY,});
	});

   /*
	$(document).on('contextmenu',function (e) {
		e.preventDefault();
		$('#box').menu('hide');
	});
   */
  
  	//console.log($('#box').menu('options'));
	//$('#box').menu('destroy');
	//console.log($('#box').menu('getItem','#new').id);
	//$('#box').menu('setText',{
	//	target : '#new',//	text : '刷新',//});
	//$('#box').menu('setIcon',//	iconCls : 'icon-add',//});
	//console.log($('#box').menu('findItem','退出'));
	
	$('#box').menu('appendItem',{
		id : 'add',text : '新增',iconCls : 'icon-add',href : '123.html',onclick : function () {
			console.log($('#box').menu('findItem','新增'));
		}
	});

	//$('#box').menu('removeItem','#new');
	//$('#box').menu('disableItem','#new');
	//$('#box').menu('enableItem','#new');
	
	$('#box').menu({
		/*
		onShow : function () {
			alert('显示时触发!');
		},onHide : function () {
			alert('隐藏时触发!');
		},*/
		onClick : function (item) {
			alert(item.text);
		}
	});
});

截图:

总结

以上是脚本之家为你收集整理的JQuery EasyUI 之Menu(菜单)组件全部内容,希望文章能够帮你解决JQuery EasyUI 之Menu(菜单)组件所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

标签:easyuimenu