jQuery自定义右键菜单
浏览数：23 /
时间：2015年06月09日
首先看下效果，效果在最下面：
代码：
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
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
