jquery插件-列表穿梭框

作者 : 开心源码 本文共7285个字,预计阅读时间需要19分钟 发布时间: 2022-05-14 共176人阅读

index.html

<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery穿梭框左右列表增加删除代码</title><script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script><link rel="stylesheet" type="text/css" href="css/index.css"></head><body><div class="selection-container">    <div class="select-box left">        <div class="select-box-title">            <input type="checkbox" class="checkbox-all" id="checkbox-all1" />            <label for="checkbox-all1"></label>            <span>列表一</span>        </div>        <div class="select-content">            <ul class="unselect-ul">                <li>                    <input type="checkbox" class="checkboxs"  id="tyue-checkbox-blue1" />                    <label for="tyue-checkbox-blue1"></label>                    <span>备选项1</span>                </li>                <li>                    <input type="checkbox" class="checkboxs" id="tyue-checkbox-blue2" />                    <label for="tyue-checkbox-blue2"></label>                    <span>备选项2</span>                </li>                <li>                    <input type="checkbox" class="checkboxs" id="tyue-checkbox-blue3" />                    <label for="tyue-checkbox-blue3"></label>                    <span>备选项3</span>                </li>                <li>                    <input type="checkbox" class="checkboxs" id="tyue-checkbox-blue4" />                    <label for="tyue-checkbox-blue4"></label>                    <span>备选项4</span>                </li>                <li>                    <input type="checkbox" class="checkboxs" id="tyue-checkbox-blue5" />                    <label for="tyue-checkbox-blue5"></label>                    <span>备选项5</span>                </li>                <li>                    <input type="checkbox" class="checkboxs" id="tyue-checkbox-blue6" />                    <label for="tyue-checkbox-blue6"></label>                    <span>备选项6</span>                </li>                <li>                    <input type="checkbox" class="checkboxs" id="tyue-checkbox-blue7" />                    <label for="tyue-checkbox-blue7"></label>                    <span>备选项7</span>                </li>                <li>                    <input type="checkbox" class="checkboxs" id="tyue-checkbox-blue8" />                    <label for="tyue-checkbox-blue8"></label>                    <span>备选项8</span>                </li>            </ul>        </div>    </div>    <div class="arrows-box">        <div class="arrow-btns">            <button class="arrow-btn right">                ›            </button>            <button class="arrow-btn left">                ‹            </button>        </div>    </div>    <div class="select-box right">        <div class="select-box-title">            <input type="checkbox" class="checkbox-all" id="checkbox-all2" />            <label for="checkbox-all2"></label>            <span>列表二</span>        </div>        <div class="select-content">            <ul class="selected-ul">                <li>                    <input type="checkbox" class="checkboxs" id="tyue-checkbox-blue9" />                    <label for="tyue-checkbox-blue9"></label>                    <span>备选项9</span>                </li>                <li>                    <input type="checkbox" class="checkboxs" id="tyue-checkbox-blue10" />                    <label for="tyue-checkbox-blue10"></label>                    <span>备选项10</span>                </li>                <li>                    <input type="checkbox" class="checkboxs" id="tyue-checkbox-blue11" />                    <label for="tyue-checkbox-blue11"></label>                    <span>备选项11</span>                </li>            </ul>        </div>    </div></div><!--穿梭框方法--><script src="js/index.js"></script></body></html>

index.js

$(function(){            //全选函数            $('.checkbox-all').click(function(){                if($(this).prop('checked')){                    $(this).parent().next().find('.checkboxs').prop('checked',true);                }else{                    $(this).parent().next().find('.checkboxs').prop('checked',false);                }                btn_status();            })            //单个checkbox与全选的关系函数            $('.select-content').on('click','.checkboxs',function(e){                var checkedAll = $(this).parents('.select-content').prev().find('.checkbox-all');                var checkboxs = $(this).prop('checked');                if(!checkboxs&&checkedAll.prop('checked')){                    checkedAll.prop('checked',false);                }else if(checkboxs&&!checkedAll.prop('checked')){                    var lis = $(this).parents('ul').children();                    for(var i=0;i<lis.length;i++){                        if($(lis[i]).find('.checkboxs').prop('checked')){                            if(i==lis.length-1){                                checkedAll.prop('checked',true)                            }                        }else{                            break;                        }                    }                }                stopFunc(e);            });            $('.select-content').on('click','li',function(){                $(this).children('.checkboxs').click();                btn_status();            })            // 动态判断改变btn状态            function btn_status(){                var btn1 =document.getElementsByClassName('right')[0]                var btn2 =document.getElementsByClassName('left')[1]                var left_ul = document.getElementsByClassName('unselect-ul')                var right_ul = document.getElementsByClassName('selected-ul')                var left_ul_li = left_ul[0].children                var right_ul_li = right_ul[0].children                var left_btn = false                var right_btn = false                for(var i=0;i<left_ul_li.length;i++){                    if(left_ul_li[i].firstElementChild.checked == true){                        left_btn = true                    }                }                for(var i=0;i<right_ul_li.length;i++){                    if(right_ul_li[i].firstElementChild.checked == true){                        right_btn = true                    }                }                if(left_btn){                    btn1.classList.add('btn-cursor')                }else{                    btn1.classList.remove('btn-cursor')                }                if(right_btn){                    btn2.classList.add('btn-cursor')                }else{                    btn2.classList.remove('btn-cursor')                }                            }            //左右移按钮点击事件            $('.arrow-btn').click(function(){                var checkboxs,origin,target,num=0;                if($(this).hasClass('right')){                    origin = $('.unselect-ul');                    target = $('.selected-ul');                }else{                    origin = $('.selected-ul');                    target = $('.unselect-ul');                }                checkboxs = origin.find('.checkboxs');                for(var i=0;i<checkboxs.length;i++){                                        if($(checkboxs[i]).prop('checked')){                        var that = $(checkboxs[i]).parent().clone();                        that.children('input').prop('checked',false);                        target.append(that);                        $(checkboxs[i]).parent().remove();                    }else{                        num++;                    }                }                if(checkboxs.length == num){//                  alert('未选中任何一项');                }else{                    origin.parent().prev().find('.checkbox-all').prop('checked',false);                }                btn_status();            })        })        function stopFunc(e){            e.stopPropagation?e.stopPropagation():e.cancelBubble=true;        }

index.css

*{padding:0;margin:0;}    li{        list-style:none;        cursor:pointer;        position: relative;    }    .selection-container{        height:350px;        margin:10px;    }    .select-box{        width:250px;        height:100%;        float:left;        border: 1px solid #ebeef5;        border-radius: 4px;    }    .arrows-box{        width:110px;        height:100%;        float:left;        position:relative;    }    .select-content{        width:100%;        height:320px;        overflow-y:auto;        overflow-x:hidden;    }    .select-box-title{        height:40px;        line-height:40px;        font-size:16px;        font-family:"微软雅黑";        padding:0 6%;        display: flex;        align-items: center;        position: relative;        width: 100%;        background: #f5f7fa;        border-bottom: 1px solid #ebeef5;        box-sizing: border-box;        color: #000;    }    /*.checkbox-all{        float:left;    }*/    .select-box-title label:before {        left: -14px!important;        top: 4px!important;    }    .select-box-title label:after {        left: -10px!important;        top: 5px!important;    }    .checkboxs{        vertical-align:middle;    }    .unselect-ul{        padding:10px 0;    }    .selected-ul{        padding:10px 0;    }    .select-content li{        padding:5px 15px;        font-size:12px;        font-family:"微软雅黑";    }    .select-box  input[type='checkbox'] {    position: absolute;    left: 13px;    top: 3px;    width: 20px;    height: 20px;    opacity: 0;}.select-box  label {    position: absolute;    left: 30px;    top: 9px;    height: 20px;    line-height: 20px;}.select-box span{    padding-left: 20px;}.select-box  label:before {    content: '';    position: absolute;    left: -14px;    top: -3px;    width: 12px;    height: 12px;    border: 1px solid #ddd;    border-radius: 5px;    transition: all 0.3s ease;    -webkit-transition: all 0.3s ease;    -moz-transition: all 0.3s ease;}.select-box label:after {        content: '';    position: absolute;    left: -10px;    top: -2px;    width: 4px;    height: 8px;    border: 0;    border-right: 1px solid #fff;    border-bottom: 1px solid #fff;    background: #fff;    transform: rotate(45deg);    -webkit-transform: rotate(45deg);    -moz-transform: rotate(45deg);    -ms-transform: rotate(45deg);    transition: all 0.3s ease;    -webkit-transition: all 0.3s ease;    -moz-transition: all 0.3s ease;}.select-box input[type='checkbox']:checked + label:before {    background: #00A0E8;    border-color: #00A0E8;}.select-box input[type='checkbox']:checked + label:after {    background: #00A0E8;}    .arrow-btns{        width:100%;        position:absolute;        top:50%;        margin-top:-45px;    }    .btn-cursor{        background-color: #409eff !important;        border:1px solid #409EFF !important;        transition: all 0.3s ease;        -webkit-transition: all 0.3s ease;        -moz-transition: all 0.3s ease;    }    .btn-cursor svg{        fill:#fff !important;        transition: all 0.3s ease;        -webkit-transition: all 0.3s ease;        -moz-transition: all 0.3s ease;    }    /*.btn-cursor{        cursor: not-allowed !important;    }*/    .arrow-btn{        display: block;        position: relative;        width:40px;        height:40px;        border-radius: 25px;        background:#eee;        margin:0 auto 5px;        cursor:pointer;        border: 1px solid #dcdfe6;        background-color: #f5f7fa;        color: #c0c4cc;        outline: none;        font-size: 30px;    }    .arrow-btn svg{        padding: 11px;        width:17px;        height:17px;        color: white;        fill:#C0C4CC;    }

实例参考:https://www.jq22.com/

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » jquery插件-列表穿梭框

发表回复