模态框➕穿梭框。demo (jq项目)
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>
模态框➕穿梭框。demo (jq项目)的更多相关文章
- Vue2 实现时空穿梭框功能模块
前言 这篇文章主要是分享一个时空穿梭框功能,也就是我们平时用的选择功能.勾选了的项就会进入到另一个框中. 时空穿梭框之旅 示例演示: 这个时空穿梭框实现了: 1.可以全选.反选 2.没有选中时,不可以 ...
- Bootstrap模态弹出框
前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...
- UIPresentationController - iOS自定义模态弹出框
参考: https://developer.apple.com/library/archive/featuredarticles/ViewControllerPGforiPhoneOS/Definin ...
- 如何在vue+element中实现选择框和穿梭框的根据拼音以及拼音首字母以及汉字的模糊搜索
1.汉字: 直接添加对应的 filterable 2.拼音: 穿梭框和选择器的实现方式有所不同 选择器: <1>下载pinyin-match: npm i --save ...
- vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询
vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询 基于element Transfer http://element-cn.eleme.io/#/zh-CN/comp ...
- 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-4 模态弹出框--结构分析
模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-con ...
- 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-3 模态弹出框
模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...
- 【vue系列】elementUI 穿梭框右侧获取当前选中项的值的思路
最近 做了一个需求 在查询结果的表格中,选取(可多选)一些值,获取到保单号后,打开一个elementUI的穿梭框,然后获取到所有业务员,选取一些业务员后,将上一步获取到的保单号传递给业务员. 画个示意 ...
- bootstrap中的modal 模态弹出框不能放在 form_for里面，一弹出modal会自动submit掉form
bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form
随机推荐
- 56. Merge Intervals - LeetCode
Question 56. Merge Intervals Solution 题目大意: 一个坐标轴,给你n个范围,把重叠的范围合并,返回合并后的坐标对 思路: 先排序,再遍历判断下一个开始是否在上一个 ...
- ZIP压缩输入/输出
学习内容: 一.压缩文件 1.利用ZipOutputStream类对象,可将文件压缩. 2.ZipOutputStream类构造方法:ZipOutputStream(OutputStream out) ...
- RabbitMQ 环境安装
每日一句 Wisdom is knowing what to do next, skill is knowing how to do it, and virtue is doing it. 智慧是知道 ...
- CenterNet训练时黑白图片不能画框的问题
解决CenterNet在detect.py中不能画框的问题 在第centernet.py的第198行的中加上这一行 image = image.convert('RGB')
- 一起看 I/O | Flutter 3 更新详解
作者 / Kevin Jamaul Chisholm, Technical Program Manager for Dart and Flutter at Google 又到了 Flutter 稳定版 ...
- CF1681F Unique Occurrences
题意:一棵树,问每条路径上只出现一次的值的个数的和. 思路: 显然想到考虑边贡献.每条边权下放到下面的哪个点.\(up_i\)为上面第一个点权等于它的点.我们需要一个子树内点权等于它的点(如果满足祖孙 ...
- Vben Admin 源码学习:状态管理-错误日志
0x00 前言 本文将对 Vue-Vben-Admin 的状态管理实现源码进行分析解读,耐心读完,相信您一定会有所收获! 0x01 errorLog.ts 错误日志 文件 src\store\modu ...
- 架构师必备：HBase行键设计与应用
首先要回答一个问题,为何要使用HBase? 随着业务不断发展.数据量不断增大,MySQL数据库存在这些问题: MySQL支持的数据量为TB级,不能一直保留历史数据.而HBase支持的数据量为PB级,适 ...
- iphone苹果手机拼健康码行程码教程
因为疫情原因,不管是上班,还是上学,各公司和学校都要求提供全家人的健康码和行程码,并弄成一张拼图,这样方便统计!这就苦了广大用苹果手机的朋友们了,因为苹果手机没有自带的拼图软件. 下面我就教大家一个非 ...
- GDOI 2021 普及组溺水记
Day 1 T1 一看样例:答案不就是 \(\dfrac{\max_{i=1}^n a_i +1}{2}\) 吗? 于是自信打上,拍都不拍.然后就,,对了? 插曲:自己出了一个极端数据,发现 scan ...