首先看下效果，效果在最下面：

代码：

  1 body {
  2     font-size: 12px;
  3     margin: 0px;
  4     padding: 0px;
  5 }
  6 form,div,ul,li {
  7     margin: 0px;
  8     padding: 0px;
  9     list-style-type: none;
 10     overflow: hidden;
 11 }
 12 h1,h2,h3,h4,h5 {
 13     font-size: 12px;
 14     margin: 0px;
 15     padding: 0px;
 16 }
 17 a {
 18     text-decoration: none;
 19 }
 20
 21
 22 .layout {
 23     width: 993px;
 24     clear: both;
 25     margin-right: auto;
 26     margin-left: auto;
 27     border-top-width: 0px;
 28     border-right-width: 4px;
 29     border-bottom-width: 0px;
 30     border-left-width: 4px;
 31     border-top-style: solid;
 32     border-right-style: solid;
 33     border-bottom-style: solid;
 34     border-left-style: solid;
 35     border-top-color: #000000;
 36     border-right-color: #000000;
 37     border-bottom-color: #000000;
 38     border-left-color: #000000;
 39     overflow: hidden;
 40 }
 41 .layout2 {
 42     width: 942px;
 43     margin-right: auto;
 44     margin-left: auto;
 45 }
 46
 47 .Content {
 48     background-color: #376285;
 49 }
 50
 51 .contentBg {
 52     background-color: #173043;
 53 }
 54 div, ul, li {
 55  margin: 0px;
 56  padding: 0px;
 57  list-style-type: none;
 58 }
 59
 60 body {
 61  background-color: #FFFFFF;
 62  font-size: 12px;
 63  margin: 0px;
 64  padding: 0px;
 65 }
 66
 67 #TreeList {
 68  background-color: #FFFFFF;
 69  margin-top: 6px;
 70  margin-right: 9px;
 71  margin-bottom: 6px;
 72  margin-left: 9px;
 73  border: 1px solid #5d7b96;
 74  padding-bottom: 6px;
 75  padding-left: 6px;
 76 }
 77 #TreeList .mouseOver {
 78  background-color: #FAF3E2;
 79 }
 80
 81 #TreeList .ParentNode {
 82  line-height: 21px;
 83  height: 21px;
 84  margin-top: 2px;
 85  clear: both;
 86 }
 87
 88 #TreeList .ChildNode {
 89  background-image: url(/jscss/demoimg/201205/Sys_ModuleIcos.png);
 90  background-position: 15px -58px;
 91  padding-left: 39px;
 92  line-height: 21px;
 93  background-repeat: no-repeat;
 94  border-top-width: 0px;
 95  border-right-width: 0px;
 96  border-bottom-width: 1px;
 97  border-left-width: 0px;
 98  border-top-style: dashed;
 99  border-right-style: dashed;
100  border-bottom-style: dashed;
101  border-left-style: dashed;
102  border-top-color: #aabdce;
103  border-right-color: #aabdce;
104  border-bottom-color: #aabdce;
105  border-left-color: #aabdce;
106  cursor: default;
107  clear: both;
108  height: 21px;
109  color: #314f6a;
110 }
111
112 #TreeList .title {
113  float: left;
114 }
115 #TreeList .input {
116  font-size: 12px;
117  line-height: 18px;
118  color: #FFF;
119  height: 16px;
120  background-color: #3F6B8F;
121  width: 120px;
122  text-align: center;
123  margin-top: 1px;
124  border-top-width: 1px;
125  border-right-width: 1px;
126  border-bottom-width: 1px;
127  border-left-width: 1px;
128  border-top-style: solid;
129  border-right-style: solid;
130  border-bottom-style: solid;
131  border-left-style: solid;
132  border-top-color: #1F3547;
133  border-right-color: #FFF;
134  border-bottom-color: #FFF;
135  border-left-color: #1F3547;
136  float: left;
137 }
138 #TreeList .editBT {
139  float: left;
140  overflow: visible;
141 }
142 #TreeList .editBT .ok {
143  background-image: url(/jscss/demoimg/201205/Sys_ModuleIcos.png);
144  background-repeat: no-repeat;
145  background-position: 0px -89px;
146  height: 13px;
147  width: 12px;
148  float: left;
149  margin-left: 3px;
150  padding: 0px;
151  margin-top: 3px;
152  cursor: pointer;
153 }
154 #TreeList .editBT .cannel {
155  background-image: url(/jscss/demoimg/201205/Sys_ModuleIcos.png);
156  background-repeat: no-repeat;
157  background-position: 0px -120px;
158  float: left;
159  height: 13px;
160  width: 12px;
161  margin-left: 3px;
162  padding: 0px;
163  margin-top: 3px;
164  cursor: pointer;
165 }
166
167 #TreeList .editArea {
168  float: right;
169  color: #C3C3C3;
170  cursor: pointer;
171  margin-right: 6px;
172 }
173
174 #TreeList .editArea span {
175  margin: 2px;
176 }
177
178 #TreeList .editArea .mouseOver {
179  color: #BD4B00;
180  border-top-width: 1px;
181  border-right-width: 1px;
182  border-bottom-width: 1px;
183  border-left-width: 1px;
184  border-top-style: solid;
185  border-right-style: solid;
186  border-bottom-style: solid;
187  border-left-style: solid;
188  border-top-color: #C9925A;
189  border-right-color: #E6CFBB;
190  border-bottom-color: #E6CFBB;
191  border-left-color: #C9925A;
192  background-color: #FFFFFF;
193  margin: 0px;
194  padding: 1px;
195 }
196
197 #TreeList .ParentNode .title {
198  color: #314f6a;
199  cursor: pointer;
200  background-image: url(/jscss/demoimg/201205/Sys_ModuleIcos.png);
201  background-repeat: no-repeat;
202  padding-left: 39px;
203 }
204
205 #TreeList .ParentNode.show .title {
206  font-weight: bold;
207  background-position: 3px -27px;
208 }
209
210 #TreeList .ParentNode.hidden .title {
211  background-position: 3px 4px;
212 }
213
214 #TreeList .ParentNode .editArea {
215  color: #999;
216 }
217 #TreeList .ParentNode.show {
218  background-color: #d1dfeb;
219  border-top-width: 0px;
220  border-right-width: 0px;
221  border-bottom-width: 1px;
222  border-left-width: 1px;
223  border-top-style: solid;
224  border-right-style: solid;
225  border-bottom-style: solid;
226  border-left-style: solid;
227  border-top-color: #5d7b96;
228  border-right-color: #5d7b96;
229  border-bottom-color: #5d7b96;
230  border-left-color: #5d7b96;
231 }
232
233 #TreeList .ParentNode.hidden {
234  border-top-width: 0px;
235  border-right-width: 0px;
236  border-bottom-width: 1px;
237  border-left-width: 0px;
238  border-top-style: dashed;
239  border-right-style: dashed;
240  border-bottom-style: dashed;
241  border-left-style: dashed;
242  border-top-color: #aabdce;
243  border-right-color: #aabdce;
244  border-bottom-color: #aabdce;
245  border-left-color: #aabdce;
246 }
247
248 #TreeList .Row {
249  clear: both;
250  margin-left: 24px;
251  background-image: url(/jscss/demoimg/201205/Sys_ModuleIcos2.png);
252  background-repeat: repeat-y;
253  background-position: 7px 0px;
254 }
255
256 h1 {
257  font-size: 12px;
258  line-height: 24px;
259  color: #FFF;
260  background-color: #396384;
261  text-align: center;
262  margin: 0px;
263  padding: 0px;
264 }
265
266 #OpLimits_Menu {
267  position: absolute;
268  width: 70px;
269  cursor: default;
270  filter: Alpha(Opacity=90);
271 }
272
273 #OpLimits_Menu ul {
274  background-color: #d5effc;
275  border: 1px solid #3e8dad;
276 }
277 #OpLimits_Menu ul li {
278  line-height: 18px;
279  color: #496D81;
280  text-align: center;
281  letter-spacing: 0.3em;
282  height: 18px;
283  cursor: pointer;
284 }
285 #OpLimits_Menu ul .onmouse {
286  background-image: url(/jscss/demoimg/201205/bt1.gif);
287  background-repeat: repeat-x;
288  color: #324A58;
289 }

<div id="TreeList"><div class="ParentNode show"><div class="title">title</div></div><div class="Row"><div class="ChildNode"><div class="title">这是一个li</div></div><div class="ChildNode"><div class="title">这是一个li</div></div><div class="ChildNode"><div class="title">这是一个li</div></div><div class="ChildNode"><div class="title">这是一个li</div></div><div class="ChildNode"><div class="title">这是一个li</div></div></div>
</div><div id="OpLimits_Menu" style="display:none"><h1>权限设置</h1><ul><li value="1">查看</li><li value="2">添加</li><li value="3">修改</li><li value="4">删除</li></ul>
</div>

js:

 1     $(function(){
 2   /*首先禁用需要操作区域的右键功能*/
 3     $("#TreeList").on("contextmenu", function (e) {
 4         var pointX = e.pageX;
 5         //这里可以得到鼠标Y坐标
 6         var pointY = e.pageY;
 7         var $div = $("div#OpLimits_Menu"); // 右击自定义div
 8         $div.show().css({ "left": pointX, "top": pointY });
 9         return false;
10     })
11     /*鼠标右键事件判定 e.which 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键*/
12     var $child = $("#TreeList").find("div.ChildNode");
13     $(document).on("mousedown", function (e) {
14
15         var $div = $("div#OpLimits_Menu"); // 右击自定义div
16         if (e.which != 3) {  // 判断是右击事件执行if里面的操作
17             $div.hide()//
18         }
19     })

这就是最终的效果：

title
这是一个li
这是一个li
这是一个li
这是一个li
这是一个li

权限设置

  • 查看
  • 添加
  • 修改
  • 删除

转载于:https://www.cnblogs.com/zhangruiping/p/4506787.html

jQuery自定义右键菜单相关推荐

  1. java 树 右键菜单_jQuery实现自定义右键菜单的树状菜单效果

    本文实例讲述了jQuery实现自定义右键菜单的树状菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery的自定义右键菜单,在树状结构的子节点(下级没有节点)上单击右键才会弹出自定义菜单, ...

  2. JS简单实现自定义右键菜单

    今天来讲一个关于右键菜单的小demo,抛砖引玉. 首先,我们要用css和html做一个自定义右键菜单. <!--自定义右键菜单html代码--> <div id="menu ...

  3. antd Tree组件中，自定义右键菜单

    最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component {state = {rightClickNodeTreeIt ...

  4. DevExpress的TreeList实现自定义右键菜单打开文件选择对话框

    场景 DevExpress的TreeList实现节点上添加自定义右键菜单并实现删除节点功能: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/det ...

  5. vue怎么实现右键二级菜单_vue中如何自定义右键菜单详解

    在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: v-for="item in resourceList" :key="item.id&qu ...

  6. [读码时间] 自定义右键菜单

    说明:代码取自网络,CSS中注释为笔者学习时添加,JS中的注释为原文所有! <!DOCTYPE html> <html> <head><meta charse ...

  7. win10 自定义右键菜单

    win10 自定义右键菜单 首先使用快捷键 win + r 打开运行窗口,在其中输入 regedit 然后点击 确定 进入注册表后,按照顺序找到位置: HKEY_LOCAL_MACHINE\SOFTW ...

  8. Chrome开发自定义右键菜单实现快速跳转到指定页面

    一.背景 假设我们在日常的测试过程中,有很多页面需要经常访问,一种方式是我们可以直接把这些页面添加为书签,但这种方式必须记录完整的URL.如果我们有多套环境,比如有测试环境.UAT环境.线上环境,每套 ...

  9. javascript实现自定义右键菜单（绑定鼠标左右键）

    文章目录 javascript实现自定义右键菜单 思路 1绑定右键函数 2.获取鼠标右键按下位置的x坐标(到左面的距离),y坐标(到上面的距离). 3.获取滚动条向下滚动距离,获取滚动条向左滚动距离 ...

  10. html 右键菜单 插件,Script Menu：自定义右键菜单

    Script Menu的开发背景 对于网页上的右键菜单用户可能再熟悉不过了,常见的右键菜单有复制.粘贴.刷新.另存为.查看网页源代码等,但是这些右键菜单都是chrome自己提供或者其他插件的菜单,你有 ...

最新文章

  1. 一大清早，我就被编辑赶出了办公室……
  2. 中班机器人上课视频_中班机器人律动公开课
  3. python中math库_Python的math库、random库实际应用
  4. 树状结构大数据类型的高效支持
  5. 苏格拉底婚姻_苏格拉底如何教我与开发人员交谈
  6. 贪心算法(各种贪心题目)
  7. LDA主题模型（算法详解）
  8. mac使用eclipse创建java_【Java】Mac上使用Eclipse创建Java项目的一般步骤
  9. Symmetric Tree
  10. 拓端tecdat|R语言使用马尔可夫链Markov Chain, MC来模拟抵押违约
  11. java生成随机数方法
  12. 转换HLP文件到CHM格式
  13. 虚拟机屏幕自适应问题
  14. 关于 Adobe PDF虚拟打印机
  15. 解决我无限网络只能上QQ不能上网的问题！！
  16. 信号完整性分析-笔记
  17. 大佛普拉斯（大佛+）
  18. 【C++】复数域内的二次函数系数的求解
  19. 【转载】Amit’s A star Page 中译文
  20. Java十六进制转二进制

热门文章

  1. PHP Opcache(ZendOptimizerPlus)的安装配置详解
  2. 第三次作业_201731062533
  3. 系统级程序设计结课实验-第一部分
  4. 那些年 我们都在...
  5. django登录验证码操作
  6. 利用Calendar类判断是平年还是闰年
  7. IT部门域事件与业务分析
  8. Android dex分包方案
  9. mac 升级到mavericks 安装php扩展现问题
  10. SOCKET 478/775是两种主板的CPU接口类型