模态框➕穿梭框。demo (jq项目)
2024-10-20 21:10:44
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>模态框</title>
9 <style>
10 #MenueSttings{
11 font-size:18px ;
12 position: absolute;
13 right: 0;
14 top: 50%;
15 width: 70px;
16 height: 18px;
17 transform: translateY(-50%);
18 }
19 * {
20 box-sizing: border-box;
21 padding: 0;
22 margin: 0;
23 -moz-user-select: none;
24 -webkit-user-select: none;
25 -ms-user-select: none;
26 -khtml-user-select: none;
27 user-select: none;
28 }
29
30 #modalbox {
31 z-index: 9999;
32 width: 700px;
33 height: 600px;
34 position: fixed;
35 top: 50%;
36 left: 50%;
37 transform: translate(-50%, -50%);
38 /* display: none; */
39 border-radius: 12px;
40 }
41
42 #modalbox .button {
43 width: 100%;
44 height: 525px;
45 overflow: hidden;
46 padding: 30px 10% 0 10%;
47 border: 3px solid #ccc;
48 border-top: none;
49 border-radius: 0 0 12px 12px;
50 }
51
52 #modalbox .top {
53 height: 60px;
54 background-color: #003c8d;
55 color: #fff;
56 padding-left: 20px;
57 line-height: 60px;
58 font-size: 25px;
59 font-weight: 600;
60 border-radius: 12px 12px 0 0;
61 position: relative;
62 }
63
64 #modalbox .button .allMenu,
65 #modalbox .button .CommonMenu {
66 width: 45%;
67 height: 436px;
68 border: 1px solid #000;
69 float: left;
70 border-radius: 6px;
71 }
72
73 #modalbox .button .title,
74 #modalbox .button .serch {
75 height: 40px;
76 line-height: 40px;
77 background-color: #f2f2f2;
78 font-weight: 600;
79 padding-left: 10px;
80 color: #003c8d;
81 border-bottom: 2px solid #ccc;
82 border-radius: 6px 6px 0 0;
83 }
84 .guanbimotaikaung{
85 position: absolute;
86 width: 35px;
87 height: 35px;
88 background-color: #003c8d ;
89 color: #fff;
90 top: -17.5px;
91 right: -17.5px;
92 text-align: center;
93 line-height: 34px;
94 border-radius: 50%;
95 border: 2px solid #fff;
96 font-size: 16px;
97 cursor: default;
98 }
99
100 #modalbox .button .title {
101 top: 0;
102 left: 0;
103 width: 100%;
104 }
105
106 #modalbox .button .serch input {
107 width: 60%;
108 border-radius: 7px;
109 height: 25px;
110 margin-top: 3px;
111 border: 2px solid #003c8d;
112 padding-left: 3px;
113 outline: none;
114 }
115
116 #modalbox .allMenuliat {
117 height: 350px !important;
118 }
119
120 #modalbox .button .serch .serchbtn {
121 border: none;
122 outline: none;
123 width: 60px;
124 height: 25px;
125 background-color: #003c8d;
126 color: #fff;
127 border-radius: 10px;
128 text-align: center;
129 }
130
131 #modalbox .button .serch .serchbtn:active,
132 #modalbox .button .btn .save:active {
133 background-color: #124994;
134 border: 1px solid skyblue;
135 }
136
137 #modalbox .button .CommonMenu {
138 float: right;
139 position: relative;
140 }
141
142 #modalbox .button .btn {
143 width: 100%;
144 overflow: hidden;
145 padding-top: 10px;
146 text-align: center;
147 }
148
149 #modalbox .button .btn button {
150 border: none;
151 outline: none;
152 width: 60px;
153 height: 30px;
154 border-radius: 8px;
155 display: inline-block;
156 margin: 0 25px;
157 color: #fff;
158 font-weight: 600;
159 font-size: 16px;
160 }
161
162 #modalbox .button .btn .save {
163 background-color: #003c8d;
164 width: 80px;
165 }
166
167 #modalbox .button .btn .Cancel {
168 background-color: yellow;
169 color: #000;
170 }
171
172 #modalbox .button .btn .Cancel:active {
173 border: 1px solid #ccc;
174 background-color: #fefe55;
175 }
176
177 #modalbox .allMenuliat,
178 #modalbox .CommonMenulist {
179 width: 90%;
180 height: 394px;
181 overflow: auto;
182 line-height: 33px;
183 margin: 0 auto;
184 }
185
186 #modalbox .allMenuliat .item,
187 #modalbox .CommonMenulist .item {
188 padding-left: 10px;
189 border-bottom: 1px dashed #ccc;
190 position: relative;
191 }
192
193 #modalbox .allMenuliat .item span,
194 #modalbox .CommonMenulist .item span {
195 font-size: 16px;
196 font-weight: 600;
197 }
198
199 #modalbox .allMenuliat .item .icon,
200 #modalbox .CommonMenulist .item .icon {
201 position: absolute;
202 right: 0px;
203 top: 50%;
204 font-size: 14px;
205 width: 20px;
206 height: 20px;
207 text-align: center;
208 line-height: 20px;
209 transform: translateY(-50%);
210 border: solid #555 1px;
211 border-radius: 50%;
212 box-sizing: border-box;
213 cursor: pointer;
214 outline: none;
215 background-color: #fff;
216 }
217
218 #modalbox .allMenuliat .item .icon:active,
219 #modalbox .CommonMenulist .item .icon:active {
220 background-color: #f2f2f2;
221 }
222
223
224 ::-webkit-scrollbar {
225 display: none;
226 width: 6px;
227 height: 6px;
228 }
229
230 ::-webkit-scrollbar-track-piece {
231 background: #eee;
232 }
233
234 ::-webkit-scrollbar-thumb:vertical {
235 background: #666;
236 }
237
238 .weitishi{
239 position: fixed;
240 color: #000;
241 z-index: 99999;
242 background: rgba(0,60,141,0.5);
243 top: 200px;
244 right: 10px;
245 width: 10vw;
246 padding: 20px 10px 20px 20px;
247 border-radius: 30px 0 0 30px;
248 border: 2px solid #ccc;
249 display: none;
250 font-weight: 600;
251 }
252 .noMenudata{
253 position: absolute;
254 top: 30%;
255 text-align: center;
256 transform: translateY(-50%);
257 width: 90%;
258 font-size: 20px;
259 }
260 </style>
261 </head>
262
263 <body>
264 <div class="weitishi"></div>
265 <button id="MenueSttings">按钮</button>
266
267 <div id="modalbox">
268 <div class="top">常用菜单设置
269 <span class="guanbimotaikaung">×</span>
270 </div>
271 <div class="button">
272 <!-- 所有菜单 -->
273 <div class="allMenu">
274 <div class="title">所有菜单列表:</div>
275 <div class="serch">
276 <input type="text" placeholder="请输入搜索内容" id="serchinput">
277 <button class="serchbtn">搜索</button>
278 </div>
279 <div class="allMenuliat">
280 <!-- 总列表 -->
281 </div>
282
283 </div>
284 <!-- 常用菜单 -->
285 <div class="CommonMenu">
286 <div class="title">常用菜单列表:</div>
287
288 <div class="CommonMenulist">
289 <!-- 常用列表 -->
290 </div>
291
292 </div>
293 <!-- 确认 取消 -->
294 <div class="btn">
295 <button class="save" id="save">保存设置</button>
296 <button class="Cancel" id="Cancel">取消</button>
297 </div>
298 </div>
299 </div>
300
301 <script id="test" type="text/html">
302 {{each list as value}}
303 <div class="item" id="allMenuitem">
304 <span>{{value.name}}</span>
305 <button slot={{value.id}} class="icon" id="iconjia">＋</button>
306 </div>
307 {{/each}}
308 </script>
309 <script id="temp" type="text/html">
310 {{each list as value}}
311 <div class="item">
312 <span>{{value.name}}</span>
313 <button slot={{value.id}} class="icon" id="iconjian">－</button>
314 </div>
315 {{/each}}
316 </script>
317 <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
318 <script src="./template-web.js"></script> // alt-template渲染模板
319 <script>
320 $(function () {
321 var idArr = [];
322 // 显示模态框
323 $("#MenueSttings").click(function () {
324 $('#modalbox').css({
325 'display': 'block'
326 })
327 })
328 // 取消按钮隐藏模态框
329 $("#Cancel").click(function () {
330 $('#modalbox').css({
331 'display': 'none'
332 })
333 })
334 // 点击叉号
335 $(".guanbimotaikaung").click(function () {
336 $('#modalbox').css({
337 'display': 'none'
338 })
339 })
340 // 渲染列表总
341 var data = {
342 list: [
343 { name: "1项目管理", id: 5 },
344 { name: "2项目管理", id: 6 },
345 { name: "3项目管理", id: 7 },
346 { name: "4项目管理", id: 8 },
347 { name: "5项目管理", id: 9 },
348 { name: "6项目管理", id: 10 },
349 { name: "7项目管理", id: 11 },
350 { name: "8项目管理", id: 12 },
351 { name: "9项目管理", id: 13 },
352 { name: "10项目管理", id: 14 },
353 { name: "11项目管理", id: 15 }
354 ] // 返回的数据替换掉
355 };
356 // 右侧数组
357 var CommonMenudata = {
358 list: []
359 }
360 CommonMenudata.list = JSON.parse(localStorage.getItem("modalBoxData")) || []
361 for (var i = 0; i < CommonMenudata.list.length; i++) {
362 idArr.push(CommonMenudata.list[i].id)
363 }
364 $(".allMenuliat").html(template('test', data))
365 $(".CommonMenulist").html(template('temp', CommonMenudata))
366 var thisdom;
367 for(var i=0;i<idArr.length;i++){
368 thisdom = $(".allMenuliat .item [slot=" + idArr[i] + "]")
369 thisdom.css({
370 "cursor": "not-allowed", "color": "#ccc", "border": "1px solid #ccc"
371 })
372 thisdom.attr("disabled", true);
373 thisdom.closest('.item').css({
374 "cursor": "not-allowed", "color": "#ccc"
375 })
376 }
377 if (CommonMenudata.list.length == 0) {
378 var dom = "<div class='noMenudata'>快来设置常用菜单吧!<br/>ヾ(≧O≦)〃~~</div>"
379 $(".CommonMenulist").html(dom)
380 }
381 // 点击添加
382 $(".allMenuliat").on("click", "#iconjia", function (e) {
383 var flag = true
384 for(var i = 0;i<CommonMenudata.list.length;i++){
385 if(CommonMenudata.list[i].id !== e.currentTarget.slot){
386 // console.log("可以添加", CommonMenudata.list[i].id)
387 flag = false
388 }
389 }
390 var thisdom = $(".allMenuliat .item [slot=" + e.currentTarget.slot + "]")
391 thisdom.css({
392 "cursor": "not-allowed", "color": "#ccc", "border": "1px solid #ccc", "pointer-events": "none"
393 })
394 thisdom.closest('.item').css({
395 "cursor": "not-allowed", "color": "#ccc"
396 })
397 thisdom.attr("disabled", true);
398
399 var text = thisdom.closest('.item').text().trim()
400 var item = {}
401 item.id = e.currentTarget.slot
402 item.name = text.substring(0, text.length - 1).trim()
403 CommonMenudata.list.unshift(item);
404 $(".CommonMenulist").html(template('temp', CommonMenudata));
405 })
406 // 点击删除
407 $(".CommonMenulist").on("click", "#iconjian", function (e) {
408 var id;
409 var index;
410 for (var i = 0; i < CommonMenudata.list.length; i++) {
411 if (e.currentTarget.slot === CommonMenudata.list[i].id) {
412 id = CommonMenudata.list[i].id
413 index = i
414 }
415 }
416 CommonMenudata.list.splice(index, 1)
417 $(".CommonMenulist").html(template('temp', CommonMenudata))
418
419 var thisdom = $(".allMenuliat .item [slot=" + id + "]")
420 thisdom.css({
421 "cursor": "default ", "color": "#555", "border": "1px solid #000","pointer-events": "auto"
422 })
423 thisdom.attr("disabled", false);
424
425 thisdom.closest('.item').css({
426 "cursor": "default ", "color": "#555"
427 })
428 })
429 // 点击确定按钮
430 $("#save").click(function () {
431 localStorage.setItem("modalBoxData", JSON.stringify(CommonMenudata.list))
432 var idarr = [];
433 for(var i =0;i< CommonMenudata.list.length;i++){
434 idarr.push(CommonMenudata.list[i].id)
435 }
436 console.log(idarr.join())
437
438 $(".weitishi").text("系统导航菜单设置成功").fadeIn(300)
439 setTimeout(function(){
440 $(".weitishi").fadeOut(300)
441 },1000)
442 })
443
444 $(".serchbtn").click(function(){
445 console.info($("#serchinput").val())
446 // 搜索需要进行的事件
447 })
448 })
449 // cursor: not - allowed
450
451 </script>
452 </body>
453
454 </html>
最新文章
- 简单实用JSTL标签库
- SPSS数据分析—描述性统计分析
- nodejs 安装配置 for ubuntu
- count有关
- 夺命雷公狗—angularjs—9—ng-class的自定义函数的用法
- CF534A Exam 构造
- HTTP协议＆SOCKET协议
- java初学第二章
- bzoj:1187: [HNOI2007]神奇游乐园
- LNMP之Nginx
- BZOJ 4555: [Tjoi2016&Heoi2016]求和 [FFT 组合计数 容斥原理]
- [POJ 3764] The xor-longest Path
- PhpStorm 安装ApiDebugger
- 快速开发工具：Servoy
- 02-Introspector内省设置单个属性
- QT json字符串生成和解析
- JDK提供的四种线程池代码详解
- BootStrap中的button使用
- Linux中最常用的JAVA_HOME配置
- UVaLive 4597 Inspection (网络流，最小流)