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>

 

转载于:https://www.cnblogs.com/sun-space/p/5696918.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值