jQuery realisiert die Shuttle-Box-Funktion
|
In diesem Artikelbeispiel wird der spezifische Code von jQuery zur Realisierung der Shuttle-Box-Funktion zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Zuerst das Effektbild
Sie müssen nur auf eine jq-Datei verweisen
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Shuttle-Box</title>
<link rel="stylesheet" href="index.css" >
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<Stil>
.schweben{
schweben: links;
}
.float auswählen{
Breite: 300px;
Rand: 1px durchgezogen #ebeef5;
Höhe: 200px;
}
.top_title{
Breite: 298px;
Höhe: 30px;
Rand: 1px durchgezogen #ebeef5;
Rahmen oben links – Radius: 4px;
Rahmen oben rechts – Radius: 4px;
Zeilenhöhe: 30px;
Hintergrund: #fbfbfb;
Anzeige: Flex;
Inhalt ausrichten: Abstand dazwischen;
}
.letzte_Nummer{
Rand rechts: 10px;
}
.suchen{
Breite: 300px;
Anzeige: Flex;
/*Rand: 1px durchgehend rot;*/
}
.Sucheingabe{
schweben: links;
Flexibilität: 4;
Höhe: 30px;
Gliederung: keine;
Rand: 1px durchgezogen #ebeef5;
Box-Größe: Rahmenbox;
Polsterung links: 10px;
}
.Suchschaltfläche{
schweben: rechts;
biegen: 1;
Höhe: 30px;
Hintergrundfarbe: #f1f1f1;
Farbe: #000000;
Rahmenstil: keiner;
Gliederung: keine;
Cursor: Zeiger;/*Mauspfeilgeste festlegen*/
}
.Suchschaltfläche i{
Schriftstil: normal;
}
.Suchen-Schaltfläche:hover{
Schriftgröße: 16px;
}
.nach_links,.nach_rechts{
Breite: 20px;/*Schaltflächenbreite festlegen*/
height:20px;/*Schaltflächenhöhe festlegen*/
Farbe:weiß;/*Schriftfarbe*/
background-color:#667082;/*Hintergrundfarbe der Schaltfläche*/
border-radius: 100%;/*Den Button glatter machen*/
border-width: 0;/*hässlichen Rand des Buttons entfernen*/
Rand: 0;
Gliederung: keine;/*Gliederung abbrechen*/
text-align: center;/*Schrift zentriert*/
Cursor: Zeiger;/*Mauspfeilgeste festlegen*/
}
button:hover{/*Farbe ändert sich, wenn die Maus bewegt wird*/
Hintergrundfarbe: #aa9a8a;
}
.Klick_Schaltfläche{
Rahmenradius: 5px;
Hintergrund: #ded8;
Polsterung: 5px 0;
Rand: 115px 5px 0px 5px;
}
</Stil>
</Kopf>
<Text>
<div>
<div Klasse="float">
<div Klasse="Top_Titel">
<div class="float_title"><label><input type="checkbox" class="left_checkbox">Alles auswählen</label></div>
<div class="float_title">Titel</div>
<div Klasse="float_title letzte_Nummer" ><span Klasse="alte_Auswahllänge">0</span>/<span Klasse="alte_Gesamtlänge">0</span></div>
</div>
<div Klasse="Suche">
<input class="old_search" type="text" placeholder="Bitte geben Sie ein..." name="" id="" value="" />
</div>
<mehrere Klassen auswählen="alte_Auswahl">
<option value="1">11111</option>
<option value="2">22222</option>
<option value="3">33333</option>
<option value="4">123</option>
<option value="5">23312</option>
<option value="6">23233</option>
<option value="7">21233</option>
<option value="8">12233</option>
<option value="9">23133</option>
</Auswählen>
</div>
<div Klasse="float">
<div Klasse="Klick_Schaltfläche">
<div><button class="nach_links">></button></div>
<div><button class="nach_rechts"></button></div>
</div>
</div>
<div Klasse="float">
<div Klasse="Top_Titel">
<div class="float_title"><label><input type="checkbox" class="right_checkbox">Alles auswählen</label></div>
<div class="float_title">Titel</div>
<div Klasse = "float_title letzte_Nummer" ><span Klasse = "new_select_length">0</span>/<span Klasse = "new_total_length">0</span></div>
</div>
<div Klasse="Suche">
<input class="new_search" type="text" placeholder="Bitte geben Sie ein..." name="" id="" value="" />
</div>
<mehrere Klasse auswählen="neue_Auswahl">
<option value="1">11111</option>
<option value="2">22222</option>
<option value="3">33333</option>
<option value="4">123</option>
<option value="5">233</option>
</Auswählen>
</div>
</div>
<Skript>
//Die Zahl in der oberen rechten Ecke zeigt "" an.
Funktion Längenrückgabe(){
var alte_Gesamtlänge = $(".old_select").find('option').length;
var old_select_length = $(".old_select").find('option:selected').length;
var neue_Gesamtlänge = $(".new_select").find('option').Länge;
var neue_Auswahllänge = $(".neue_Auswahl").find('Option:ausgewählt').Länge
$(".alte_Gesamtlänge").text(alte_Gesamtlänge)
$(".alte_Auswahllänge").text(alte_Auswahllänge)
$(".neue_Gesamtlänge").text(neue_Gesamtlänge)
$(".neue_Auswahllänge").text(neue_Auswahllänge)
};
$(".to_left").klick(function(){
var alte_Auswahl = $(".alte_Auswahl");
var neue_Auswahl = $(".neue_Auswahl");
old_select.find('Option:ausgewählt').jeder(Funktion () {
neue_Auswahl.anhängen(dies)
})
Längenrückgabe()
})
$(".to_right").klick(function(){
var alte_Auswahl = $(".alte_Auswahl");
var neue_Auswahl = $(".neue_Auswahl");
new_select.find('Option:ausgewählt').jeder(Funktion () {
alt_select.anhängen(dies)
})
Längenrückgabe()
})
$(".left_checkbox").klick(function(){
wenn($(this).is(":checked")){
$(".old_select").find('Option').jeweils(Funktion () {
$(this).attr("ausgewählt","ausgewählt")
})
}
anders{
$(".old_select").find('Option').jeweils(Funktion () {
$(this).removeAttr("ausgewählt")
})
}
Längenrückgabe()
})
$(".right_checkbox").klick(function(){
wenn($(this).is(":checked")){
$(".new_select").find('Option').jeweils(Funktion () {
$(this).attr("ausgewählt","ausgewählt")
})
}
anders{
$(".new_select").find('Option').jeweils(Funktion () {
$(this).removeAttr("ausgewählt")
})
}
Länge_Rückgabe()
})
$("Auswählen").on("Klicken","Option",Funktion(e){
wenn($(".left_checkbox").ist(":checked"))
{
$('.left_checkbox').prop('aktiviert', false);
}
Längenrückgabe();
})
$("Auswählen").on("Klicken","Option",Funktion(e){
wenn($(".right_checkbox").ist(":aktiviert"))
{
$('.right_checkbox').prop('aktiviert', false);
}
Längenrückgabe();
})
$(".old_search").on("Eingabeeigenschaft ändern",Funktion(Ereignis){
//Abfragevorgang ausführen var old_select = $(".old_select");
var kw = $(diese).val()
wenn (!kw){
old_select.find("Option").show()
}
old_select.find("Option").jeweils(Funktion(){
wenn($(this).text().indexOf(kw) < 0)
{
$(diese).ausblenden()
}
})
})
$(".new_search").on("Eingabeeigenschaftsänderung", Funktion(Ereignis){
var neue_Auswahl=$(".neue_Auswahl");
var kw = $(diese).val()
wenn(!kw){
new_select.find("Option").show();
}
new_select.find("Option").jeweils(Funktion(){
wenn($(this).text().indexOf(kw)<0){
$(diese).ausblenden()
}
})
})
Länge_Rückgabe()
</Skript>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: MySQL 5.7.17 Installations- und Konfigurations-Tutorial für Mac
>>: Beim Senden von E-Mails auf Alibaba Cloud Centos6.X sind verschiedene Probleme aufgetreten
Artikel empfehlen
Lösen Sie das Problem, dass ifconfig und addr die IP-Adresse in Linux nicht sehen können
1. Installieren Sie das Linux-System auf der virt...
Zwei Möglichkeiten zur manuellen Implementierung des MySQL-Hot-Standby mit zwei Maschinen auf dem Alibaba Cloud Server
1. Konzept 1. Der Unterschied zwischen Hot Backup...
Detaillierte Analyse von Javascript-Datenproxys und Ereignissen
Inhaltsverzeichnis Datenbroker und Events Überprü...
Eine kurze Analyse der Verwendung der Zero-Copy-Technologie in Linux
In diesem Artikel werden mehrere wichtige Zero-Co...
Vue verwendet die Element-el-upload-Komponente, um auf die Grube zu treten
Inhaltsverzeichnis 1. Grundlegende Verwendung 2. ...
Einfaches Grafik-Tutorial zur Verwendung von Adobe Brackets
Adobe Brackets ist eine Open Source-, einfache un...
Implementierungsbeispiel für dynamische Routing-Breadcrumbs für Elemente
Zu meistern: localStorage, Komponentenkapselung Ä...
Zusammenfassung der Verwendung von MySQL-Datums- und Uhrzeitfunktionen
Dieser Artikel basiert auf MySQL 8.0 Dieser Artik...
JS verwendet Map, um doppelte Arrays zu integrieren
Inhaltsverzeichnis Vorwort Daten simulieren Zusam...
MySQL-Methode zum Anzeigen der aktuell verwendeten Konfigurationsdatei my.cnf (empfohlen)
my.cnf ist die Konfigurationsdatei, die beim Star...
Detaillierte Schritte zum Erstellen eines Dateiservers in Windows Server 2012
Der Dateiserver ist einer der am häufigsten verwe...
Detaillierte Beispiele zur Konvertierung von Zeilen in Spalten und Spalten in Zeilen in MySQL
MySQL Zeile zu Spalte, Spalte zu Zeile Der Satz i...
Ein grafisches Tutorial zur Installation von MySQL unter Windows
Zusammenfassung: Dieser Artikel erläutert hauptsä...
Design Association: Warum haben Sie am falschen Ort gesucht?
Ich bin vor ein paar Tagen mit dem Bus zur Arbeit...
XHTML-Erste-Schritte-Tutorial: XHTML-Tags
Einführung in XHTML-Tags <br />Vielleicht is...