jQuery自定义右键菜单

阅读量：5172 次

发布时间：2019-06-13

本文共 7887 字，大约阅读时间需要 26 分钟。

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

代码：

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 }

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"); // 右击自定义div16         if (e.which != 3) {  // 判断是右击事件执行if里面的操作17             $div.hide()// 18         }19     })

这就是最终的效果：

title

这是一个li