前端随笔二——右击菜单ContextMenu的简单学习
一个简单的右击菜单，网上的。一起学习一下吧，这是我的小例子。
其中，图标资源网址是：http://fontawesome.io （在 home 下载资源，在 Icons 页面查看图标名）；
右击菜单资源网址：https://github.com/swisnl/jQuery-contextMenu （在 clone or download 中下载资源，一般所有的 css 和 js 在 dist 文件夹下）
下面是实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <!-- contextMenu 右键菜单必要css --> 7 <link rel="stylesheet" href="jqueryContextMenu/css/jquery.contextMenu.css" /> 8 <link rel="stylesheet" href="jqueryContextMenu/css/theme-fixes.css" type="text/css"/> 9 <!-- 图标引用css --> 10 <link rel="stylesheet" href="font-awesome/4.5.0/css/font-awesome.min.css" /> 11 <!-- jQuery引用 --> 12 <script type="text/javascript" src="jquery-1.10.2.min.js"></script> 13 <!-- contextMenu 必要 js 引用 --> 14 <script type="text/javascript" src="jqueryContextMenu/js/jquery.contextMenu.js"></script> 15 <script type="text/javascript"> 16 /* 初始化主题模块右击菜单 */ 17 function contextMenuTheme(){ 18 /*图标可以使用 font-awesome 图标，只需要到官网下载文件，导入 css ，在官网查询图标名，使用时加上 'fa' 就行*/ 19 /*定义菜单项*/ 20 var itemsTemp = { 21 "addtheme": {name: "新增主题", icon: "fa-ban"}, 22 "editthem": {name: "编辑主题", icon: "fa-beer"}, 23 "deletethem": {name: "删除主题", icon: "delete"}, 24 "sep1": "---------", 25 "quit": {name: "退出", icon: function(){ 26 return 'context-menu-icon context-menu-icon-quit'; 27 }} 28 }; 29 /*可定义多级菜单*/ 30 var itemsTemp1 = { 31 "addtheme": {name: "新增主题", icon: "add"}, 32 "editthem": {name: "编辑主题", icon: "edit", 33 items:{ 34 "addtheme": {name: "新增主题", icon: "add"}, 35 "editthem": {name: "编辑主题", icon: "edit"} 36 }}, 37 "deletethem": {name: "删除主题", icon: "delete",disabled:function(){ 38 return false; 39 }}, 40 "sep1": "---------", 41 "quit": {name: "退出", icon: function(){ 42 return 'context-menu-icon context-menu-icon-quit'; 43 }} 44 }; 45 /*可以使用对象数组的方式生成菜单项，可以动态使用循环生成菜单项*/ 46 var itemsTemp2 = {}; 47 itemsTemp2["add"] = {name:"新增",icon:"add"}; 48 itemsTemp2["edit"] = {}; 49 itemsTemp2["edit"].name = "编辑"; 50 itemsTemp2["edit"].icon = "edit"; 51 $('.easy-tree').contextMenu({ 52 selector: '#id1', 53 callback: function(key, options) { 54 //var data = $(this).attr('value'); 55 if("addtheme" == key){ 56 alert("addtheme"); 57 }else if("editthem" == key){ 58 alert("editthem"); 59 }else if("deletethem" == key){ 60 alert("deletethem"); 61 } 62 }, 63 items: itemsTemp 64 }); 65 } 66 $(document).ready(function() { 67 contextMenuTheme(); 68 }); 69 </script> 70 </head> 71 <body> 72 <div class="easy-tree"> 73 <div id="id1"> 74 <p>右击我</p> 75 </div> 76 </div> 77 </body> 78 </html>
