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

Erstellen Sie eine virtuelle Maschine und installieren Sie das Betriebssystem Redhat Linux auf VMware (grafisches Tutorial)

So erstellen Sie eine virtuelle Maschine auf VMwa...

Detailliertes Beispiel für sharedWorker in JavaScript zur Realisierung einer mehrseitigen Kommunikation

Folgendes ist passiert. Heute habe ich mit GitHub...

Mini-Programm implementiert benutzerdefinierte mehrstufige Einzelauswahl und Mehrfachauswahl

In diesem Artikel wird der spezifische Code zur I...

vue-element-admin global laden warten

Aktuelle Anforderungen: Globales Laden, alle Schn...

Wann verwendet man Tabellen und wann CSS (Erfahrungsaustausch)

Die Haupttextseite von TW hatte früher eine Breite...

Automatisierte Schnittstellentests mit Postman

Inhaltsverzeichnis Hintergrundbeschreibung Erstel...

Implementierung der IP-Adresskonfiguration in Centos7.5

1. Bevor Sie die IP-Adresse konfigurieren, verwen...

Erklären Sie kurz die Verwendung von „group by“ in SQL-Anweisungen

1. Übersicht Gruppieren nach bedeutet, Daten nach...

Detaillierte Erläuterung der Docker-Container-Lebenszyklusarchitektur und der Unterschiede zwischen dieser und VM

Container-Lebenszyklus Der Lebenszyklus einer Con...

Detailliertes Beispiel für MySQL-Joint-Tabellen-Update-Daten

1.MySQL UPDATE JOIN-Syntax In MySQL können Sie di...

Drei Beispiele für Unschärfe-Hintergrundeffekte mit CSS3

Beginnen wir nicht mit der Einleitung, sondern ko...

Mehrere Möglichkeiten zur Implementierung bildadaptiver Container mit CSS (Zusammenfassung)

Es gibt häufig Szenarien, in denen das Bild an di...

Detaillierte Erläuterung des HTML-Body-Tags und häufig verwendeter Steuer-Tags in HTML

1. <body>-Tag: Wird verwendet, um den Haupt...

Fügen Sie dem Vortag des Website-Codeblocks den Code für die Schaltfläche „Code kopieren“ hinzu

In Bezug auf andere, professionellere Blogsysteme...

MySQL5.6.31 winx64.zip Installations- und Konfigurationstutorial

#1. Herunterladen # #2. Entpacken Sie die Datei l...