jquery实现穿梭框功能
网络编程 2021-07-04 14:07www.168986.cn编程入门
这篇文章主要为大家详细介绍了jquery实现穿梭框功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jquery实现穿梭框功能的具体代码,供大家参考,具体内容如下
先上效果图
就只需要引用一个jq文件就可以
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>穿梭框</title> <link rel="stylesheet" href="index.css" > <script src="http://libs.baidu./jquery/1.8.3/jquery.min.js"></script> <style> .float{ float: left; } .float select{ width: 300px; border: 1px solid #ebeef5; height: 200px; } ._title{ width: 298PX; height: 30px; border: 1px solid #ebeef5; border--left-radius: 4px; border--right-radius: 4px; line-height: 30px; background: #fbfbfb; display: flex; justify-content: space-between; } .last_num{ margin-right: 10px; } .search{ width: 300px; display: flex; /*border: 1px solid red;*/ } .search input{ float: left; flex: 4; height: 30px; outline: none; border: 1px solid #ebeef5; box-sizing: border-box; padding-left: 10px; } .search_button{ float: right; flex: 1; height: 30px; background-color: #f1f1f1; color: #000000; border-style: none; outline: none; cursor: pointer;/*设置鼠标箭头手势*/ } .search button i{ font-style: normal; } .search button:hover{ font-size: 16px; } .to_left,.to_right{ width: 20px;/*设置按钮宽度*/ height:20px;/*设置按钮高度*/ color:white;/*字体颜色*/ background-color:#667082;/*按钮背景颜色*/ border-radius: 100%;/*让按钮变得圆滑一点*/ border-width: 0;/*消去按钮丑的边框*/ margin: 0; outline: none;/*取消轮廓*/ text-align: center;/*字体居中*/ cursor: pointer;/*设置鼠标箭头手势*/ } button:hover{/*鼠标移动时的颜色变化*/ background-color: #aa9a8a; } .click_button{ border-radius: 5px; background: #deded8; padding: 5px 0; margin: 115px 5px 0px 5px; } </style> </head> <body> <div> <div class="float"> <div class="_title"> <div class="float_title"><label><input type="checkbox" class="left_checkbox">全选</label></div> <div class="float_title">标题</div> <div class="float_title last_num" ><span class="old_select_length">0</span>/<span class="old_total_length">0</span></div> </div> <div class="search"> <input class="old_search" type="text" placeholder="请输入..." name="" id="" value="" /> </div> <select multiple class="old_select"> <option value="1">11111</option> <option value="2">22222</option> <option value="3">33333</option> <option value="4">123</option> <option value="5">23312</option> <option value="6">23233</option> <option value="7">21233</option> <option value="8">12233</option> <option value="9">23133</option> </select> </div> <div class="float"> <div class="click_button"> <div><button class="to_left">></button></div> <div><button class="to_right"><</button></div> </div> </div> <div class="float"> <div class="_title"> <div class="float_title"><label><input type="checkbox" class="right_checkbox">全选</label></div> <div class="float_title">标题</div> <div class="float_title last_num" ><span class="new_select_length">0</span>/<span class="new_total_length">0</span></div> </div> <div class="search"> <input class="new_search" type="text" placeholder="请输入..." name="" id="" value="" /> </div> <select multiple class="new_select"> <option value="1">11111</option> <option value="2">22222</option> <option value="3">33333</option> <option value="4">123</option> <option value="5">233</option> </select> </div> </div> <script> //右上角的数字显示“” function length_return(){ var old_total_length= $(".old_select").find('option').length; var old_select_length= $(".old_select").find('option:selected').length; var new_total_length= $(".new_select").find('option').length; var new_select_length= $(".new_select").find('option:selected').length $(".old_total_length").text(old_total_length) $(".old_select_length").text(old_select_length) $(".new_total_length").text(new_total_length) $(".new_select_length").text(new_select_length) }; $(".to_left").click(function(){ var old_select= $(".old_select"); var new_select= $(".new_select"); old_select.find('option:selected').each(function () { new_select.append(this) }) length_return() }) $(".to_right").click(function(){ var old_select= $(".old_select"); var new_select= $(".new_select"); new_select.find('option:selected').each(function () { old_select.append(this) }) length_return() }) $(".left_checkbox").click(function(){ if($(this).is(":checked")){ $(".old_select").find('option').each(function () { $(this).attr("selected","selected") }) } else{ $(".old_select").find('option').each(function () { $(this).removeAttr("selected") }) } length_return() }) $(".right_checkbox").click(function(){ if($(this).is(":checked")){ $(".new_select").find('option').each(function () { $(this).attr("selected","selected") }) } else{ $(".new_select").find('option').each(function () { $(this).removeAttr("selected") }) } length_return() }) $("select").on("click","option",function(e){ if($(".left_checkbox").is(":checked")) { $('.left_checkbox').prop('checked', false); } length_return(); }) $("select").on("click","option",function(e){ if($(".right_checkbox").is(":checked")) { $('.right_checkbox').prop('checked', false); } length_return(); }) $(".old_search").on("input propertychange",function(event){ //进行查询操作 var old_select= $(".old_select"); var kw = $(this).val() if (!kw){ old_select.find("option").show() } old_select.find("option").each(function(){ if($(this).text().indexOf(kw) < 0) { $(this).hide() } }) }) $(".new_search").on("input propertychange" ,function(event){ var new_select=$(".new_select"); var kw=$(this).val() if(!kw){ new_select.find("option").show(); } new_select.find("option").each(function(){ if($(this).text().indexOf(kw)<0){ $(this).hide() } }) }) length_return() </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:js实现电灯开关效果
下一篇:jQuery实现穿梭框效果
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程