jquery+css实现左右多选穿梭框效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery+css实现左右多选穿梭框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script> <style type="text/css"> * { padding:0; margin:0; } li { list-style:none; cursor:pointer; } .selection-container { height:350px; margin:10px; } .select-box { width:250px; height:100%; border:1px solid #ccc; float:left; } .arrows-box { width:50px; height:100%; float:left; position:relative; } .select-content { width:100%; height:320px; overflow-y:auto; overflow-x:hidden; } .select-box-title { width:90%; height:30px; line-height:30px; font-size:12px; font-family:"微软雅黑"; padding:0 5%; border-bottom:1px solid #ccc; } .select-box-title input { margin:8px 0; } .checkbox-all { float:right; } .checkboxs { vertical-align:middle; } .unselect-ul { padding:10px 0; } .select-content li { padding:5px 15px; font-size:12px; font-family:"微软雅黑"; } .arrow-btns { width:100%; height:90px; position:absolute; top:50%; margin-top:-45px; } .arrow-btn { width:20px; height:12px; padding:18px 10px; background:#eee; border:1px solid #ccc; margin:0 auto 5px; cursor:pointer; } .arrow-btn i { display:inline-block; width:100%; height:100%; background:url("//repo.bfw.wiki/bfwrepo/image/5f7ab7a3a8387.png") no-repeat center center; } .arrow-btn.right i { background:url("//repo.bfw.wiki/bfwrepo/image/5f7ab7cfd3599.png") no-repeat center center; } </style> </head> <body> <div class="selection-container"> <div class="select-box left"> <div class="select-box-title">未选择 - 告警规则<input type="checkbox" class="checkbox-all" /></div> <div class="select-content"> <ul class="unselect-ul"> <li> <input type="checkbox" class="checkboxs" /> <span>磁盘使用率普通告警</span> </li> <li> <input type="checkbox" class="checkboxs" /> <span>磁盘使用率严重告警</span> </li> <li> <input type="checkbox" class="checkboxs" /> <span>内存使用率普通告警</span> </li> <li> <input type="checkbox" class="checkboxs" /> <span>内存使用率严重告警</span> </li> <li> <input type="checkbox" class="checkboxs" /> <span>CPU使用率普通告警</span> </li> <li> <input type="checkbox" class="checkboxs" /> <span>CPU使用率严重告警</span> </li> <li> <input type="checkbox" class="checkboxs" /> <span>设备故障告警</span> </li> <li> <input type="checkbox" class="checkboxs" /> <span>维护到期告警</span> </li> </ul> </div> </div> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0