Implementierungsbeispiel für ein JS-natives zweispaltiges Shuttle-Auswahlfeld

Implementierungsbeispiel für ein JS-natives zweispaltiges Shuttle-Auswahlfeld

Verwendung

Verschieben Sie Elemente auf intuitive Weise zwischen den beiden Spalten, um das Auswahlverhalten zu vervollständigen.

Nachdem Sie eine oder mehrere Optionen ausgewählt haben, klicken Sie auf die entsprechende Pfeiltaste, um die ausgewählten Optionen in eine andere Spalte zu verschieben. Die linke Spalte ist source und die rechte Spalte ist target . Das Design der API spiegelt diese beiden Konzepte ebenfalls wider.

Kommen wir ohne weitere Umschweife zum Code.

Strukturzweige

Bild-20211026181412467

Code

Datenauswahl.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Doppelspaltiges Shuttle-Auswahlfeld</title>
    <link rel="stylesheet" href="css/dS.css" rel="externes nofollow" >
    <script src="js/jquery.min.js"></script>
    <Stil>
        Körper {
            /*Hintergrund:#000c3b;*/
        }
    </Stil>
</Kopf>
<Text>
	<div Stil="Rand:40px;">
	<ul id="Shuttlebox">
		<li Klasse="Shuttlebox_li Shuttlebox_in der Nähe">
			<ul id="Shuttlebox links">
				<li class="außen">Li Bai&nbsp;&nbsp;&nbsp;&nbsp;
					<input Typ="Datum" Klasse="innen" Stil="Breite:150px;"/>
				</li>
				<li class="outside">Su Shi&nbsp;&nbsp;&nbsp;&nbsp;
					<input Typ="Datum" Klasse="innen" Stil="Breite:150px;"/>
				</li>
				<li class="draußen">Wang Anshi <input type="date" class="drinnen" style="width:150px;"/>
				</li>
				<li class="draußen">Li Shangyin <input type="date" class="drinnen" style="width:150px;"/>
				</li>
			</ul>
		</li>
		<li Klasse="Shuttlebox_li" id="Shuttlebox_mid">
			<button id="shuttle_box_toRight">>></button>
			<button id="shuttle_box_toLeft"><< </button>
		</li>
		<li Klasse="Shuttlebox_li Shuttlebox_in der Nähe">
			<ul id="Shuttlebox rechts">
				<li>Wang Wei <input Typ="Datum" Klasse="innen" Stil="Breite:150px;"/>
				</li>
			</ul>
		</li>
	</ul>
	</div>
<script src="js/ds.js"></script>
</body>
</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 {
    Rand: 0; Polsterung: 0;
    Listenstil: keiner;
}
body{Hintergrundfarbe: #e3e3e3;Rand: 0px;}
#shuttle_box{width:700px;zoom: 1;margin: 0px auto;}
#shuttle_box:nach{
    Inhalt: ".";
    klar: beides;
    Anzeige: Block;
    Höhe: 0;
    Überlauf: versteckt;
    Sichtbarkeit: versteckt;
}
.shuttle_box_li{Höhe: 540px;Float: links;}
.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;Hintergrundfarbe: #009688 !important;Border-bottom: 1px solid #ffffff;Übergang: alle .01s;}
.shuttle_box_near::-webkit-scrollbar {/*Allgemeiner Bildlaufleistenstil*/
    Breite: 6px; /*Die Höhe und Breite entsprechen jeweils der Größe der horizontalen und vertikalen Bildlaufleisten*/
    Höhe: 1px;
}
.shuttle_box_near::-webkit-scrollbar-thumb {/*Kleines Quadrat innerhalb der Bildlaufleiste*/
    Rahmenradius: 20px;
    Hintergrundfarbe: rgba(0,0,0,0,5);
}
.shuttle_box_near::-webkit-scrollbar-track {/*Spur innerhalb der Bildlaufleiste*/
    Hintergrundfarbe: rgba(0,0,0,0,2);
    Rahmenradius: 20px;
}
.shuttle_box_near li{
    Polsterung: 8px;
    Rahmen unten: 1px durchgezogen #ffffff;
    Hintergrundfarbe: #f4f4f4;
    Cursor: Zeiger;
    Übergang: alle 0,5 s;
}
.shuttle_box_li_act:hover{Deckkraft: 0,7;Übergang: alle 0,01 s;}
#shuttle_box_mid{width:80px;text-align: center;}
#shuttle_box_mid-Schaltfläche{
    Breite: 50px;
    Höhe: 30px;
    Anzeige: Block;
    Rand: 20px automatisch;
    Zeilenhöhe: 30px;
    Farbe: weiß;
    Cursor: Zeiger;
    Hintergrundfarbe: #009688;
    Rahmenradius: 5px;
    Übergang: alle 0,5 s;
    Rand: keiner;
}
#shuttle_box_mid button:hover{Deckkraft: 0,7;Übergang: alle 0,5 s;}
#shuttle_box_toRight{margin-top:225px !important;}

ds.js

$(Dokument).bereit(Funktion() {
        //Wählen Sie die linke Seite der Shuttle-Box aus$("#shuttle_box_left").on('click', 'li', function () {
            wenn ($(this).hasClass('shuttle_box_li_act')) {
                $(this).removeClass('shuttle_box_li_act');
            } anders {
                $(this).addClass('shuttle_box_li_act');
            }
        });

        //Klicken Sie auf das Ereignis, um das interne Ereignis auszuwählen $(".inside").bind('click', function(event1) {
            event1.stopPropagation();
        });

});


//Wählen Sie die rechte Seite der Shuttle-Box aus$("#shuttle_box_right").on('click', 'li', function () {
    wenn ($(this).hasClass('shuttle_box_li_act')) {
        $(this).removeClass('shuttle_box_li_act');
    } anders {
        $(this).addClass('shuttle_box_li_act');
    }
});

//Nach rechts bewegen$("#shuttle_box_toRight").click(function () {
    wenn ($("#shuttle_box_left .shuttle_box_li_act").Länge == 0) false zurückgeben;

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

});

//Nach links bewegen$("#shuttle_box_toLeft").click(function () {
    wenn ($("#shuttle_box_right .shuttle_box_li_act").Länge == 0) return false;

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

Ergebnisse der Operation

Bildbeschreibung hier einfügen

Dies ist das Ende dieses Artikels über das Implementierungsbeispiel des nativen JS-Doppelspalten-Shuttle-Auswahlfelds. Weitere relevante Inhalte zum JS-Doppelspalten-Shuttle-Auswahlfeld finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Zusammenfassung der üblichen Verwendungsmethoden für Original-JS-Selektoren
  • Ein vollständiges Beispiel für ein Dropdown-Auswahlmenü für sekundäre Verknüpfungen auf nationaler, provinzieller und kommunaler Ebene, implementiert durch js
  • Dialogfeld „Ordner auswählen“ in Javascript (Web)
  • JS realisiert einen schönen Zeitauswahlfeldeffekt
  • JS klickt auf ein Symbol oder eine Schaltfläche, um den Implementierungscode des Dateiauswahlfelds anzuzeigen
  • js realisiert eine dreistufige Verknüpfungsauswahlfeld-Codefreigabe von Provinzen, Städten und Bezirken
  • js zur Implementierung der Auswahl einer Dropdown-Box
  • Implementierungscode zur Verschönerung des Dropdown-Auswahlfelds auswählen (js+css+bild)

<<:  Detaillierte Erklärung gängiger Docker-Befehle

>>:  Analyse des Unterschieds zwischen relativem und absolutem HTML-Pfad

Artikel empfehlen

Ist Ihre Website für IE8 geeignet?

Während der Olympischen Spiele wird IE 8 Beta 2 ve...

Win10 verwendet die Tsinghua-Quelle, um die PyTorch-GPU-Version schnell zu installieren (empfohlen)

Überprüfen Sie, ob Ihr CUDA installiert ist Geben...

CSS löst das Problem der Front-End-Bildverformung perfekt

Ich habe in der Toutiao IT School einen Artikel g...

Erfahren Sie, wie Sie den JVM-Speicher von Tomcat über JConsoler überwachen

Inhaltsverzeichnis 1. So überwachen Sie Tomcat 2....

CSS, um in wenigen Schritten visuelle Effekte im Stil von Cyberpunk 2077 zu erzielen

Hintergrund Bevor wir mit dem Artikel beginnen, w...

Grafische Einführung in den Unterschied zwischen := und = in MySQL

Der Unterschied zwischen := und = = Nur beim Setz...

Detaillierte Erläuterung der grundlegenden Befehle des Docker-Ausführungsprozesses und des Images

Inhaltsverzeichnis 1. Workflow ausführen 2. Grund...

HTML-Tutorial: Definitionsliste

<br />Originaltext: http://andymao.com/andy/...

Detaillierte Erläuterung der Routing-Parameterübergabe und der komponentenübergreifenden Parameterübergabe in Vue

Routensprung dies.$router.push('/kurs'); ...

Axios storniert wiederholte Anfragen

Inhaltsverzeichnis Vorwort 1. So stornieren Sie e...

Eine einfache Methode zum Implementieren der zeitgesteuerten Protokolllöschung unter Linux

Einführung Linux ist ein System, das automatisch ...

Funktionsprinzip und Implementierungsmethode der Vue-Anweisung

Einführung in Vue Die aktuelle Ära der großen Fro...

Umfassende Zusammenfassung zu MySQL GTID

Inhaltsverzeichnis 01 Einführung in GTID 02 Wie G...

MySQL Advanced Learning Notes (Teil 3): Einführung in die logische Architektur von MySQL, detaillierte Erläuterung der MySQL-Speicher-Engine

Einführung in die logische MySQL-Architektur Über...

Vue-Entwicklungsbaumstrukturkomponenten (Komponentenrekursion)

In diesem Artikelbeispiel wird der spezifische Co...