[MUSIC]
Viele der JavaScript-basierten Komponenten des Bootstrap bieten uns einen Mechanismus,
um einige der Funktionen dieser Komponenten durch das Schreiben von JavaScript-Code zu steuern
, insbesondere durch das Schreiben von Code mit der jQuery-Syntax.
Daher werden wir diese Indexübung untersuchen, indem wir einige
JavaScript-basierte Steuerelemente für unser Karussell verwenden, die wir
in der vorherigen Übung auf der Seite index.html enthalten haben.
In der vorherigen Übung haben wir dieses Karussell in unsere index.html Seite eingeführt.
Was ich in dieser Übung tun möchte, ist, ein paar
Steuertasten in dieses Karussell einzuführen und
dann JavaScript zu verwenden, um diese Schaltflächen zu aktivieren.
Die Tasten würden verwendet werden, um
die Schiebeaktion dieses Karussell zu pausieren und zu spielen.
Also, einschließlich der Schaltfläche in unserem Karussell hier,
können wir auf eine Schaltfläche klicken, um die Gleitaktion des Karussell zu stoppen, und
dann können wir auf eine andere Schaltfläche klicken, um die Gleitaktion des Karussell fortzusetzen.
Also, das ist es, was wir in dieser Übung untersuchen können.
Um mit dieser Übung zu beginnen, gehen wir zur Seite index.html.
Und direkt nach der linken und rechten Steuerung unseres Karussell
werde ich ein div mit der Klasse Button-Gruppe vorstellen.
Dies wird also eine Schaltflächengruppe von zwei Schaltflächen hier einschließen, und dann mit einer ID von,
CarouselButton und
das div dort schließen.
Jetzt, in diesem, werde ich in zwei Tasten hinzufügen.
Also lassen Sie mich einen Knopf mit der Klasse btn, btn-danger,
btn-small und
einer ID von Karussell Pause hinzufügen.
Dies wird also als Pause-Taste fungieren, verlangsamt den Knopf dort.
Und für diese Schaltfläche, Ich werde
eine Schriftart als Symbol mit der Klasse fa fa vorstellen,
Pause, und schließen Sie die Spanne.
Dadurch wird eine Pause-Taste in die Gruppe der Karussell-Tasten eingeführt.
Ich werde dies kopieren und es erneut einfügen, um eine weitere Schaltfläche zu erstellen.
Dieser zweite Knopf, ich werde btn btn-Gefahr btn-sm nennen, und
dann wäre das Karussellspiel.
Und die Span-Klasse,
der Knopf wäre, wenn es hier spielen.
Lassen Sie uns sagen, die Änderungen und gehen Sie und werfen Sie einen kurzen Blick auf es auf der Webseite. Wenn
Sie einen Blick auf die Schaltflächen, wie sie in unserem Browser vorhanden
sind, können Sie sehen, dass diese beiden Schaltflächen jetzt in der linken Ecke meines Karussell positioniert sind.
Ich möchte diese Schaltflächen am rechten Rand neu positionieren,
damit es hier nicht zu diesem blauen, leeren Raum unter dem Bild kommt.
Lassen Sie mich also ein paar CSS-Eigenschaften verwenden, um diese Schaltflächen in
der rechten Spalte des Karussell neu zu positionieren.
Gehen Sie zu diesem Stil starten Sie CSS-Datei,
lassen Sie mich hier einige CSS-Code vorstellen.
Also für das Element mit der ID CarouselButtons
positioniere ich es am rechten Rand und unten, 0 Pixel hier.
Also diese beiden und dann die Position ist absolut.
Damit werden diese Knöpfe in der rechten Ecke meines Karussell positioniert.
Offensichtlich wird das Einführen der Knöpfe in das Karussell
keinem Zweck dienen.
Jetzt werden wir die JavaScript-Steuerelemente nutzen,
die das Karussell bereitstellt, indem wir ein wenig jQuery-Code
unten auf der Seite index.html schreiben, damit diese Schaltflächen ihre Arbeit erledigen.
Wir wollen in der Lage sein, die Gleitaktion meines Karussell zu pausieren und wieder aufzunehmen.
Gehen Sie zum Ende der Seite index.html, lassen Sie mich hier ein Skript vorstellen.
Dieses Skript sollte also einen
JavaScript-Code enthalten, der in jQuery-Syntax geschrieben wurde.
Also werde ich sagen,
$ (document) .ready (function), Und
diese Funktion sollte ein paar
Funktionen hier enthalten, um die Schaltflächen zu aktivieren.
Also würde ich sagen, Mykarussell.
Dies ist die ID des Karussell, das wir eingeführt werden,
also würden wir sagen, Karussell,
Intervall: 2000.
Das macht also das Gleitintervall des Karussell
auf 2000 Millisekunden oder 2 Sekunden.
Also mache ich es ein bisschen schneller für
die Gleitaktion im Karussell.
Fahren Sie hier mit dem jQuery-Code fort.
Ich werde jetzt den Pause-Button aktivieren, also werde ich Karussell Pause sagen.
Das ist also die ID, die ich dem Pause-Button gab.
Das ist also der Grund für die Angabe der ID.
Also möchte ich den Pause-Button aktivieren.
Also sage ich, wenn der Benutzer klickt.
So können Sie sehen, wie Sie die Syntax lesen.
Dies sagt also, für die Karussell-Pause-Taste,
wenn eine Klickaktion vom Benutzer ausgeführt wird, dann führen Sie
diese spezielle Funktion aus, die ich in diesem Code hier angebe.
Was ist die Funktion, die ich tun möchte?
Ich will in der Lage sein,
Pausieren Sie das Karussell.
Also würden wir sagen, Karussell ('Pause').
Jetzt sehen Sie, wie Sie die jQuery-basierten Steuerelemente verwendet haben.
Die JavaScript-Steuerelemente, die für die Bootstrap Carousel Komponente gegeben sind und
einige Code geschrieben, um das Karussell steuern zu können.
Ebenso möchte ich in der Lage sein, die Play-Schaltfläche zu aktivieren.
Wenn also auf die Play-Taste geklickt wird,
möchte ich, dass die Schiebeaktion des Karussell fortgesetzt wird.
Also werde ich diesen Code einfach kopieren, ihn dort einfügen.
Und dann würde ich sagen Karussell spielen,
klicken Sie auf Funktion mein Karussell und dann sagt die Funktion Karussell ('Zyklus'). Auf
diese Weise legen Sie fest, dass das Karussell
wieder gleiten soll wie zuvor.
Also diese, diese Funktion, die wir an den Play-Button hier befestigen.
Also mit diesen beiden,
unsere Funktion wird in diesem Dokument ready Funktion eingeführt.
Ihr könnt alle das Karussell aktivieren,
und die beiden Tasten, um das Verhalten unseres Karussell kontrollieren zu können.
Lassen Sie uns also die Veränderungen zeigen und schauen Sie sich das Verhalten unseres Karussell an. Wenn Sie
auf unsere Seite gehen, sehen Sie jetzt, dass sich Ihr Karussell sehr schnell bewegt,
weil ich das Intervall auf 2.000 Millisekunden oder 2 Sekunden eingestellt habe.
So sehen Sie alle zwei Sekunden die Gleitwirkung des Karussell.
Das ist definitiv ärgerlich.
Lassen Sie mich das also pausieren, indem Sie auf den Pause-Button klicken.
Wenn Sie also auf die Pause-Taste klicken, wird die Schiebeaktion Ihres Karussell angehalten.
Denn wenn Sie auf den Pause-Button klicken,
kommt die Funktion, die wir im JavaScript-Code eingeführt haben, in Aktion und
stoppt dann die Bewegung des Karussell.
Nun, wenn Sie fortsetzen möchten, klicken Sie auf den Play-Button und
dann sollte das Karussell seine Bewegung fortsetzen.
Wie Sie sehen können, beginnt das Karussell in dem Moment, in dem Sie auf einen Play-Button klicken.
Nun, natürlich, können Sie mehr zu verbessern, wie Sie diese Tasten erstellen und so weiter,
aber dies ist eine einfache Möglichkeit, die wir vorstellen können, um unser Karussell zu steuern.
Diese Übung veranschaulicht Ihnen, wie wir JavaScript-Code verwenden können,
um unsere Bootstrap JavaScript-basierten Komponenten steuern zu können.
Dies ist ein guter Zeitpunkt, um einen Kommentar
Ihres Codes mit der Nachricht Bootstrap jQuery zu machen.
( MUSIK)