jquery實現(xiàn)穿梭框功能
更新時間:2021年01月19日 15:35:09 作者:陳濤輝
這篇文章主要為大家詳細介紹了jquery實現(xiàn)穿梭框功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery實現(xiàn)穿梭框功能的具體代碼,供大家參考,具體內(nèi)容如下
先上效果圖
就只需要引用一個jq文件就可以
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>穿梭框</title> <link rel="stylesheet" href="index.css" > <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <style> .float{ float: left; } .float select{ width: 300px; border: 1px solid #ebeef5; height: 200px; } .top_title{ width: 298PX; height: 30px; border: 1px solid #ebeef5; border-top-left-radius: 4px; border-top-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="top_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="top_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> //右上角的數(shù)字顯示“” 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>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
jQuery mobile轉換url地址及獲取url中目錄部分的方法
這篇文章主要介紹了jQuery mobile轉換url地址及獲取url中目錄部分的方法,轉換url地址本文中介紹的是將相對url轉化為絕對url,需要的朋友可以參考下2015-12-12EASYUI TREEGRID異步加載數(shù)據(jù)實現(xiàn)方法
找了一下官方文檔,看了EASYUI的異步加載,弄了我兩三個小時,死活都不出數(shù)據(jù)2012-08-08jQuery插件bxSlider實現(xiàn)響應式焦點圖
bxSlider特性1.充分響應各種設備,適應各種屏幕;2.支持多種滑動模式,水平、垂直以及淡入淡出效果;3.支持圖片、視頻以及任意html內(nèi)容;4.支持觸摸滑動;5.支持Firefox,Chrome,Safari,iOS,Android,IE7+,下面我們就來詳細探討下吧。2015-04-04jQuery移動web開發(fā)之頁面跳轉和加載外部頁面的實現(xiàn)
這篇文章主要介紹了jQuery移動web開發(fā)之頁面跳轉和加載外部頁面的實現(xiàn),以changePage()和loadPage()方法的使用為主,需要的朋友可以參考下2015-12-12分享10篇優(yōu)秀的jQuery幻燈片制作教程及應用案例
jQuery 是一個非常優(yōu)秀的 JavaScript 框架,使用簡單靈活,同時還有許多成熟的插件可供選擇,它可以幫助你在項目中加入一些非常好的效果。2011-04-04