先大概说下我要弄的功能吧,其实也很简单就是根据条件搜索,然后弄一个表格展示,点击选中后向右移动,就是选中,然后就提交,大概就这样的功能,看看我画的原型图吧。
大概意思就这样,其实很简单,但是问题就在于穿梭框有点难实现,主要是可能对于后端开发来说就是自己不太懂,无法实现,然后我百度了一波例子,自己用于改造了一下就可以用了,我们来看看写的啥样子吧
感觉就这样吧,方正自己也不是专业的,也没有设计就只能做成这样了,好了直接贴代码吧。
<html>
<head>
<meta name="decorator" content="list"/>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" rel="stylesheet">
<style>
.whdth{
width: 17%;
/* padding-right: 60px;
padding-left: 40px; */
}
.bodys{
display: flex;
justify-content:space-around;
height: 7vh;
padding-top: 10px;
flex-wrap: nowrap;
}
.input-group-addon {
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1;
color: #555 !important;;
text-align: center;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 4px !important;;
}
.flex{
padding-top: 10px;
display: flex;
justify-content: space-between;
padding-left: 6px;
padding-right: 6px;
height: 65vh;
}
.flex-left{
width: 44vw;
border: 1px solid #000000;
}
.flex-regh{
width: 44vw;
border: 1px solid #000000;
}
/* .body{
padding-left: 20px;
padding-right: 20px;
}*/
li{
list-style: none;
}
#shuttle_box{width:800px;zoom: 1;margin: 100px auto;}
#shuttle_box:after{
content: ".";
clear: both;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}
.shuttle_box_near{
background-color:#ffffff;
overflow-y: scroll;
overflow-x:hidden;
height: 100%;
}
.shuttle_box_li_act{
color:#ffffff !important;
background-color: #1890ff !important;
border-bottom: 1px solid #ffffff;
transition: all .01s;}
.shuttle_box_near::-webkit-scrollbar {/*滚动条整体样式*/
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.shuttle_box_near::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 20px;
background-color: rgba(0,0,0,0.5);
}
.shuttle_box_near::-webkit-scrollbar-track {/*滚动条里面轨道*/
background-color: rgba(0,0,0,0.2);
border-radius: 20px;
}
.shuttle_box_near tr{
padding:8px;
/* border-bottom: 1px solid #ffffff; */
background-color: #f4f4f4;
cursor: pointer;
transition: all .5s;
}
.shuttle_box_li_act:hover{
opacity: 0.7;
transition: all .01s;}
#shuttle_box_mid{
width:80px;
text-align: center;
}
#shuttle_box_mid button{
width: 50px;
height:30px;