前端随笔二——右击菜单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>

 

posted @ 2018-01-27 11:06  三秋树  阅读(343)  评论(0)    收藏  举报