In der vorherigen Übung
haben wir gesehen, wie wir
die JavaScript-basierten Steuerelemente nutzen können, die für
die Bootstrap JavaScript-Komponenten bereitgestellt werden,
um das Verhalten der Komponenten zu steuern.
Insbesondere sahen wir die Verwendung des Karussell und
wie wir in der Lage waren,
zwei Tasten einzuführen, um
das Fahrverhalten des Karussell zu steuern.
Jetzt bin ich mit dieser Implementierung nicht vollständig zufrieden.
Ich möchte jetzt das Ganze
in einen einzigen Knopf zusammenbrechen,
der sowohl das aktuelle Verhalten
des Karusells als auch das Karussell steuern kann.
Lassen Sie uns also sehen, wie wir
weiteren jQuery-Code nutzen können,
um dies zu erreichen, in dieser Übung.
Um dies zu erreichen, gehen wir zurück zum Code
in index.html, wo wir die beiden Schaltflächen definiert haben.
Ich werde jetzt dieses div für
die Schaltflächengruppe entfernen, weil wir
nur eine einzige Schaltfläche anstelle von zwei Schaltflächen haben werden.
Also habe ich das div um die beiden Tasten entfernt.
Ich werde auch eine der Schaltflächen löschen,
weil wir
für diese Übung mit nur einer einzigen Schaltfläche arbeiten werden.
Also lassen Sie mich die Einrückung ändern.
Also, jetzt, diese spezielle Schaltfläche, die wir dort haben,
werde ich diesen Button als CarouselButton umbenennen.
Wir beginnen damit, dass dieser Button
eine Schaltfläche mit dem Pause-Symbol ist.
Wir werden das Symbol für
diese Schaltfläche durch JavaScript-Code umdrehen.
Also, wie machen wir das? Wenn wir
einen Blick auf unsere Webseite werfen,
werden wir jetzt sehen, dass wir hier eine einzige Schaltfläche haben,
die derzeit die Pause dort anzeigt.
Nun, meine Hoffnung am Ende dieser Übung
ist, diesen Knopf in
ein einziges Steuerelement zu verwandeln, wobei, wenn ich auf diese Schaltfläche klicke,
es das zyklische Verhalten des Karusells pausiert
und dann gleichzeitig
diesen Knopf in eine Play-Schaltfläche verwandelt,
was bedeutet, dass dieses Symbol
ersetzt wird mit dem Wiedergabesymbol.
Damit dieser einzelne Knopf anzeigt, wie
der aktuelle Zustand
des zyklischen Verhaltens meines Karusells ist. Wie machen wir das?
Wir müssen
den JavaScript-Code bearbeiten, um das zu erreichen.
Gehen Sie zum JavaScript-Code
unten auf der Seite index.html.
Hier hatten wir also dieses Skript, das wir
früher aufgenommen hatten,
um die beiden Buttons dort zu aktivieren.
Ich werde diesen Code bearbeiten,
um diese einzelne Schaltfläche zu verwenden, die wir dort haben.
Also, wenn
ich hier unten komme, werde ich
diesen zweiten Teil entfernen, weil wir
hier nur eine einzige Schaltfläche haben,
die der CarouselButton ist,
und wann immer darauf geklickt wird,
müssen Sie etwas tun, um dies zu tun.
Wenn also auf den Karussellknopf
geklickt wird, was tun Sie dann?
Zum Glück können
wir nun, je nachdem, ob es sich bei der Schaltfläche um eine Wiedergabetaste oder eine Pause-Taste handelt, eine entsprechende Aktion ergreifen.
Aber woher wissen wir, ob es
sich um einen Play-Button oder um einen Pause-Button handelt?
Hier werden wir also
etwas jQuery-Code verwenden, um zu
identifizieren, ob es sich um einen Play-Button oder eine Pause-Taste handelt.
Um uns zu helfen, dies zu identifizieren,
gehen wir hier rein und verwenden dann eine if-Anweisung,
und da drinnen werde ich testen, um
zu sehen, ob es sich um ein Spiel oder eine Pause-Taste handelt.
Also hier sage ich,
CarouselButton.Kinder Spannweite.
Was bedeutet, dass
für diesen Karussellknopf,
in dem, wenn es ein Element mit dem Span-Tag gibt,
so dass wir offensichtlich wissen, dass
wir in unserem Karussellknopf das Span-Tag hatten, das
das Font Awesome Symbol dort enthielt.
Also für dieses Span-Tag,
werden wir HasClass überprüfen.
Also werden wir diese HasClass überprüfen,
und dann
ist die Klasse, nach der wir suchen werden, fa-Pause.
Was bedeutet, dass,
wenn das span-Tag die fa-pause-Klasse hat,
dann wissen wir, dass diese Schaltfläche
derzeit als Pause-Taste fungiert.
Wenn also auf die Schaltfläche geklickt wird,
erwartet der Benutzer, dass
das zyklische Verhalten angehalten werden sollte.
Das ist es, was wir hier identifizieren.
So sehen Sie jetzt, dass wir
etwas fortgeschritteneren JavaScript-Code mit
der jQuery-Syntax schreiben, damit dies korrekt funktioniert.
Also hier drinnen, also was muss ich tun?
Nun, was bedeutet, dass, wenn die Schaltfläche
derzeit eine Pause-Taste ist
, dann, wenn die Schaltfläche angeklickt wird,
Sie das Karussell pausieren möchten.
Darüber hinaus möchten wir nun in der Lage sein,
dieses Symbol von einem Pause-Symbol zu einem Wiedergabesymbol umzukehren.
Also, was wir tun werden, ist,
werden wir sagen, genau dort nach diesem,
wir sagen $carouselButton.Kinder Spannweite,
und dann werden wir sagen, removeClass.
Also werden wir die Pause-Klasse entfernen.
Also beachte, wie das funktioniert.
Wir werden die Pause-Klasse daraus entfernen,
und dann werden wir die PlayClass hinzufügen.
Auf diese Weise wird das Symbol Ihrer Schaltfläche
jetzt von einer Pause-Taste auf eine Wiedergabe-Schaltfläche gekippt.
Also werden wir die PauseClass entfernen.
Ich kopiere diesen Code einfach und
füge ihn dann direkt
dort ein und mache dann die Bearbeitung an diesem Code.
Gleiches gilt für den CarouselButton für die Kinder Spanne,
ich werde stattdessen die removeClass,
ich würde AddClass sagen, und dann fa-Play.
Auf diese Weise, was wir tun, ist,
dass wir diese Schaltfläche von
einer Pause-Taste auf einen Play-Button umdrehen.
Außerdem pausieren wir
das Radverhalten des Karussell.
Nun, wenn dies nicht der Fall ist,
sollte es eine Play-Schaltfläche sein, so dass
der gegenteilige Effekt eingeführt werden sollte.
Dann werde ich diesen Code einfach kopieren
und dann die anderen Tests für die
Situation durchführen, in der die Schaltfläche ein PlayButton ist.
Also würde ich sonst sagen, jetzt natürlich,
ich brauche das nicht, wenn hier, aber nur um doppelt sicher
zu sein, werde ich das da reinbringen.
Weil es nur zwei Möglichkeiten gibt,
entweder ist es eine Pause-Taste oder eine Play-Taste,
aber nur für meine Beruhigung,
werde ich das als Fa-Play dort setzen.
Jetzt drinnen werde ich
das von Pause zu Zyklus ändern.
Da
Sie aus der vorherigen Übung daran denken, dass Sie, wenn Sie
das Zyklusverhalten fortsetzen
möchten, die Karussellaktion auf Zyklus festlegen müssen.
Dann
werde ich für die verbleibenden zwei Anweisungen die PlayClass entfernen
und dann die PauseClass hinzufügen.
Beachten Sie also, wie wir ein wenig
fortgeschrittenen jQuery-Code verwenden
, um das Schaltflächensymbol dynamisch ändern zu können
und gleichzeitig
das entsprechende Radverhalten auf unserem Karussell zu induzieren. Wenn Sie
einen Blick auf unsere Webseite werfen,
sehen Sie jetzt, dass mein Karussell Radfahren ist,
und Sie sehen, dass dieser Button derzeit eine Pause-Taste ist.
Wenn ich auf diese Schaltfläche klicke,
merke, wie es sich dort von Pause zu einer Wiedergabe-Schaltfläche ändert
, und dann gleichzeitig
wird mein Radverhalten des Karusells angehalten.
An dieser Stelle
bleibt mein Karussell an dieser
Stelle pausiert, bis ich auf die Schaltfläche klicke.
Wenn ich nun erneut auf diese Schaltfläche klicke,
notieren Sie die Änderung von der Wiedergabe-Schaltfläche zu einer Pause-Taste,
und dann
wird das Radverhalten des Karusells an Ort und Stelle fortgesetzt.
Mit einer einzigen Taste
kann ich nun sowohl das
Verhalten des Karusells steuern als auch gleichzeitig
den aktuellen Zustand
des Radverhaltens meines Karussells anzeigen.
Wenn das ein Pause-Button ist,
bedeutet das, dass mein Karussell gerade Rad fährt.
Wenn das eine Wiedergabe-Schaltfläche ist,
wird mein Karussell angehalten.
Um es fortzusetzen,
muss ich auf die Schaltfläche klicken.
Dies ist also eine weitere Änderung
, die Sie an der Übung vornehmen können.
Jetzt sehen Sie, wie wir in unserem Code
die HasClass-Methode verwendet haben,
und wir sahen auch die Verwendung
der removeClass- und AddClass-Methoden,
jQuery-Methoden, die wir angewendet haben,
um das DOM zu manipulieren, um
das Verhalten
in diesem speziellen Fall als relevant zu reflektieren.
Damit schließen wir diese Übung ab.
Es ist Zeit für Sie, ein Git-Commit mit
der Nachricht mehr Bootstrap und jQuery zu machen.