模态框➕穿梭框。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
随机推荐
- vmware 安装的虚拟机没有网络
前提:需要先将 vmware 软件里的所有虚拟机关机 查看以下两个服务是否启动 如果以上两个服务未启动,就全部启动起来,如果某一个在启动时报错,就打开 vmware 软件,执行以下操作 编辑 > ...
- CSAPP 之 CacheLab 详解
前言 本篇博客将会介绍 CSAPP 之 CacheLab 的解题过程,分为 Part A 和 Part B 两个部分,其中 Part A 要求使用代码模拟一个高速缓存存储器,Part B 要求优化矩阵 ...
- 830. Positions of Large Groups - LeetCode
Question 830. Positions of Large Groups Solution 题目大意: 字符串按连续相同字符分组,超过3个就返回首字符和尾字符 思路 : 举例abcdddeeee ...
- 好客租房33-事件绑定this指向（总结）
1推荐使用class的实例方法 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约 ...
- select into 与 insert into 的区别
1.select * into table_A from table_B table_A是个新创建表,table_B是个已经存在的表. 2.insert into table_A from tabl ...
- MySQL - 数据库的隔离级别
MySQL - 数据库的隔离级别 隔离级别 脏读(Dirty Read) 不可重复读(NonRepeatable Read) 幻读(Phantom Read) 未提交读(Read uncommitte ...
- MVC - forward 和 redirect 的区别
MVC - forward 和 redirect 的区别 forward是服务器请求资源,服务器直接访问目标地址的URL,把那个URL的响应内容读取过来,然后把这些内容再发给浏览器,浏览器根本不知道服 ...
- 在生产中部署ML前需要了解的事
在生产中部署ML前需要了解的事 译自:What You Should Know before Deploying ML in Production MLOps的必要性 MLOps之所以重要,有几个原因 ...
- 12.web基础与HTTP协议
web基础与HTTP协议 目录 web基础与HTTP协议 web基础 域名概述 HTML概述 HTML基本标签 HTML语法规则 HTML文件结构 头标签中常用标签 内容标签中常用标签 静态网页与动态 ...
- JavaScript扩展原型链浅析
前言 上文对原型和原型链做了一些简单的概念介绍和解析,本文将浅析一些原型链的扩展. javaScript原型和原型链 http://lewyon.xyz/prototype.html 扩展原型链 使用 ...