简单模拟穿梭框

穿梭框相信很多人接触过,在写后台管理系统的项目时有很大可能性会用到这个功能。

其实这个组件在element ui里面有,但是因为兼容性ie的问题(万恶的ie啊),我现在必须手写一个类似的功能供项目使用

乞丐样式上图

原汁原味基本没有经过任何修饰的html,有一种朴素的美。。。还是以功能为主啊,只写了的简单的样式。。。

主要功能就是左侧某一个checkbox选中后点击‘选中过’按钮,此选项就出现在右侧的框中,同时左侧的框中此选项消失  “1区”这个按钮其实就是一个全选的按钮

右侧框中新选项默认为非选中状态,但已选中的状态不能改变,并且顺序和之前保持一致

也就是先选第二过去之后,在选第一个过去之后第一个要在第二个之上,点击“全部过”按钮就是将左侧剩余的所有选项移入右侧,后面两个按钮是从右向左的反向操作

上码

<div class="father">
        <ul>
            <li>
                <input type="checkbox" class="all">
                <label for="">1区</label>
                <ul>
                    <li value="0">    //value值是排序使用的标识
                        <input type="checkbox" class="box">
                        <label for="">第一</label>
                    </li>
                    <li value="1">
                        <input type="checkbox" class="box">
                        <label for="">第二</label>
                    </li>
                    <li value="2">
                        <input type="checkbox" class="box">
                        <label for="">第三</label>
                    </li>
                    <li value="3">
                        <input type="checkbox" class="box">
                        <label for="">第四</label>
                    </li>
                </ul>
            </li>
        </ul>

    </div>
    <div class="btn">
        <span class="cl_cho">选中过</span>
        <span class="cl_all">全部过</span>
        <span class="del_cho">选中删</span>
        <span class="del_all">全删</span>
    </div>
    <div class="son">
        <ul></ul>
    </div>
    <script src="../../lib/jquery-1.11.3.min.js"></script>

li标签的value值是排序的标识,同时引用了jq

 function getEle(str){  //获取摸个dom元素中的所有li,放入数组中,供排序使用
        var newEle = $(str).children(‘li‘)
        arrEle = new Array()
        newEle.each(function(){
            arrEle.push($(this)[0])
        })
        return arrEle
    }    下面是点~选中过~按钮时触发的函数
    $(‘.cl_cho‘).click(function(){
        if($(‘.all‘).is(‘:checked‘)){ 如果全选按钮选中了直接调~全部过~按钮的函数
            $(‘.cl_all‘).click()
        }else{
            $(‘.father input[type="checkbox"]‘).each(function(){
                if($(this).prop(‘checked‘)===true){  //找到左侧栏中的CheckBox如果被选中了,则将其选中去掉然后追加到右侧框中

            $(this).prop(‘checked‘,false).parent().appendTo($(‘.son ul‘))

  getEle(‘.son ul‘)

                }
            });
            function sortFun(a,b){  //同过value从小到大排序
                return a.value-b.value
            }
            arrEle.sort(sortFun)   //通过sort函数将数组中的li重新排序在放回右侧框中
            $(‘.son ul‘).append(arrEle)

        arrEle=[] //清空数组否则避免点击其他按钮有影响

        }
    })   ~全部过~按钮触发的函数
    $(‘.cl_all‘).click(function(){
        $(‘.all‘).siblings(‘ul‘).find(‘.box‘).each(function(){   //找到左侧所有的checkbox将其至为未选中状态然后通过end()方法返回到上一级在在找到li追加到右侧框中,不用end()方法找parent()也是可以的
            $(this).prop(‘checked‘,false)
        }).end().find(‘li‘).each(function(){
            $(this).appendTo($(‘.son ul‘))
        })

      getEle(‘.son ul‘)

     function sortFun(a,b){
                return a.value-b.value
            }
        arrEle.sort(sortFun)
        $(‘.son ul‘).append(arrEle)        arrEle=[] //清空数组否则避免点击其他按钮有影响
    }) 

  //后面两个函数思想类,只不过是反向操作
     $(‘.del_cho‘).click(function(){
         $(‘.son input[type="checkbox"]‘).each(function(){
            if($(this).prop(‘checked‘)===true){
                $(this).prop(‘checked‘,false).parent().appendTo($(‘.father ul ul‘));
                getEle(‘.father ul ul‘)
            }
         })
         function sortFun(a,b){
            return a.value-b.value
        }
        arrEle.sort(sortFun)
        $(‘.father ul ul‘).append(arrEle)        arrEle=[] //清空数组否则避免点击其他按钮有影响
     })
     $(‘.del_all‘).click(function(){
         $(‘.son>ul‘).find(‘.box‘).each(function(){
            $(this).prop(‘checked‘,false)
         }).end().find(‘li‘).each(function(){
            $(this).appendTo($(‘.father ul ul‘))
         })
         getEle(‘.father ul ul‘)
         function sortFun(a,b){
            return a.value-b.value
        }
        arrEle.sort(sortFun)
        $(‘.father ul ul‘).append(arrEle)     arrEle=[] //清空数组否则避免点击其他按钮有影响
     })

下面还有一个全选的方法,其实此处全选不是必须的,已经有按钮可以实现全选的功能了

$(‘.all‘).change(function(){
        if($(this).is(‘:checked‘)){
            $(this).siblings(‘ul‘).find(‘.box‘).each(function(){
                $(this).prop(‘checked‘,true)
            })
        }else{
            $(‘.father .box‘).prop(‘checked‘,false)
        }
    })
    $(‘.father .box‘).click(function(){  //有一个子框没被选中全选就不会选中,相反所有子框都选中全选自动选中
        if(!$(this).is(‘:checked‘)){
            $(‘.all‘).prop(‘checked‘,false)
        }
        var allbox = $(‘.box‘).length;
        var b = true;
        for(let i =0;i<allbox;i++){
            if(!$($(‘.box‘)[i]).is(‘:checked‘)){
               b =false
            }
        }
        if(b){
            $(‘.all‘).prop(‘checked‘,true)
        }
    })

写在最后:此case中涉及多处选取dom元素的操作,选取方法多种多样,可灵活使用

原文地址:https://www.cnblogs.com/ybhome/p/12222674.html

时间: 2024-10-08 19:54:00

简单模拟穿梭框的相关文章

简单的文本框输入自动提示

简单的文本框输入自动提示--输入的时候可以直接异步加载数据库中匹配的项,然后显示出来. 这里没有使用到数据库,直接在PHP用数组模拟数据存储.  demo演示 原理主要是: 监听输入框的状态,当有改变的时候即刻通过ajax发送数据并取得返回值. 主要使用了jQuery封装很方便,但貌似我这个兼容性不咋地...主要提供个思路吧~ js部分: <script type="text/javascript" src="./js/jquery.min.js">&l

WPF简单模拟QQ登录背景动画(转)

介绍 之所以说是简单模拟,是因为我不知道QQ登录背景动画是怎么实现的.这里是通过一些办法把它简化了,做成了类似的效果 效果图 大体思路 首先把背景看成是一个4行8列的点的阵距,X轴Y轴都是距离70.把点连起来,连成三角形.布局在外层蓝色的里,显示只显示里层绿色框里的部分.这样最外层的点不用动,只让绿框里面的点做随机运动就可以了.然后给三角形的Fill做颜色和时间都随机颜色动画,动画完成后再重新做颜色动画,循环. 在实现上,需要注意一下,每个点都对应多个三角形,要在生成三角形的时候,注册到点上,并

WPF简单模拟QQ登录背景动画

介绍 之所以说是简单模拟,是因为我不知道QQ登录背景动画是怎么实现的.这里是通过一些办法把它简化了,做成了类似的效果 效果图 大体思路 首先把背景看成是一个4行8列的点的阵距,X轴Y轴都是距离70.把点连起来,连成三角形.布局在外层蓝色的里,显示只显示里层绿色框里的部分.这样最外层的点不用动,只让绿框里面的点做随机运动就可以了.然后给三角形的Fill做颜色和时间都随机颜色动画,动画完成后再重新做颜色动画,循环. 在实现上,需要注意一下,每个点都对应多个三角形,要在生成三角形的时候,注册到点上,并

HDU-1034-Candy Sharing Game(C++ &amp;&amp; 简单模拟)

Candy Sharing Game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submission(s): 3703    Accepted Submission(s): 2311 Problem Description A number of students sit in a circle facing their teacher in the cent

利用 css 制作简单的提示框

在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和absolute可以快速制作这样的一个提示框,想详细了解,点击这里 html代码: <div id="position"> <div class="position-relative"> <span>提示信息</span> &l

Jquery源码分析与简单模拟实现

前言 最近学习了一下jQuery源码,顺便总结一下,版本:v2.0.3 主要是通过简单模拟实现jQuery的封装/调用.选择器.类级别扩展等.加深对js/Jquery的理解. 正文 先来说问题: 1.jQuery为什么能使用$的方式调用,$是什么.$()又是什么.链式调用如何实现的 2.jQuery的类级别的扩展内部是怎样实现的,方法级别的扩展有是怎样实现的,$.fn又是什么 3.jQuery选择器是如何执行的,又是如何将结果包装并返回的 带着这些问题,我们进行jquery的模拟实现,文章下方有

Linux 内核 链表 的简单模拟(2)

接上一篇Linux 内核 链表 的简单模拟(1) 第五章:Linux内核链表的遍历 /** * list_for_each - iterate over a list * @pos: the &struct list_head to use as a loop cursor. * @head: the head for your list. */ #define list_for_each(pos, head) for (pos = (head)->next; pos != (head);

HDU 1048 What Is Your Grade? (简单模拟)

 What Is Your Grade? Problem Description "Point, point, life of student!" This is a ballad(歌谣)well known in colleges, and you must care about your score in this exam too. How many points can you get? Now, I told you the rules which are used in

JavaWeb学习总结(四十九)——简单模拟Sping MVC

在Spring MVC中,将一个普通的java类标注上Controller注解之后,再将类中的方法使用RequestMapping注解标注,那么这个普通的java类就够处理Web请求,示例代码如下: 1 /** 2 * 使用Controller注解标注LoginUI类 3 */ 4 @Controller 5 public class LoginUI { 6 7 //使用RequestMapping注解指明forward1方法的访问路径 8 @RequestMapping("LoginUI/Lo