In der Vorlesung zuvor haben wir verschiedene Möglichkeiten gesehen, Inhalte für die Nutzer zu enthüllen.
Dies wäre also ein Overlay auf
Ihrer Webseite, um die Informationen den Benutzern anzuzeigen. In dieser
Übung werden wir uns also zwei dieser Ansätze ansehen, QuickInfos und Modals.
Zuerst fügen wir einen Tooltip zu dieser Seite hinzu.
Also, gehen Sie zu index.html und im Jumbotron,
sehen wir diesen Knopf im Jumbotron dort.
Zu dieser Schaltfläche werde ich einen Tooltip hinzufügen. Wenn ich
also in diesen Button gehe,
gehe ich jetzt einfach in die nächste Zeile
, so dass es ein bisschen klarer ist, den Code dort zu schreiben und in diesen Button,
werde ich den Tooltip hier vorstellen.
Also, nach der Button-Warnung würde ich sagen,
data-toggle-tooltip, so dass Sie sehen können, dass
die JavaScript-Komponente hier und dann data-html-true verwendet wird.
Also, wenn wir dieses Daten-HTML-Attribut anwenden und es an true gesendet,
bedeutet das, dass der Tooltip-Inhalt mit
HTML gestylt werden kann und dann werden sie die nächste Zeile sagen,
ich werde das Attribut Titel geben.
Hier wird also der Inhalt des Tooltipps eingeschlossen.
Also werden wir sagen „oder rufen Sie uns an“.
Sie können also sehen, dass ich HTML verwende, um
den Inhalt des Tooltipps dort zu formatieren.
Damit wird der Tooltip in den Button dort eingeführt und auch das letzte Attribut, das
ich geben werde, ist die Datenplatzierung, die ich hier unten geben werde.
Also, was bedeutet, dass dieser Tooltip unten auf dieser Schaltfläche hier angezeigt wird.
Nachdem wir dies in die Schaltfläche hinzugefügt
haben, werden wir jetzt gehen und
einige JavaScript-Code am Ende dieser Seite hinzufügen, um diesen Tooltip zu aktivieren.
Gehen Sie zum Ende der Seite,
lassen Sie mich das Skript dort vorstellen, indem Sie die Tags für das Skript hinzufügen.
Innerhalb dieses werden wir den tatsächlichen JavaScript-Code hier definieren.
Also werden wir Dollar-Dokumente sagen.
Also, dieses Skript verwendet hier jQuery-Syntax.
Dies gibt also an, wann das Dokument bereit ist,
wenn dieses bestimmte HTML-Dokument
zum Rendern bereit ist und definieren diese spezielle Funktion hier aufrufen.
Also, wir liefern die JavaScript-Funktion
an diesem Punkt aufgerufen werden, so dass wir unsere Funktion angeben und dann werden wir
in Klammern Daten-toggle-tooltip und Tooltip sagen.
Das ist also der Code, den wir hier auf dieser Seite einführen werden.
Dies ist in jQuery-Syntax und wir werden jQuery ein wenig mehr im nächsten Modul abdecken.
Im Moment wird angegeben, dass überall dort, wo ein Attribut
dieser Art für dieses bestimmte HTML-Tag vorhanden ist,
die QuickInfo aktivieren.
Also, aber diese Änderung speichert die Änderungen und
dann gehen und werfen einen Blick darauf, wie der Tooltip auf der Webseite aussieht.
Gehen Sie auf die Webseite,
jetzt, wenn wir unseren Mauszeiger auf das Muster hier halten,
können Sie sehen, dass der Tooltip unten hier angezeigt wird.
Sie können also feststellen, dass der Inhalt dieses Tooltips
genau das ist, was wir als Titelattribut für diesen unteren Teil dort angegeben haben.
So können wir Tooltips zu unserer Seite hinzufügen.
QuickInfos sind eine nette Möglichkeit, zusätzliche Informationen für
den Benutzer bereitzustellen, wenn der Benutzer zu verschiedenen Orten auf der Seite navigiert.
Fortsetzung der Übung,
werden wir im nächsten Schritt ein Modal auf unserer Webseite erstellen.
Dieses Modal hostet das Anmeldeformular und wird über einen Link in ihrer Navigationsleiste angezeigt.
Um loszulegen,
rät Bootstrap, dass der gesamte modale Code oben auf Ihrer Seite platziert wird.
Also, ich gehe hinein und schreibe hier unter der Navbar,
ich werde dort in den Code für das Modal platzieren.
Um also ein Modal zu erstellen,
werde ich beginnen, indem ich div ID login modal sage.
Also geben wir diesem Modal eine ID, so dass es vom
Navbar-Link ausgelöst werden kann und dann als „modal fade“ klassifiziert werden kann.
Sie sehen also, dass die Klasse modal ist und fade bedeutet
, dass, wenn das Modal auf den Bildschirm gebracht wird,
es auf dem Bildschirm verblasst und die Rolle als Dialog ist.
Also, was bedeutet, dass es oben auf der Seite angezeigt wird.
Lassen Sie uns das div des Teils schließen.
Also hier drinnen werden wir das Modal erstellen.
Also, da drin werde ich das zweite div mit der Klasse als modal-dialog erstellen und dann
im Inneren werden wir hier den Inhalt
des tatsächlichen Modals definieren und das div schließen.
Und so soll dies der Modalinhalt hier strukturiert werden.
In diesem modalen Dialog werden wir also ein anderes div mit
dem modalen Inhalt der Klasse erstellen und
das div schließen und ein typischer Modal wird einen modal-Header enthalten.
Also, das ist, wo das nächste div hosten wird.
Und dann ein modaler Körper
, der einen Großteil der modalen verwandten Inhalte enthalten wird.
Alle diese Abschnitte des Modals sind optional,
aber zumindest sollten Sie einen solchen Abschnitt in Ihrem Modal haben,
sonst macht es keinen Sinn, das Modal dort zu erstellen.
Damit ist die Struktur des Modals jetzt fertig.
Also werden wir hineingehen und den Inhalt in dieses Modal ausfüllen.
Also jetzt müssen wir definieren, was in das Modal geht.
Jetzt werden wir in der Kopfzeile eine Schaltfläche einfügen,
eine Kreuzung im Modal, die beim Klicken das Modal verwirft.
Das ist die übliche Art und Weise, wie Modale entworfen werden.
Und der Modalkörper wird selbst die Form enthalten.
Nun kann ein Modal alles enthalten, was Sie wollen.
Wenn Sie beispielsweise auf ein Bild in
einer Bildergalerie klicken und die größere Größe des Bildes anzeigen möchten,
können Sie auch dort ein Modal verwenden, um die Informationen anzuzeigen.
Jetzt in dieser Übung
werden wir das Modal verwenden, um ein Formular zu hosten, das für den Benutzer angezeigt wird.
Okay, jetzt, im modalen Header,
werden wir eine Schaltfläche mit
dem Typ-Button und Klasse schließen einführen.
Sie sehen also, dass dies eine Schaltfläche ist, die verwendet wird, um das Modal zu schließen, und dann werden Sie sagen,
Data-Dismiss und dann modal.
Was das bedeutet, ist, dass diese spezielle Schaltfläche,
wenn sie angeklickt wird, das Modal vom Bildschirm entfernt.
Und dieser Knopf, ich werde die Zeiten verwenden,
wird hier als Kreuz in den Modals angezeigt.
Also würde ich mal hier sagen.
Vor dieser Schaltfläche werden wir
einen Header einführen, den wir in der Kopfzeile des Modals anzeigen
werden, so dass ich mit einem h4 mit dem modalen Klassentitel beginnen werde.
Und dann in diesem h4
werde ich den Titel des Modals einschließen
, der Login ist, weil dies das Anmeldeformular anzeigen wird.
Nun, da wir einige Details in dieses Modal eingefügt haben,
fügen wir den Link in unsere Navbar hinzu, die
dieses Modal auslösen wird, und dann werden wir
einen kurzen Blick darauf werfen, wie das Modal auf dem Bildschirm aussieht.
Gehen Sie in die Navbar,
direkt nach der UL hier,
werde ich in
einen Link einschließen, der verwendet werden kann, um das Ein- und Ausblenden des Modals auszulösen.
Um das zu tun, werde ich eingehen und eine Spanne mit der Klasse navbar-Text verwenden.
Dies ermöglicht es mir, einen Link in die Navigationsleiste einzubinden und ihn als Text anzuzeigen.
Also, innerhalb der Spanne,
werde ich ein A mit dem Datenumschalter verwenden,
so dass Sie sehen können, dass der JavaScript-Daten-Toggle hereinkommt und
der Daten-Toggle für ein modales und dann Datenziel ist.
Sie erinnern sich, dass wir die ID als Login modal an unsere-
Modal gegeben hatten, die wir aufgenommen haben.
Also werde ich das als mein Datenziel mit dem Hash davor verwenden.
Und hier drinnen werde ich hineingehen und
eine Schriftart genial Symbol für einen Login verwenden.
Also, dies ist ein Schriftart genial „fa- anmelden“
Symbol und sagen, loggen Sie sich ein und schließen Sie die E-Tech.
Lassen Sie uns also die Änderungen speichern und einen Blick auf die Webseite werfen. Wenn Sie
auf unsere Webseite im Browser gehen,
sehen Sie jetzt, dass
Sie am rechten Rand dieses Login mit diesem dort erstellten Symbol sehen.
Dies ist also der Link, der die Anzeige des Modals auslösen wird.
Wenn ich also auf diesen Link klicke,
wird das Modal auf dem Bildschirm angezeigt.
Beachten Sie also, dass, als wir dieses Modal erstellt haben, wir sagten
, Header, der den Login enthielt und dann auch diese Schaltfläche und dann den Körper
, der derzeit leer ist, wir werden mehr Code darin einführen.
Wenn Sie nun auf diese Schaltfläche klicken, verschwindet das Modal.
Klicken Sie nochmals darauf, das Modal wird angezeigt.
Selbst wenn Sie außerhalb des Modals klicken, wird das Modal ausgeblendet.
Das ist also das Verhalten des Modals, das wir erwartet haben.
Nun, im nächsten Schritt werde ich eingehen und das Formular hier vorstellen.
Ich werde die Details des Formulars nicht erklären, weil Sie
bereits Formulare in einem der früheren Lektionen studiert haben.
Also gehe ich einfach rein und füge den Formularcode
ein und dann schauen wir uns das Formular im Modal hier an. Wenn Sie
zum Code zurückkommen,
können Sie jetzt sehen, dass
ich im modalen Körper ein Formular ausgefüllt habe.
Und dann habe ich zwei Formulargruppen hier mit einer Eingabe mit dem Typ E-Mail
und Eingabetyp Passwort und dann habe ich hier ein Kontrollkästchen, das ich habe.
Also, dies sollte leicht für Sie sein zu entziffern, was dieses Formular Codestruktur-EEs ist,
aus Ihrem Verständnis, wie Bootstrap-Formulare entworfen werden.
Ich habe zwei Knöpfe eingelegt.
Eine ist eine Schaltfläche zum Senden und eine andere ist eine Schaltfläche zum Abbrechen.
Die Schaltfläche „Abbrechen“ hat die erste.
Die Schaltfläche Abbrechen hier hat Daten schließen Modell.
Das heißt, wenn Sie auf die Schaltfläche Abbrechen klicken, wird das Modell verworfen.
Und der andere ist ein Submit-Button, der verwendet wird, um das Formular zu senden.
Also mit diesen Änderungen,
lassen Sie uns die Änderungen speichern und dann gehen und werfen Sie einen Blick auf unsere Webseite.
Gehen Sie zurück zur Webseite,
klicken Sie jetzt auf den Login, dann sehen Sie ein Formular für einen Benutzer, um sich anzumelden.
Sie werden also sehen, dass Sie hier zwei Boxen haben.
Eingabefelder hier für die Eingabe von E-Mail
und Passwort, und dann ein Kontrollkästchen für sagen Remember me.
Und dann haben Sie eine Anmeldung und eine Stornierung.
Wenn Sie also auf den Abbrechen klicken, wird das Modal verschwinden.
Genau wie wenn Sie dort auf das Kreuz klicken.
Und wenn Sie diese Informationen ausfüllen und weiterhin auf Anmelden klicken,
sollte der Anmeldeprozess initiiert werden.
In diesem Moment haben wir keinen Server, damit dies funktioniert,
aber ich zeige Ihnen nur in Bootstrap, wie Sie ein Formular wie dieses erstellen würden.
Ich bin mir sicher, dass Sie Dinge wie diese auf
vielen Websites gesehen haben, wo, wenn Sie auf einen Login-Button klicken,
so etwas mit dem Formular erscheint auf dem Bildschirm
und erwartet, dass Sie die Informationen eingeben.
Jetzt sehen Sie, wie Sie Modelle nutzen können, um
Informationen über Ihre Webseite anzuzeigen.
Damit schließen wir diese Übung ab.
In dieser Übung haben wir die Verwendung von Tooltips gesehen
und wir haben die Verwendung von Modellen gesehen, um Inhalte anzuzeigen.
Dies ist ein guter Zeitpunkt für Sie, eine git-commint mit den Nachrichten-Tool-Tipps und -Modellen zu machen.