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

Verwendung von Markierungs-Tags im CSS-Listenmodell

In diesem Artikel werden hauptsächlich die Stilat...

Eine umfassende Analyse der Möglichkeiten von Nginx

Vorwort Dieser Artikel konzentriert sich nur dara...

HTML implementiert problemlos abgerundete Rechtecke

Frage: Wie erreiche ich mit Div+CSS und Positioni...

Grundlegende MySQL-Grundlagen: Gruppierungsfunktion, Aggregatfunktion, Gruppierungsabfrage – ausführliche Erklärung

Inhaltsverzeichnis 1. Einfach zu bedienen 2. Verw...

VS2019 stellt eine Verbindung zur MySQL8.0-Datenbank her – Tutorial mit Bildern und Text

1. Bereiten Sie zunächst VS2019 und die MySQL-Dat...

Zusammenfassung von 3 Möglichkeiten zum verzögerten Laden eines Vue-Routers

Kein Lazy Loading verwenden importiere Vue von „v...

Erstellen Sie eine virtuelle Servermaschine in VMware Workstation Pro (grafisches Tutorial)

Die von mir verwendete VMware Workstation Pro-Ver...

Achten Sie bei der Webseitenerstellung auf die Verwendung von HTML-Tags

HTML hat versucht, sich von der Präsentation weg ...

Einführung in die Verwendung von Requisiten in Vue

Vorwort: In Vue können Props verwendet werden, um...

Einführung in die Verwendung des MySQL pt-slave-restart-Tools

Inhaltsverzeichnis Beim Einrichten einer MySQL-Ma...

Analyse des Prinzips und der Methode zur Implementierung einer Linux-Festplattenpartition

erinnern: IDE-Festplatte: Die erste Festplatte is...

Docker-Verbindung – MongoDB-Implementierungsprozess und Codebeispiele

Nachdem der Container gestartet wurde Melden Sie ...

React implementiert den Beispielcode der Radiokomponente

Ziel dieses Artikels ist es, die Grundfunktionen ...

Verständnis und Beispielcode des Vue-Standardslots

Inhaltsverzeichnis Was ist ein Slot Grundlegendes...

Tipps zum Schreiben prägnanter React-Komponenten

Inhaltsverzeichnis Vermeiden Sie die Verwendung d...