JS原生双栏穿梭选择框的实现示例

目录
  • 何时使用
  • 结构分支
  • 代码

何时使用

用直观的方式在两栏中移动元素，完成选择行为。

选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。 其中，左边一栏为 source，右边一栏为 target，API 的设计也反映了这两个概念。

话不多说，上代码。

结构分支

代码

dataSelection.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双栏穿梭选择框</title>
    <link rel="stylesheet" href="css/dS.css" rel="external nofollow" >
    <script src="js/jquery.min.js"></script>
    <style>
        body {
            /*background:#000c3b;*/
        }
    </style>
</head>
<body>
	<div style="margin:40px;">
	<ul id="shuttle_box">
		<li class="shuttle_box_li shuttle_box_near">
			<ul id="shuttle_box_left">
				<li class="outside">李白&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="date" class="inside" style="width:150px;"/>
				</li>
				<li class="outside">苏轼&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="date" class="inside" style="width:150px;"/>
				</li>
				<li class="outside">王安石
					<input type="date" class="inside" style="width:150px;"/>
				</li>
				<li class="outside">李商隐
					<input type="date" class="inside" style="width:150px;"/>
				</li>
			</ul>
		</li>
		<li class="shuttle_box_li" id="shuttle_box_mid">
			<button id="shuttle_box_toRight">>></button>
			<button id="shuttle_box_toLeft"><<</button>
		</li>
		<li class="shuttle_box_li shuttle_box_near">
			<ul id="shuttle_box_right">
				<li>王维
					<input type="date" class="inside" style="width:150px;"/>
				</li>
			</ul>
		</li>
	</ul>
	</div>
<script src="js/ds.js"></script>
</body>
</html>

dS.css

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
    margin:0; padding:0;
    list-style: none;
}
body{background-color: #e3e3e3;margin: 0px;}
#shuttle_box{width:700px;zoom: 1;margin: 0px auto;}
#shuttle_box:after{
    content: ".";
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
.shuttle_box_li{height: 540px;float: left;}
.shuttle_box_near{width:300px;background-color:#ffffff;overflow-y: scroll;overflow-x:hidden;border-radius: 10px;border:5px solid #f4f4f4}
.shuttle_box_li_act{color:#ffffff !important;background-color: #009688 !important;border-bottom: 1px solid #ffffff;transition: all .01s;}
.shuttle_box_near::-webkit-scrollbar {/*滚动条整体样式*/
    width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
    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 li{
    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;
    display: block;
    margin:20px auto;
    line-height: 30px;
    color:white;
    cursor: pointer;
    background-color: #009688;
    border-radius: 5px;
    transition: all .5s;
    border:none;
}
#shuttle_box_mid button:hover{opacity: 0.7;transition: all .5s;}
#shuttle_box_toRight{margin-top:225px !important;}

ds.js

$(document).ready(function() {
        //穿梭框左侧选中
        $("#shuttle_box_left").on('click', 'li', function () {
            if ($(this).hasClass('shuttle_box_li_act')) {
                $(this).removeClass('shuttle_box_li_act');
            } else {
                $(this).addClass('shuttle_box_li_act');
            }
        });

        //点击事件选择内部事件
        $(".inside").bind('click', function(event1) {
            event1.stopPropagation();
        });

});

//穿梭框右侧选中
$("#shuttle_box_right").on('click', 'li', function () {
    if ($(this).hasClass('shuttle_box_li_act')) {
        $(this).removeClass('shuttle_box_li_act');
    } else {
        $(this).addClass('shuttle_box_li_act');
    }
});

//向右移动
$("#shuttle_box_toRight").click(function () {
    if ($("#shuttle_box_left .shuttle_box_li_act").length == 0) return false;

    $("#shuttle_box_left").find('.shuttle_box_li_act').appendTo("#shuttle_box_right");
    $("#shuttle_box_right li").removeClass('shuttle_box_li_act');

});

//向左移动
$("#shuttle_box_toLeft").click(function () {
    if ($("#shuttle_box_right .shuttle_box_li_act").length == 0) return false;

    $("#shuttle_box_right .shuttle_box_li_act").appendTo("#shuttle_box_left");
    $("#shuttle_box_left li").removeClass('shuttle_box_li_act');
});

运行结果

到此这篇关于JS原生双栏穿梭选择框的实现示例的文章就介绍到这了,更多相关JS 双栏穿梭选择框内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • js实现select下拉框选择

    js实现select下拉框选择

    最近在做一个项目需要兼容到ie不同版本,在使用select时遇到了各种问题.后来索性就自己使用原生js实现了这样一个下拉框,话不多说,直接上代码吧. <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义select</title> </head> <style> *{ margin: 0; padding: 0; } #m

  • js实现的全国省市二级联动下拉选择菜单完整实例

    js实现的全国省市二级联动下拉选择菜单完整实例

    本文实例讲述了js实现的全国省市二级联动下拉选择菜单.分享给大家供大家参考.具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-province-city-cho-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

  • JS实现漂亮的时间选择框效果

    本文实例讲述了JS实现漂亮的时间选择框效果.分享给大家供大家参考,具体如下: HTML代码部分: <html> <script language=javascript src="dataone.js"></script> <table align="center"> <tr> <td> <body> (1)只选择日期 <input type="text" n

  • select下拉选择框美化实现代码(js+css+图片)

    select下拉选择框美化实现代码(js+css+图片)

    因为虽然实现起来麻烦点,如果用自带的Select,很简单的就完成了,但是本代码实际上是在向大家讲述一种Js在网页中的应用实战,多种元素之间的配合作用等.效果如下图: 下拉select选择框 body{margin:20px auto;font-family:Arial,Helvetica,sans-serif;font-size:12px;width:950px;height:400px;border:solid 1px #aaa;position:relative;padding:10px;}

  • 常见的原始JS选择器使用方法总结

    常见的getElementById,getElementsByName,getElementsByTagName.但外国人不满意这些API,于是搞出了getElementsByClassName,后来一点点又出现了jQuery选择器,这里只说原始js选择. 1.getElementById 这是最常用的选择器,通过id来定位: 例: var test=document.getElementById("test").value;//获取文档中id为test的元素的值,并赋值给test变脸

  • javascript 选择文件夹对话框(web)

    javascript 选择文件夹对话框(web)

    没有办法,实践证明最好的解决办法是自己写一个OCX控件,这样就只要注册一下OCX控件就可以了,同时OCX控件的可扩展性非常大,也就是给vc\delphi这些程序的功能引入到web中,其功能可想而知! 这里不说明OCX开发的过程了,给自己写的OCX控件共享一下,希望能给一些朋友提供帮助. 这个OCX控件中提供了一个getFiles()方法,只要获取控件对象,然后调用getFiles()方法就可以获取对应路径下的所有文件,如下图: 该控件可以选择任意盘符下的任意文件夹,图中最下面的按钮时web中的i

  • js实现一个省市区三级联动选择框代码分享

    js实现一个省市区三级联动选择框代码分享

    运行效果:  ================================================= 部分代码: ================================================= 当然首先你数据库中要有这个table,不然你没有数据.....^_^ 复制代码 代码如下: <tr> <td class="tr pr10 "> 所在地: </td> <td class="tl">

  • JS点击某个图标或按钮弹出文件选择框的实现代码

    下面一段代码是基于js实现的点击某个图标或按钮弹出文件选择框的核心代码,代码比较简单,需要的朋友参考下 具体代码如下所示: <HTML> <head> <script type="text/javascript" src="script/jquery-1.6.2.min.js"></script> <script type='text/javascript'> function selectFile(){

  • JS原生双栏穿梭选择框的实现示例

    JS原生双栏穿梭选择框的实现示例

    目录 何时使用 结构分支 代码 何时使用 用直观的方式在两栏中移动元素,完成选择行为. 选择一个或以上的选项后,点击对应的方向键,可以把选中的选项移动到另一栏. 其中,左边一栏为 source,右边一栏为 target,API 的设计也反映了这两个概念. 话不多说,上代码. 结构分支 代码 dataSelection.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="

  • js实现仿阿里巴巴城市选择框效果实例

    js实现仿阿里巴巴城市选择框效果实例

    本文实例讲述了js实现仿阿里巴巴城市选择框效果.分享给大家供大家参考.具体分析如下: 这并不是一个城市选择插件,在这里介绍只是为了mark一下二级联动的方法,此效果适用于有二级子菜单的效果,如导航栏.城市选择.类别选择等等. 样式效果是基于阿里的样式,懒得做其他调整,在area.css中仅仅是为了修改浏览器兼容性略做了一点调整. 城市数据是通过js构造,当然也可以通过后端取得数据,不过感觉没必要. <!doctype html> <html> <head> <me

  • JS简单设置下拉选择框默认值的方法

    本文实例讲述了JS简单设置下拉选择框默认值的方法.分享给大家供大家参考,具体如下: //根据下拉对象默认选中后台对应的记录 function setSelectOption(objSelect, targetValue){ if(objSelect){ var options = objSelect.options; if(options){ var len = options.length; for(var i=0;i<len;i++){ if(options[i].value == targ

  • JS实现点餐自动选择框(案例分析)

    JS实现点餐自动选择框(案例分析)

    效果图: 1. 目标需求(一共两个): 1.点击上方全选/全不选选择框,实现对应功能 2.点击下方选择框,如果所有选择框同时被选中,则上方全选框自动变成勾选状态,否则是非勾选状态 2.思路分析: 1.实现上面选择框全选全不选功能,添加上面的鼠标点击事件,让下方所有选择框跟上方一样就行 2.下方选择框在点击时,使用开关思想来检查是否是全部都选择的状态 3.js实现步骤: 上方全选/全不选选择框,实现步骤 1.获取元素 var chkAll=document.getElementById('chec

  • JS实现的简单下拉框联动功能示例

    JS实现的简单下拉框联动功能示例

    本文实例讲述了JS实现的简单下拉框联动功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • js 自定义个性下拉选择框示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • Javascript 文件夹选择框的两种解决方案

    解决方案1: 调用windows 的shell,但会有安全问题. * browseFolder.js * 该文件定义了BrowseFolder()函数,它将提供一个文件夹选择对话框 * 以供用户实现对系统文件夹选择的功能 * 文件夹选择对话框起始目录由 * Shell.BrowseForFolder(WINDOW_HANDLE, Message, OPTIONS, strPath)函数 * 的strPath参数设置 * 例如:0x11--我的电脑 * 0 --桌面 * "c:\\"--

  • 原生JS实现自定义下拉单选选择框功能

    浏览器自带的原生下拉框不太美观,而且各个浏览器表现也不一致,UI一般给的下拉框也是和原生的下拉框差别比较大的,这就需要自己写一个基本功能的下拉菜单/下拉选择框了.最近,把项目中用到的下拉框组件重新封装了一下,以构造函数的方式进行封装,主要方法和事件定义在原型上,下面是主要的实现代码并添加了比较详细的注释,分享出来供大家参考.代码用了ES6部分写法如需兼容低版本浏览器请把相关代码转成es5写法,或者直接bable转下. 先放个预览图吧,后面有最终的动态效果图:(样式和交互参考了阿里和Iview U

  • js表单中选择框值的获取及表单的序列化

    本文特意为js表单中选择框值的获取及表单的序列化做了下总结,写成了一个对象,分享给大家,欢迎大家学习. var formUtil = { // 获取单选按钮的值,如有没有选的话返回null // elements为radio类的集合的引用 getRadioValue:function(elements) { var value = null; // null表示没有选中项 // 非IE浏览器 if(elements.value != undefined && elements.value

  • JS点击图片弹出文件选择框并覆盖原图功能的实现代码

    简单说下原理,把显示的图片的<img>标签 和上传文件的 <input> 标签放在同一个div下,设置<img>的大小和<input>的大小一样,<input> 设置透明度为0,用定位和设置优先级把input浮动在<img>上方,这样点击图片就能选择上传图片,选择完图片后获取图片地址,替换掉原来的默认图片就能实现覆盖原图功能. js代码: <script type="text/javascript" src=

随机推荐