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

So erstellen Sie schnell zig Millionen Testdaten in MySQL

Bemerkung: Die Datenmenge in diesem Artikel beträ...

Detaillierte Erläuterung der Angular-Routing-Animation und der erweiterten Animationsfunktionen

Inhaltsverzeichnis 1. Routing-Animation 2. Gruppe...

Zusammenfassung der Methoden zur Verbesserung der MySQL-Anzahl

Ich glaube, dass viele Programmierer mit MySQL ve...

Detaillierte Erläuterung der Hinweise zum Flex- und Positionskompatibilitäts-Mining

Heute hatte ich etwas Freizeit, um eine Website f...

Zusammenfassung der wichtigsten Erkenntnisse des Vue-Entwicklungshandbuchs

Inhaltsverzeichnis Überblick 0. Grundlagen von Ja...

Analyse des MySQL-Client-Installationsprozesses auf dem Mac

Versuchen Sie die Installation über Pip in einer ...

Detailliertes Tutorial zur Installation von Docker unter Windows

Da meine lokale MySQL-Version relativ niedrig ist...

Einführung in die HTML-Formularsteuerung deaktivierte Attribute schreibgeschützt VS deaktiviert

Es gibt zwei Möglichkeiten, die Formularübermittl...

So verbinden Sie Navicat mit der Docker-Datenbank auf dem Server

Starten Sie den MySQL-Container in Docekr Verwend...

JavaScript generiert zufällige Grafiken durch Klicken

In diesem Artikel wird der spezifische Code von J...

So starten Sie ein Vue.js-Projekt

Inhaltsverzeichnis 1. Node.js und Vue 2. Führen S...

Detaillierte Beispiele für die Ausführung von Zabbix-Remotebefehlen

Inhaltsverzeichnis eins. Umfeld zwei. Vorsichtsma...

Einführung in die Installation des Vim-Plugins unter Linux

Inhaltsverzeichnis Installieren Sie den Vim-Plugi...

Unterscheidung zwischen Linux-Hardlinks und Softlinks

Unter Linux gibt es zwei Arten von Dateiverbindun...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.17

In diesem Artikel wird die Installations- und Kon...