js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > 表单按钮

jquery实现列表选择点击左右列表选择器特效代码

发布时间:2017-03-19 14:21:16    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jquery实现列表选择点击左右列表选择器特效代码

jquery实现列表选择点击左右列表选择器特效代码

(function($){
    $.fn.initList = function(){
        var selectTitle = $(this);
        selectTitle.draggable({handle:'.list-title'}); // 添加拖拽事件

        //单击列表单击: 改变样式
        var itemClickHandler = function(){
            $(this).parent('.item-box').find('.item').removeClass('selected-item');
            $(this).addClass('selected-item');
        }

        //左边列表项移至右边
        var leftMoveRight = function(){
            selectTitle.find('.list-body .right-box').append($(this).removeClass('selected-item'));
            initItemEvent();
        }

        //右边列表项移至左边
        var rightMoveLeft = function(){
            selectTitle.find('.list-body .left-box').append($(this).removeClass('selected-item'));
            initItemEvent();
        }

        //初始化列表项选择事件
        function initItemEvent(){
            // 左边列表项单击、双击事件
            selectTitle.find('.list-body .left-box').find('.item').unbind('click');
            selectTitle.find('.list-body .left-box').find('.item').unbind('dblclick');
            selectTitle.find('.list-body .left-box').find('.item').each(function(){
                $(this).on("click", itemClickHandler);
                $(this).on('dblclick', leftMoveRight);
            });

            // 右边列表项单击、双击事件
            selectTitle.find('.list-body .right-box').find('.item').unbind('click');
            selectTitle.find('.list-body .right-box').find('.item').unbind('dblclick');
            selectTitle.find('.list-body .right-box').find('.item').each(function(){
                $(this).on('click', itemClickHandler);
                $(this).on('dblclick', rightMoveLeft);
            });
        }

        //获取选择的值
        function getSelectedValue(){
            var rightBox = selectTitle.find('.list-body .right-box');
            var itemValues = [];
            var itemValue;

            rightBox.find('.item').each(function(){
                itemValue = {};
                itemValue[$(this).attr('data-id')] = $(this).text();
                itemValues.push(itemValue);
            });

            for(var i = 0; i < itemValues.length; i++){
                console.log(itemValues[i]);
            }

            return itemValues;
        }

        //初始化添加、移除、获取值按钮事件
        function initBtnEvent(){
            var btnBox = selectTitle.find('.list-body .center-box');
            var leftBox = selectTitle.find('.list-body .left-box');
            var rightBox = selectTitle.find('.list-body .right-box');

            // 添加一项
            btnBox.find('.add-one').on('click', function(){
                leftBox.find('.selected-item').trigger('dblclick'); // 触发双击事件
            });
            // 添加所有项
            btnBox.find('.add-all').on('click', function(){
                leftBox.find('.item').trigger('dblclick');
            });
            // 移除一项
            btnBox.find('.remove-one').on('click', function(){
                rightBox.find('.selected-item').trigger('dblclick'); // 触发双击事件
            });
            // 移除所有项
            btnBox.find('.remove-all').on('click', function(){
                rightBox.find('.item').trigger('dblclick');
            });

            selectTitle.find('.list-footer').find('.selected-val').on('click',getSelectedValue);
        }

        initItemEvent();
        initBtnEvent();
    }
})($)



列表 选择器 选择

jquery实现会滚动的新闻列表和图片滚动特效

js tab选项卡新闻列表切换特效

jquery实现图片列表按顺序分类排列特效

jquery仿天猫左侧导航菜单分类列表

jquery hover网页左侧鼠标悬停列表改变菜单样式特效

jquery实现淘宝商品列表多条件查询特效

jquery仿马可波罗左侧商品列表导航菜单特效

jquery仿新浪微博图文列表滚动切换特效

jQuery实现支持多级下拉菜单列表特效

jQuery仿百度相框图片列表切换展示特效

jquery图片信息列表选项卡左右切换特效

CSS配合背景图片实现列表圆角特效

CSS实现图片列表滚动条特效

js实现文字标题列表,走马灯向上循环滚动特效

jquery animate仿 flash动画滑动收缩展示时间轴列表

jquery实现新闻标题列表上、下、左、右滚动切换特效代码免费下载

jquery+html5实现带播放列表的音乐播放器特效代码

jQuery实现新闻列表滚动特效代码

jQuery排行榜列表文字向上间歇滚动特效代码

js模拟select选择配送城市下拉列表菜单特效代码

jquery仿京东城市地区选择器3级联动菜单特效

jquery+html5日历控件,制作多皮肤动画日历选择器特效

jQuery_ui实现带时间的日期选择器特效

js实现日历日期时间选择器特效控件

jquery cxColor插件实现颜色选择器功能特效

jQuery实现表情符号选择器特效代码

js仿携程网城市选择器特效代码

友荐云推荐
大家说 此评论不代表本站观点