jQuery 사용자 정의 마우스 오른쪽 버튼 메뉴

54846 단어 jquery

우선 효과를 살펴보자. 효과는 맨 아래에 있다.
코드:

  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
이것은 리입니다.
이것은 리입니다.
이것은 리입니다.
이것은 리입니다.

이것은 리입니다.

권한 설정
보기추가수정삭제//<![CDATA[
$(function(){
/*우선 조작 구역이 필요한 오른쪽 키 기능을 사용하지 않습니다*/
$("#TreeList").on("contextmenu", function (e) {
var pointX = e.pageX;
//여기 마우스 Y 좌표 & #13 얻을 수 있음;
var pointY = e.pageY;
var $div = $("div#OpLimits_Menu");//사용자 정의div & #13을 우클릭하기;
$div.show().css({ "left": pointX, "top": pointY });
return false;
})
/* 마우스 오른쪽 버튼 이벤트 판정 e.which 1 = 마우스 왼쪽 버튼left;2 = 마우스 가운데 버튼;3 = 마우스 우클릭*/
var $child = $("#TreeList").find("div.ChildNode");
$(document).on("mousedown", function (e) {

var $div = $("div#OpLimits_Menu");//사용자 정의div & #13을 우클릭하기;
if(e.which!=3) {//우클릭 이벤트가 if의 동작을 수행하는 것으로 판단 & #13;
$div.hide ()//여기에 top를 설정할 때 시스템의 우클릭을 사용하지 않으면 효과가 없습니다. 왜요? & #13;
}
})
})
//]]>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

jQuery 전후 예

이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

jQuery 학습노트 1초 체험

웹 페이지에 대한 Jquery load text 텍스트의 문제

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다