1 00:00:03,580 --> 00:00:09,250 In der Vorlesung zuvor haben wir verschiedene Möglichkeiten gesehen, Inhalte für die Nutzer zu enthüllen. 2 00:00:09,250 --> 00:00:11,870 Dies wäre also ein Overlay auf 3 00:00:11,870 --> 00:00:17,880 Ihrer Webseite, um die Informationen den Benutzern anzuzeigen. In dieser 4 00:00:17,880 --> 00:00:21,575 Übung werden wir uns also zwei dieser Ansätze ansehen, QuickInfos und Modals. 5 00:00:21,575 --> 00:00:25,300 Zuerst fügen wir einen Tooltip zu dieser Seite hinzu. 6 00:00:25,300 --> 00:00:29,040 Also, gehen Sie zu index.html und im Jumbotron, 7 00:00:29,040 --> 00:00:33,305 sehen wir diesen Knopf im Jumbotron dort. 8 00:00:33,305 --> 00:00:36,000 Zu dieser Schaltfläche werde ich einen Tooltip hinzufügen. Wenn ich 9 00:00:36,000 --> 00:00:38,125 also in diesen Button gehe, 10 00:00:38,125 --> 00:00:44,380 gehe ich jetzt einfach in die nächste Zeile 11 00:00:44,380 --> 00:00:50,420 , so dass es ein bisschen klarer ist, den Code dort zu schreiben und in diesen Button, 12 00:00:50,420 --> 00:00:53,535 werde ich den Tooltip hier vorstellen. 13 00:00:53,535 --> 00:00:57,740 Also, nach der Button-Warnung würde ich sagen, 14 00:00:58,560 --> 00:01:04,550 data-toggle-tooltip, so dass Sie sehen können, dass 15 00:01:04,550 --> 00:01:12,230 die JavaScript-Komponente hier und dann data-html-true verwendet wird. 16 00:01:12,230 --> 00:01:17,630 Also, wenn wir dieses Daten-HTML-Attribut anwenden und es an true gesendet, 17 00:01:17,630 --> 00:01:21,965 bedeutet das, dass der Tooltip-Inhalt mit 18 00:01:21,965 --> 00:01:27,060 HTML gestylt werden kann und dann werden sie die nächste Zeile sagen, 19 00:01:27,060 --> 00:01:31,165 ich werde das Attribut Titel geben. 20 00:01:31,165 --> 00:01:35,680 Hier wird also der Inhalt des Tooltipps eingeschlossen. 21 00:01:35,680 --> 00:01:42,090 Also werden wir sagen „oder rufen Sie uns an“. 22 00:01:45,810 --> 00:01:52,950 Sie können also sehen, dass ich HTML verwende, um 23 00:01:52,950 --> 00:02:02,510 den Inhalt des Tooltipps dort zu formatieren. 24 00:02:06,070 --> 00:02:16,315 Damit wird der Tooltip in den Button dort eingeführt und auch das letzte Attribut, das 25 00:02:16,315 --> 00:02:26,095 ich geben werde, ist die Datenplatzierung, die ich hier unten geben werde. 26 00:02:26,095 --> 00:02:32,700 Also, was bedeutet, dass dieser Tooltip unten auf dieser Schaltfläche hier angezeigt wird. 27 00:02:32,700 --> 00:02:36,815 Nachdem wir dies in die Schaltfläche hinzugefügt 28 00:02:36,815 --> 00:02:38,610 haben, werden wir jetzt gehen und 29 00:02:38,610 --> 00:02:45,130 einige JavaScript-Code am Ende dieser Seite hinzufügen, um diesen Tooltip zu aktivieren. 30 00:02:45,130 --> 00:02:47,505 Gehen Sie zum Ende der Seite, 31 00:02:47,505 --> 00:02:57,470 lassen Sie mich das Skript dort vorstellen, indem Sie die Tags für das Skript hinzufügen. 32 00:02:57,470 --> 00:03:04,665 Innerhalb dieses werden wir den tatsächlichen JavaScript-Code hier definieren. 33 00:03:04,665 --> 00:03:07,790 Also werden wir Dollar-Dokumente sagen. 34 00:03:07,790 --> 00:03:13,910 Also, dieses Skript verwendet hier jQuery-Syntax. 35 00:03:15,890 --> 00:03:20,880 Dies gibt also an, wann das Dokument bereit ist, 36 00:03:20,880 --> 00:03:23,810 wenn dieses bestimmte HTML-Dokument 37 00:03:23,810 --> 00:03:28,775 zum Rendern bereit ist und definieren diese spezielle Funktion hier aufrufen. 38 00:03:28,775 --> 00:03:32,790 Also, wir liefern die JavaScript-Funktion 39 00:03:32,790 --> 00:03:37,780 an diesem Punkt aufgerufen werden, so dass wir unsere Funktion angeben und dann werden wir 40 00:03:38,570 --> 00:03:51,510 in Klammern Daten-toggle-tooltip und Tooltip sagen. 41 00:03:53,240 --> 00:04:01,315 Das ist also der Code, den wir hier auf dieser Seite einführen werden. 42 00:04:01,315 --> 00:04:09,255 Dies ist in jQuery-Syntax und wir werden jQuery ein wenig mehr im nächsten Modul abdecken. 43 00:04:09,255 --> 00:04:13,995 Im Moment wird angegeben, dass überall dort, wo ein Attribut 44 00:04:13,995 --> 00:04:19,650 dieser Art für dieses bestimmte HTML-Tag vorhanden ist, 45 00:04:19,650 --> 00:04:21,570 die QuickInfo aktivieren. 46 00:04:21,570 --> 00:04:25,420 Also, aber diese Änderung speichert die Änderungen und 47 00:04:25,420 --> 00:04:30,510 dann gehen und werfen einen Blick darauf, wie der Tooltip auf der Webseite aussieht. 48 00:04:30,510 --> 00:04:32,760 Gehen Sie auf die Webseite, 49 00:04:32,760 --> 00:04:36,600 jetzt, wenn wir unseren Mauszeiger auf das Muster hier halten, 50 00:04:36,600 --> 00:04:40,755 können Sie sehen, dass der Tooltip unten hier angezeigt wird. 51 00:04:40,755 --> 00:04:44,950 Sie können also feststellen, dass der Inhalt dieses Tooltips 52 00:04:44,950 --> 00:04:50,115 genau das ist, was wir als Titelattribut für diesen unteren Teil dort angegeben haben. 53 00:04:50,115 --> 00:04:54,095 So können wir Tooltips zu unserer Seite hinzufügen. 54 00:04:54,095 --> 00:04:58,030 QuickInfos sind eine nette Möglichkeit, zusätzliche Informationen für 55 00:04:58,030 --> 00:05:03,370 den Benutzer bereitzustellen, wenn der Benutzer zu verschiedenen Orten auf der Seite navigiert. 56 00:05:03,370 --> 00:05:06,790 Fortsetzung der Übung, 57 00:05:06,790 --> 00:05:10,045 werden wir im nächsten Schritt ein Modal auf unserer Webseite erstellen. 58 00:05:10,045 --> 00:05:17,665 Dieses Modal hostet das Anmeldeformular und wird über einen Link in ihrer Navigationsleiste angezeigt. 59 00:05:17,665 --> 00:05:19,720 Um loszulegen, 60 00:05:19,720 --> 00:05:26,700 rät Bootstrap, dass der gesamte modale Code oben auf Ihrer Seite platziert wird. 61 00:05:26,700 --> 00:05:31,530 Also, ich gehe hinein und schreibe hier unter der Navbar, 62 00:05:31,530 --> 00:05:34,455 ich werde dort in den Code für das Modal platzieren. 63 00:05:34,455 --> 00:05:36,080 Um also ein Modal zu erstellen, 64 00:05:36,080 --> 00:05:43,400 werde ich beginnen, indem ich div ID login modal sage. 65 00:05:43,400 --> 00:05:48,355 Also geben wir diesem Modal eine ID, so dass es vom 66 00:05:48,355 --> 00:05:53,895 Navbar-Link ausgelöst werden kann und dann als „modal fade“ klassifiziert werden kann. 67 00:05:53,895 --> 00:05:56,910 Sie sehen also, dass die Klasse modal ist und fade bedeutet 68 00:05:56,910 --> 00:06:00,220 , dass, wenn das Modal auf den Bildschirm gebracht wird, 69 00:06:00,220 --> 00:06:07,185 es auf dem Bildschirm verblasst und die Rolle als Dialog ist. 70 00:06:07,185 --> 00:06:11,625 Also, was bedeutet, dass es oben auf der Seite angezeigt wird. 71 00:06:11,625 --> 00:06:14,195 Lassen Sie uns das div des Teils schließen. 72 00:06:14,195 --> 00:06:18,415 Also hier drinnen werden wir das Modal erstellen. 73 00:06:18,415 --> 00:06:28,510 Also, da drin werde ich das zweite div mit der Klasse als modal-dialog erstellen und dann 74 00:06:28,510 --> 00:06:32,620 im Inneren werden wir hier den Inhalt 75 00:06:32,620 --> 00:06:39,550 des tatsächlichen Modals definieren und das div schließen. 76 00:06:39,550 --> 00:06:45,220 Und so soll dies der Modalinhalt hier strukturiert werden. 77 00:06:45,220 --> 00:06:51,370 In diesem modalen Dialog werden wir also ein anderes div mit 78 00:06:51,370 --> 00:07:00,770 dem modalen Inhalt der Klasse erstellen und 79 00:07:00,770 --> 00:07:10,350 das div schließen und ein typischer Modal wird einen modal-Header enthalten. 80 00:07:10,350 --> 00:07:14,255 Also, das ist, wo das nächste div hosten wird. 81 00:07:14,255 --> 00:07:23,635 Und dann ein modaler Körper 82 00:07:23,635 --> 00:07:28,980 , der einen Großteil der modalen verwandten Inhalte enthalten wird. 83 00:07:28,980 --> 00:07:34,835 Alle diese Abschnitte des Modals sind optional, 84 00:07:34,835 --> 00:07:38,020 aber zumindest sollten Sie einen solchen Abschnitt in Ihrem Modal haben, 85 00:07:38,020 --> 00:07:41,645 sonst macht es keinen Sinn, das Modal dort zu erstellen. 86 00:07:41,645 --> 00:07:46,455 Damit ist die Struktur des Modals jetzt fertig. 87 00:07:46,455 --> 00:07:50,550 Also werden wir hineingehen und den Inhalt in dieses Modal ausfüllen. 88 00:07:50,550 --> 00:07:54,005 Also jetzt müssen wir definieren, was in das Modal geht. 89 00:07:54,005 --> 00:07:57,505 Jetzt werden wir in der Kopfzeile eine Schaltfläche einfügen, 90 00:07:57,505 --> 00:08:01,770 eine Kreuzung im Modal, die beim Klicken das Modal verwirft. 91 00:08:01,770 --> 00:08:05,715 Das ist die übliche Art und Weise, wie Modale entworfen werden. 92 00:08:05,715 --> 00:08:08,805 Und der Modalkörper wird selbst die Form enthalten. 93 00:08:08,805 --> 00:08:12,610 Nun kann ein Modal alles enthalten, was Sie wollen. 94 00:08:12,610 --> 00:08:16,040 Wenn Sie beispielsweise auf ein Bild in 95 00:08:16,040 --> 00:08:19,630 einer Bildergalerie klicken und die größere Größe des Bildes anzeigen möchten, 96 00:08:19,630 --> 00:08:24,415 können Sie auch dort ein Modal verwenden, um die Informationen anzuzeigen. 97 00:08:24,415 --> 00:08:26,280 Jetzt in dieser Übung 98 00:08:26,280 --> 00:08:31,765 werden wir das Modal verwenden, um ein Formular zu hosten, das für den Benutzer angezeigt wird. 99 00:08:31,765 --> 00:08:35,695 Okay, jetzt, im modalen Header, 100 00:08:35,695 --> 00:08:40,175 werden wir eine Schaltfläche mit 101 00:08:40,175 --> 00:08:49,170 dem Typ-Button und Klasse schließen einführen. 102 00:08:49,170 --> 00:08:59,080 Sie sehen also, dass dies eine Schaltfläche ist, die verwendet wird, um das Modal zu schließen, und dann werden Sie sagen, 103 00:08:59,080 --> 00:09:04,685 Data-Dismiss und dann modal. 104 00:09:04,685 --> 00:09:07,180 Was das bedeutet, ist, dass diese spezielle Schaltfläche, 105 00:09:07,180 --> 00:09:09,845 wenn sie angeklickt wird, das Modal vom Bildschirm entfernt. 106 00:09:09,845 --> 00:09:18,700 Und dieser Knopf, ich werde die Zeiten verwenden, 107 00:09:21,100 --> 00:09:24,900 wird hier als Kreuz in den Modals angezeigt. 108 00:09:24,900 --> 00:09:27,380 Also würde ich mal hier sagen. 109 00:09:27,380 --> 00:09:30,549 Vor dieser Schaltfläche werden wir 110 00:09:30,549 --> 00:09:36,470 einen Header einführen, den wir in der Kopfzeile des Modals anzeigen 111 00:09:36,470 --> 00:09:46,180 werden, so dass ich mit einem h4 mit dem modalen Klassentitel beginnen werde. 112 00:09:46,180 --> 00:09:48,635 Und dann in diesem h4 113 00:09:48,635 --> 00:09:52,200 werde ich den Titel des Modals einschließen 114 00:09:52,200 --> 00:09:56,995 , der Login ist, weil dies das Anmeldeformular anzeigen wird. 115 00:09:56,995 --> 00:10:01,625 Nun, da wir einige Details in dieses Modal eingefügt haben, 116 00:10:01,625 --> 00:10:06,110 fügen wir den Link in unsere Navbar hinzu, die 117 00:10:06,110 --> 00:10:07,770 dieses Modal auslösen wird, und dann werden wir 118 00:10:07,770 --> 00:10:11,515 einen kurzen Blick darauf werfen, wie das Modal auf dem Bildschirm aussieht. 119 00:10:11,515 --> 00:10:14,280 Gehen Sie in die Navbar, 120 00:10:14,280 --> 00:10:16,095 direkt nach der UL hier, 121 00:10:16,095 --> 00:10:17,845 werde ich in 122 00:10:17,845 --> 00:10:22,910 einen Link einschließen, der verwendet werden kann, um das Ein- und Ausblenden des Modals auszulösen. 123 00:10:22,910 --> 00:10:31,080 Um das zu tun, werde ich eingehen und eine Spanne mit der Klasse navbar-Text verwenden. 124 00:10:31,080 --> 00:10:37,950 Dies ermöglicht es mir, einen Link in die Navigationsleiste einzubinden und ihn als Text anzuzeigen. 125 00:10:37,950 --> 00:10:39,995 Also, innerhalb der Spanne, 126 00:10:39,995 --> 00:10:45,345 werde ich ein A mit dem Datenumschalter verwenden, 127 00:10:45,345 --> 00:10:50,010 so dass Sie sehen können, dass der JavaScript-Daten-Toggle hereinkommt und 128 00:10:50,010 --> 00:10:55,400 der Daten-Toggle für ein modales und dann Datenziel ist. 129 00:10:55,400 --> 00:11:03,940 Sie erinnern sich, dass wir die ID als Login modal an unsere- 130 00:11:04,170 --> 00:11:06,460 Modal gegeben hatten, die wir aufgenommen haben. 131 00:11:06,460 --> 00:11:11,950 Also werde ich das als mein Datenziel mit dem Hash davor verwenden. 132 00:11:11,950 --> 00:11:15,815 Und hier drinnen werde ich hineingehen und 133 00:11:15,815 --> 00:11:24,520 eine Schriftart genial Symbol für einen Login verwenden. 134 00:11:24,520 --> 00:11:28,710 Also, dies ist ein Schriftart genial „fa- anmelden“ 135 00:11:28,800 --> 00:11:37,945 Symbol und sagen, loggen Sie sich ein und schließen Sie die E-Tech. 136 00:11:37,945 --> 00:11:43,975 Lassen Sie uns also die Änderungen speichern und einen Blick auf die Webseite werfen. Wenn Sie 137 00:11:43,975 --> 00:11:47,265 auf unsere Webseite im Browser gehen, 138 00:11:47,265 --> 00:11:50,530 sehen Sie jetzt, dass 139 00:11:50,530 --> 00:11:56,680 Sie am rechten Rand dieses Login mit diesem dort erstellten Symbol sehen. 140 00:11:56,680 --> 00:12:00,850 Dies ist also der Link, der die Anzeige des Modals auslösen wird. 141 00:12:00,850 --> 00:12:02,530 Wenn ich also auf diesen Link klicke, 142 00:12:02,530 --> 00:12:05,015 wird das Modal auf dem Bildschirm angezeigt. 143 00:12:05,015 --> 00:12:08,500 Beachten Sie also, dass, als wir dieses Modal erstellt haben, wir sagten 144 00:12:08,500 --> 00:12:14,565 , Header, der den Login enthielt und dann auch diese Schaltfläche und dann den Körper 145 00:12:14,565 --> 00:12:17,605 , der derzeit leer ist, wir werden mehr Code darin einführen. 146 00:12:17,605 --> 00:12:20,860 Wenn Sie nun auf diese Schaltfläche klicken, verschwindet das Modal. 147 00:12:20,860 --> 00:12:23,170 Klicken Sie nochmals darauf, das Modal wird angezeigt. 148 00:12:23,170 --> 00:12:25,470 Selbst wenn Sie außerhalb des Modals klicken, wird das Modal ausgeblendet. 149 00:12:25,470 --> 00:12:30,985 Das ist also das Verhalten des Modals, das wir erwartet haben. 150 00:12:30,985 --> 00:12:36,275 Nun, im nächsten Schritt werde ich eingehen und das Formular hier vorstellen. 151 00:12:36,275 --> 00:12:39,990 Ich werde die Details des Formulars nicht erklären, weil Sie 152 00:12:39,990 --> 00:12:43,924 bereits Formulare in einem der früheren Lektionen studiert haben. 153 00:12:43,924 --> 00:12:47,830 Also gehe ich einfach rein und füge den Formularcode 154 00:12:47,830 --> 00:12:52,370 ein und dann schauen wir uns das Formular im Modal hier an. Wenn Sie 155 00:12:52,370 --> 00:12:54,505 zum Code zurückkommen, 156 00:12:54,505 --> 00:12:57,640 können Sie jetzt sehen, dass 157 00:12:57,640 --> 00:13:01,115 ich im modalen Körper ein Formular ausgefüllt habe. 158 00:13:01,115 --> 00:13:07,850 Und dann habe ich zwei Formulargruppen hier mit einer Eingabe mit dem Typ E-Mail 159 00:13:07,850 --> 00:13:14,795 und Eingabetyp Passwort und dann habe ich hier ein Kontrollkästchen, das ich habe. 160 00:13:14,795 --> 00:13:21,970 Also, dies sollte leicht für Sie sein zu entziffern, was dieses Formular Codestruktur-EEs ist, 161 00:13:21,970 --> 00:13:26,505 aus Ihrem Verständnis, wie Bootstrap-Formulare entworfen werden. 162 00:13:26,505 --> 00:13:28,250 Ich habe zwei Knöpfe eingelegt. 163 00:13:28,250 --> 00:13:33,060 Eine ist eine Schaltfläche zum Senden und eine andere ist eine Schaltfläche zum Abbrechen. 164 00:13:33,060 --> 00:13:36,440 Die Schaltfläche „Abbrechen“ hat die erste. 165 00:13:36,440 --> 00:13:41,580 Die Schaltfläche Abbrechen hier hat Daten schließen Modell. 166 00:13:41,580 --> 00:13:45,215 Das heißt, wenn Sie auf die Schaltfläche Abbrechen klicken, wird das Modell verworfen. 167 00:13:45,215 --> 00:13:50,170 Und der andere ist ein Submit-Button, der verwendet wird, um das Formular zu senden. 168 00:13:50,170 --> 00:13:51,480 Also mit diesen Änderungen, 169 00:13:51,480 --> 00:13:55,550 lassen Sie uns die Änderungen speichern und dann gehen und werfen Sie einen Blick auf unsere Webseite. 170 00:13:55,550 --> 00:13:57,205 Gehen Sie zurück zur Webseite, 171 00:13:57,205 --> 00:14:04,045 klicken Sie jetzt auf den Login, dann sehen Sie ein Formular für einen Benutzer, um sich anzumelden. 172 00:14:04,045 --> 00:14:07,025 Sie werden also sehen, dass Sie hier zwei Boxen haben. 173 00:14:07,025 --> 00:14:09,850 Eingabefelder hier für die Eingabe von E-Mail 174 00:14:09,850 --> 00:14:12,870 und Passwort, und dann ein Kontrollkästchen für sagen Remember me. 175 00:14:12,870 --> 00:14:15,320 Und dann haben Sie eine Anmeldung und eine Stornierung. 176 00:14:15,320 --> 00:14:17,860 Wenn Sie also auf den Abbrechen klicken, wird das Modal verschwinden. 177 00:14:17,860 --> 00:14:20,710 Genau wie wenn Sie dort auf das Kreuz klicken. 178 00:14:20,710 --> 00:14:23,915 Und wenn Sie diese Informationen ausfüllen und weiterhin auf Anmelden klicken, 179 00:14:23,915 --> 00:14:26,120 sollte der Anmeldeprozess initiiert werden. 180 00:14:26,120 --> 00:14:29,885 In diesem Moment haben wir keinen Server, damit dies funktioniert, 181 00:14:29,885 --> 00:14:34,640 aber ich zeige Ihnen nur in Bootstrap, wie Sie ein Formular wie dieses erstellen würden. 182 00:14:34,640 --> 00:14:37,240 Ich bin mir sicher, dass Sie Dinge wie diese auf 183 00:14:37,240 --> 00:14:40,610 vielen Websites gesehen haben, wo, wenn Sie auf einen Login-Button klicken, 184 00:14:40,610 --> 00:14:43,220 so etwas mit dem Formular erscheint auf dem Bildschirm 185 00:14:43,220 --> 00:14:46,585 und erwartet, dass Sie die Informationen eingeben. 186 00:14:46,585 --> 00:14:50,160 Jetzt sehen Sie, wie Sie Modelle nutzen können, um 187 00:14:50,160 --> 00:14:54,740 Informationen über Ihre Webseite anzuzeigen. 188 00:14:54,740 --> 00:14:57,910 Damit schließen wir diese Übung ab. 189 00:14:57,910 --> 00:15:01,950 In dieser Übung haben wir die Verwendung von Tooltips gesehen 190 00:15:01,950 --> 00:15:06,835 und wir haben die Verwendung von Modellen gesehen, um Inhalte anzuzeigen. 191 00:15:06,835 --> 00:15:14,200 Dies ist ein guter Zeitpunkt für Sie, eine git-commint mit den Nachrichten-Tool-Tipps und -Modellen zu machen.