JSネイティブ2列シャトル選択ボックスの実装例

いつ使うか

選択動作を完了するには、2 つの列間で要素を直感的に移動してください。

1 つ以上のオプションを選択した後、対応する矢印キーをクリックして、選択したオプションを別の列に移動します。左の列はsource 、右の列はtargetです。API の設計もこれら 2 つの概念を反映しています。

では、早速コードを見てみましょう。

構造的ブランチ

画像-20211026181412467

コード

データ選択.html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>2 列シャトル選択ボックス</title>
    <link rel="スタイルシート" href="css/dS.css" rel="外部nofollow" >
    <script src="js/jquery.min.js"></script>
    <スタイル>
        体 {
            /*背景:#000c3b;*/
        }
    </スタイル>
</head>
<本文>
	<div style="margin:40px;">
	<ul id="シャトルボックス">
		<li class="shuttle_box_li シャトルボックス_near">
			<ul id="shuttle_box_left">
				<li class="outside">李白&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="date" class="inside" style="width:150px;"/>
				</li>
				<li class="outside">蘇志&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="date" class="inside" style="width:150px;"/>
				</li>
				<li class="outside">王安石 <input type="date" class="inside" style="width:150px;"/>
				</li>
				<li class="outside">李尚銀 <input type="date" class="inside" style="width:150px;"/>
				</li>
			</ul>
		</li>
		<li class="shuttle_box_li" id="shuttle_box_mid">
			<button id="shuttle_box_toRight">>></button>
			<button id="shuttle_box_toLeft"><< </button>
		</li>
		<li class="shuttle_box_li シャトルボックス_near">
			<ul id="shuttle_box_right">
				<li>王偉 <input type="date" class="inside" style="width:150px;"/>
				</li>
			</ul>
		</li>
	</ul>
	</div>
<script src="js/ds.js"></script>
</本文>
</html>

dS.css

body、div、dl、dt、dd、ul、ol、li、h1、h2、h3、h4、h5、h6、pre、form、fieldset、input、p、blockquote、th、td {
    マージン:0; パディング:0;
    リストスタイル: なし;
}
本文{背景色: #e3e3e3;余白: 0px;}
#shuttle_box{幅:700px;ズーム:1;マージン:0px自動;}
#シャトルボックス:後{
    コンテンツ： "。";
    クリア: 両方;
    表示: ブロック;
    高さ: 0;
    オーバーフロー: 非表示;
    可視性: 非表示;
}
.shuttle_box_li{高さ: 540px;フロート: 左;}
.shuttle_box_near{width:300px;background-color:#ffffff;overflow-y: scroll;overflow-x:hidden;border-radius: 10px;border:5px solid #f4f4f4}
.shuttle_box_li_act{color:#ffffff !important;background-color: #009688 !important;border-bottom: 1px solid #ffffff;transition: all .01s;}
.shuttle_box_near::-webkit-scrollbar{/*全体的なスクロールバーのスタイル*/
    width: 6px; /*高さと幅はそれぞれ水平スクロールバーと垂直スクロールバーのサイズに対応します*/
    高さ: 1px;
}
.shuttle_box_near::-webkit-scrollbar-thumb{/*スクロールバー内の小さな四角形*/
    境界線の半径: 20px;
    背景色: rgba(0,0,0,0.5);
}
.shuttle_box_near::-webkit-scrollbar-track{/*スクロールバー内のトラック*/
    背景色: rgba(0,0,0,0.2);
    境界線の半径: 20px;
}
.shuttle_box_near li{
    パディング:8px;
    下部境界線: 1px 実線 #ffffff;
    背景色: #f4f4f4;
    カーソル: ポインタ;
    遷移: すべて .5 秒;
}
.shuttle_box_li_act:hover{不透明度: 0.7;遷移: すべて .01s;}
#shuttle_box_mid{幅:80px;テキスト配置: center;}
#shuttle_box_mid ボタン{
    幅: 50px;
    高さ:30px;
    表示: ブロック;
    マージン:20px 自動;
    行の高さ: 30px;
    色：白;
    カーソル: ポインタ;
    背景色: #009688;
    境界線の半径: 5px;
    遷移: すべて .5 秒;
    境界線:なし;
}
#shuttle_box_mid ボタン:hover{不透明度: 0.7;遷移: すべて .5s;}
#shuttle_box_toRight{マージントップ:225px !重要;}

ds.js

$(ドキュメント).ready(関数() {
        //シャトルボックスの左側を選択$("#shuttle_box_left").on('click', 'li', function () {
            $(this).hasClass('shuttle_box_li_act') の場合 {
                $(this).removeClass('shuttle_box_li_act');
            } それ以外 {
                $(this).addClass('shuttle_box_li_act');
            }
        });

        //クリックイベントで内部イベントを選択する $(".inside").bind('click', function(event1) {
            イベント1.stopPropagation();
        });

});


//シャトルボックスの右側を選択します$("#shuttle_box_right").on('click', 'li', function () {
    $(this).hasClass('shuttle_box_li_act') の場合 {
        $(this).removeClass('shuttle_box_li_act');
    } それ以外 {
        $(this).addClass('shuttle_box_li_act');
    }
});

//右に移動$("#shuttle_box_toRight").click(function () {
    ($("#shuttle_box_left .shuttle_box_li_act").length == 0) の場合は false を返します。

    $("#shuttle_box_left").find('.shuttle_box_li_act').appendTo("#shuttle_box_right");
    $("#shuttle_box_right li").removeClass('shuttle_box_li_act');

});

//左に移動$("#shuttle_box_toLeft").click(function () {
    ($("#shuttle_box_right .shuttle_box_li_act").length == 0) の場合は false を返します。

    $("#shuttle_box_right .shuttle_box_li_act").appendTo("#shuttle_box_left");
    $("#shuttle_box_left li").removeClass('shuttle_box_li_act');
});

運用結果

ここに画像の説明を挿入

JSネイティブの2列シャトル選択ボックスの実装例に関するこの記事はこれで終わりです。より関連性の高いJSの2列シャトル選択ボックスのコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMを応援してください。

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