首先看下效果，效果在最下面：
代码：
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
权限设置
- 查看
- 添加
- 修改
- 删除
时间： 2024-10-26 11:18:01