jQueryはシャトルボックス機能を実現する

この記事では、シャトルボックス機能を実現するためのjQueryの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

まずは効果画像

jqファイルを参照するだけです

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="UTF-8">
  <title>シャトルボックス</title>
  <link rel="スタイルシート" href="index.css" >
  <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
  <スタイル>
   。フロート{
    フロート: 左;
   }

   .float 選択{
    幅: 300ピクセル;
    境界線: 1px 実線 #ebeef5;
    高さ: 200px;
   }
   .トップ_タイトル{
    幅: 298ピクセル;
    高さ: 30px;
    境界線: 1px 実線 #ebeef5;

    左上の境界線の半径: 4px;
    右上の境界線の半径: 4px;
    行の高さ: 30px;
    背景: #fbfbfb;
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースの間;
   }
   .last_num{
    右マージン: 10px;
   }

   。検索{
    幅: 300ピクセル;

    ディスプレイ: フレックス;
    /*境界線: 1px 実線赤;*/
   }
   .検索入力{
    フロート: 左;
    フレックス: 4;
    高さ: 30px;
    アウトライン: なし;
    境界線: 1px 実線 #ebeef5;
    ボックスのサイズ: 境界線ボックス;
    左パディング: 10px;
   }
   .検索ボタン{
    フロート: 右;
    フレックス: 1;
    高さ: 30px;
    背景色: #f1f1f1;
    色: #000000;
    境界線スタイル: なし;
    アウトライン: なし;
    カーソル: ポインター;/*マウスの矢印ジェスチャを設定します*/
   }
   .検索ボタン i{
    フォントスタイル: 通常;
   }
   .検索ボタン:ホバー{
    フォントサイズ: 16px;
   }
   .to_left、.to_right{
    width: 20px;/*ボタンの幅を設定する*/
    height:20px;/*ボタンの高さを設定する*/
    color:white;/*フォントの色*/
    background-color:#667082;/*ボタンの背景色*/
    border-radius: 100%;/*ボタンをより滑らかにする*/
    border-width: 0;/*ボタンの醜い境界線を削除する*/
    マージン: 0;
    outline: none;/*アウトラインをキャンセル*/

    text-align: center;/*フォントの中央*/
    カーソル: ポインター;/*マウスの矢印ジェスチャを設定します*/
   }
   button:hover{/*マウスを動かすと色が変わります*/
    背景色: #aa9a8a;
   }
   .クリックボタン{

 境界線の半径: 5px;
 背景: #deded8;
 パディング: 5px 0;
 マージン: 115px 5px 0px 5px;
   }

  </スタイル>
 </head>

 <本文>
  <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="検索">
    <input class="old_search" type="text" placeholder="入力してください..." name="" id="" value="" />

   </div>

   <複数選択 class="old_select">
    <オプション値="1">11111</オプション>
    <オプション値="2">22222</オプション>
    <オプション値="3">33333</オプション>
    <オプション値="4">123</オプション>
    <option value="5">23312</option>
    <オプション値="6">23233</オプション>
    <オプション値="7">21233</オプション>
    <オプション値="8">12233</オプション>
    <オプション値="9">23133</オプション>

   </選択>
  </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="検索">
    <input class="new_search" type="text" placeholder="入力してください..." name="" id="" value="" />

   </div>

   <複数選択 class="new_select">
   <オプション値="1">11111</オプション>
   <オプション値="2">22222</オプション>
   <オプション値="3">33333</オプション>
   <オプション値="4">123</オプション>
   <option value="5">233</option>

   </選択>
  </div>
  </div>
<スクリプト>
 //右上の数字は「」と表示されます
 関数 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_select_length").text(新しい選択の長さ)
  };

 $(".to_left").click(関数(){
  var old_select = $(".old_select");
  var new_select = $(".new_select");
  old_select.find('option:selected').each(function() {
   new_select.append(これ)
  })
  長さを返す()
 })

 $(".to_right").click(関数(){
  var old_select = $(".old_select");
  var new_select = $(".new_select");
  new_select.find('option:selected').each(function() {
   old_select.append(これ)
  })
  長さを返す()
 })

 $(".left_checkbox").click(function(){
  if($(this).is(":checked")){
   $(".old_select").find('option').each(function() {
    $(this).attr("選択済み","選択済み")
   })
  }
  それ以外{
   $(".old_select").find('option').each(function() {
    $(this).removeAttr("選択済み")
    })
  }
  長さを返す()
 })

 $(".right_checkbox").click(関数(){
  if($(this).is(":checked")){
   $(".new_select").find('option').each(function() {
    $(this).attr("選択済み","選択済み")
   })
  }
  それ以外{
   $(".new_select").find('option').each(function() {
    $(this).removeAttr("選択済み")
    })
  }
  長さを返す()
 })
 $("select").on("click","option",function(e){
  if($(".left_checkbox").is(":checked"))
   {
    $('.left_checkbox').prop('チェック済み', false);
   }
  長さを返す();

 })

 $("select").on("click","option",function(e){
  if($(".right_checkbox").is(":checked"))
   {
    $('.right_checkbox').prop('チェック済み', false);
   }
  長さを返す();

 })

 $(".old_search").on("入力プロパティの変更",function(event){
  //クエリ操作を実行します var old_select = $(".old_select");
  var kw = $(this).val()
  もし(!kw){
   old_select.find("オプション").show()
  }
  old_select.find("option").each(function(){
   if($(this).text().indexOf(kw) < 0)
   {
    $(これ).hide()
   }
  })

 })
  $(".new_search").on("入力プロパティの変更"、関数(イベント){
   var new_select=$(".new_select");
   var kw = $(this).val()
   if(!kw){
    new_select.find("オプション").show();

   }
   new_select.find("オプション").each(function(){
    if($(this).text().indexOf(kw)<0){
     $(これ).hide()
    }
   })
  })
 長さを返す()
</スクリプト>
 </本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: