jQuery自定义右键菜单

时间：2015-05-15 22:41:45 阅读：124 评论：0 收藏：0 [点我收藏+]

标签：

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

代码：

  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

jQuery自定义右键菜单

标签：

原文地址：http://www.cnblogs.com/zhangruiping/p/4506787.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行