模态框➕穿梭框。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
随机推荐
- JS作用域与闭包
JS作用域与闭包 在JavaScript中,作用域是可访问变量,对象,函数的集合. 变量分为全局变量和局部变量.全局变量在函数外定义,HTML中全局变量是window对象,所有数据对象都属于windo ...
- Python实现将csv文件转化为html文件
核心技术: Pandas 需要转化的csv文件(business.csv): 源代码: import pandas as pd f=pd.read_csv("business.csv&quo ...
- 基于Python的渗透测试信息收集系统的设计和实现
信息收集系统的设计和实现 渗透测试是保卫网络安全的一种有效且必要的技术手段,而渗透测试的本质就是信息收集,信息搜集整理可为后续的情报跟进提供强大的保证,目标资产信息搜集的广度,决定渗透过程的复杂程度, ...
- SQLServer2008中的Merge
SqlServer2008 + 中的 Merge Merge: 合并 融合 SqlServer2008 中的Merge 用于匹配两种表中的数据,根据源表和目标表中的数据的比较结果对目标表进行对 ...
- BZOJ4713 迷失的字符串 解题报告
BZOJ4713 题目大意:有 \(n\) 个点 \(n-1\) 条边,每条边有一个字符.给你 \(m\) 个字符串 \(s_i\),问每个字符串是否可以通过树上的一条简单路径表示. \(n,m\le ...
- 碎碎念软件研发02：敏捷之Scrum
一.什么是 Scrum 1.1 Scrum 定义 Scrum 是敏捷开发方法之一,它使用比较广泛. 敏捷的其它开发方法还有 XP(极限编程).FDD(特性驱动开发).Crystal(水晶方法).TDD ...
- Java_循环结构
目录 while循环 do...while循环 for循环 for循环嵌套 增强for循环 打印三角形 Debug 视频 while循环 while(布尔表达式){ //循环内容 } //死循环 wh ...
- Arraylist集合、对象数组
Arraylist集合 ArrayList是List接口的一个实现类,它是程序中最常见的一种集合. 他的特点:在增加或删除指定位置的元素时,会创建新的数组,效率比较低,因此不适合做大量的增删操作,Ar ...
- 将 Ubuntu 16.04 LTS 的 Unity 启动器移动到桌面底部命令
将 Ubuntu 16.04 LTS 的 Unity 启动器移动到桌面底部命令: gsettings set com.canonical.Unity.Launcher launcher-positio ...
- CYaRon!语
P3695 CYaRon!语 开始之前 上次水了些小模拟之后感觉不能再颓废了,于是就来大模拟. 然后这个题花了我一个多星期 还是最差解 不过,为了纪念我的第 20 道紫题,纪念我这一周的努力,我还是想 ...