jQuery smartMenu右键自定义上下文菜单插件

http://www.zhangxinxu.com/wordpress/?p=1667

 1 <%@ page contentType="text/html; charset=UTF-8"%>
 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4 <head>
 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6 <title>jQuerySmartMenuDemo</title>
 7 <link rel="stylesheet" href="../component/alertifyjs/css/themes/bootstrap.min.css">
 8 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 9 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700">
10 <script type="text/javascript" src="../component/jquery-1.11.1.js"></script>
11 
12 <script type="text/javascript" src="../component/jQuerySmartMenu/js/jquery-smartMenu.js"></script>
13 <link rel="stylesheet" href="../component/jQuerySmartMenu/css/smartMenu.css">
14 <script type="text/javascript">
15 $(function() {
16     $("#table tr").bind("mousedown", function (e) {
17         $.smartMenu.remove();//重新加载smartMenu,这很重要,不然会使用html的缓存
18         if (e.which == 3) {
19             var opertionn = {
20                 name: "",
21                 offsetX: 2,
22                 offsetY: 2,
23                 textLimit: 10,
24                 beforeShow: $.noop,
25                 afterShow: $.noop
26             };
27             var oneObj = new Object;
28             oneObj.text = "标题";
29             oneObj.func = function(){
30                 alert("我被点击了1");
31             };
32             var twoObj = new Object;
33             twoObj.text = "已读";
34             twoObj.func = function(){
35                 alert("我被点击了2");
36             };
37             var imageMenuData = new Array();
38             var imageMenuDataChild = new Array();
39             imageMenuDataChild.push(oneObj);
40             imageMenuDataChild.push(twoObj);
41             imageMenuData.push(imageMenuDataChild);
42             $(this).smartMenu(imageMenuData,opertionn);
43         }
44     });
45 });
46 </script>
47 <style type="text/css">
48 </style>
49 </head>
50 <body>
51     <table id="table"  class="table table-striped table-bordered table-condensed">
52         <tr>
53             <td>测试jQuerySmartMenu</td>
54             <td>测试jQuerySmartMenu</td>
55             <td>测试jQuerySmartMenu</td>
56             <td>测试jQuerySmartMenu</td>
57             <td>测试jQuerySmartMenu</td>
58         </tr>
59         <tr>
60             <td>测试jQuerySmartMenu</td>
61             <td>测试jQuerySmartMenu</td>
62             <td>测试jQuerySmartMenu</td>
63             <td>测试jQuerySmartMenu</td>
64             <td>测试jQuerySmartMenu</td>
65         </tr>
66 
67         <tr>
68             <td>测试jQuerySmartMenu</td>
69             <td>测试jQuerySmartMenu</td>
70             <td>测试jQuerySmartMenu</td>
71             <td>测试jQuerySmartMenu</td>
72             <td>测试jQuerySmartMenu</td>
73         </tr>
74 
75         <tr>
76             <td>测试jQuerySmartMenu</td>
77             <td>测试jQuerySmartMenu</td>
78             <td>测试jQuerySmartMenu</td>
79             <td>测试jQuerySmartMenu</td>
80             <td>测试jQuerySmartMenu</td>
81         </tr>
82 
83     </table>
84 
85 </body>
86 </html>

 

posted @ 2016-07-22 19:40  user_孙  阅读(304)  评论(0编辑  收藏  举报