Share
In Bezug auf JavaScript in BS3 hat sich nicht viel geändert. Die überwiegende Mehrheit der Änderungen, die wir bisher gesehen haben, drehte sich um CSS und Komponenten. Dafür gibt es einen Grund.
Die meisten JavaScript-Funktionen von BS2 (und damit auch von BS3) werden in Form von Datenattributen bereitgestellt. In den meisten Fällen haben wir bereits gesehen, wie Sie diese in den verschiedenen Abschnitten zu Komponenten verwenden können, was nur sehr wenig JavaScript-spezifische Aspekte mit sich bringt.
In diesem Tutorial werde ich daher die meisten verfügbaren Funktionen kurz durchgehen. Wo sonst keine Beschreibung in der Serie zu finden ist, zeige ich ein kurzes Beispiel für die Verwendung der verfügbaren API.
Die in BS2 und BS3 verfügbaren JS-Funktionen sind sehr erweiterbar, und selbst eine ganze Reihe von Tutorials könnte wahrscheinlich nicht alles abdecken, was möglich ist. Ich empfehle Ihnen daher dringend, zur Bootstrap-Website zu gehen und den Abschnitt zu JavaScript durchzulesen.
Das erste, was jemand erwähnt, wenn das Thema JavaScript in Bootstrap erscheint, sind die modalen Dialogfelder - und das ist wenig überraschend.
Die modalen Boxen von BS3 sind eine der einfachsten (und eine der reichsten) Implementierungen, die in den modernen Browser-HTML5-Frameworks zu sehen sind.
Ihre Verwendung ist einfach, erfordert aber leider eine Menge Markup.
Der folgende Code gibt Ihnen ein sehr einfaches Beispiel:
Modalbeispiel, hergestellt nach MusterUm eine Modalität anzuzeigen, müssen Sie zunächst ein Triggerziel haben. Im obigen Beispiel ist dies die markierte Schaltfläche In diesem Beispiel der äußerste Ihr Abzug muss kein Knopf sein; Dies kann alles sein, was einen Mausklick akzeptieren kann (oder eingerichtet ist), solange die Attribute Toggle und Zieldaten bereitgestellt werden. Sobald wir uns mit dem Modal befassen, werden Sie sehen, dass die Struktur aus einer Reihe von tief verschachtelten besteht Sie werden auch bemerken, dass es wieder ein gemeinsames Thema ist, Dinge zu kennzeichnen, um sie für Bildschirmleser freundlich zu machen, und ich kann dies nicht genug betonen: Sie sollten alles tun, um sicherzustellen, dass Ihr Markup so freundlich ist Eingabehilfen wie möglich. Ein Modal beginnt mit einem Äußeren Der nächste Wenn Sie die modale Inhalts-Shell definiert haben, können Sie drei weitere hinzufügen Aus dem obigen Code können Sie ersehen, dass wir ein schließendes Kreuz einfügen, wie wir es für Alert-Boxen getan haben. Der einzige Unterschied zwischen diesem Schlusskreuz und dem zuvor gesehenen ist, dass das Abgesehen von dem Symbol "Schließen" ist der restliche Inhalt des Modals normales BS3-Markup und CSS. Alles, was Sie anderswo in einem Modal verwenden können, und wenn es für den Bildschirm zu groß ist, erhalten Sie einen inneren Container, der automatisch zu einem scrollbaren Element wechselt. Es gibt auch zwei optionale Breitengrößen. diese werden dem inneren hinzugefügt Sie können das Modal auch mithilfe der JavaScript-API auf eine standardmäßige jQuery-Art initialisieren. Wenn Sie das Verhalten der Standardoption ändern möchten, ist die Verwendung des JQ-Konstruktors die einzige Möglichkeit. Folgende Optionen können geändert werden: Es gibt auch eine Reihe von Ereignissen, die für bestimmte Aktionen ausgelöst werden, die jedoch den Rahmen dieses Tutorials sprengen würden. Wenn Sie sich erinnern, habe ich bereits im Abschnitt zur grundlegenden Navigation erwähnt, dass die Registerkartenkomponente mit zusätzlichen Markierungen versehen werden kann, um das Austauschen von Inhaltsbereichen tatsächlich für Sie zu erledigen. Um eine Gruppe von Registerkarten zu markieren, die sich automatisch mit JavaScript ändern, müssen Sie zunächst eine Registerkarte erstellen Nachdem Sie das Navigationsset erstellt haben, müssen Sie ein äußeres erstellen Der folgende Code zeigt ein Beispiel dafür: Durch das Verfeinern leben wir… Heute sagt uns die Wissenschaft, dass die… Du und ich sind Lebensformen der Quantensuppe… Das Registersteuerelement verfügt nicht über einen Konstruktor, der Optionen wie Modal verwendet, aber es hat einen API-Aufruf, mit dem Sie festlegen können, welches Register programmgesteuert angezeigt werden soll. Dazu brauchen Sie nur jQuery, um den entsprechenden Selektor auszuwählen und dann aufzurufen Jeder liebt Tooltips - einfache kleine Popup-Tags, die für Hilfe und viele andere einfache, beschreibende Aufgaben verwendet werden können. Die Verwendung eines Tooltips in BS3 ist unglaublich einfach. Weisen Sie einfach ein Datenattribut von zu Der folgende Code erstellt eine einfache Schaltfläche mit einer QuickInfo an der Oberseite: Es gibt einen kleinen Vorbehalt, der für Tooltips gilt, jedoch nicht für andere Elemente: Sie müssen Tooltips selbst initialisieren. Sie können verschiedene Optionen gleichzeitig übergeben (genau wie bei Modals), Sie MÜSSEN sie jedoch MÜSSEN, oder Ihre Tooltips werden nicht angezeigt. Um die im vorherigen Beispiel gezeigte Schaltfläche zu initialisieren, platzieren Sie die folgende JavaScript-Zeile irgendwo auf Ihrer Seite, damit sie ausgeführt wird, sobald das DOM fertig ist und die Schaltfläche erstellt wurde: Es liegt ganz bei Ihnen, wie Sie Ihre Schaltflächen auswählen. Sie können sie beispielsweise über ihren Elementtyp auswählen, müssen jedoch aufrufen Wenn alles wie erwartet funktioniert, sollten Sie Folgendes sehen: Hinter dem einfachen Tooltip befindet sich der Popover. Wie der Tooltip muss er manuell mit einem Aufruf an initialisiert werden Eine QuickInfo enthält normalerweise nur eine einfache Textzeile, während ein Popover größer ist und mehrere HTML-Elemente enthalten kann, die von Absätzen bis zu Schaltflächen und Bildern reichen. Der zweite Unterschied besteht darin, dass das Element angeklickt werden muss, bevor ein Popover angezeigt wird, wohingegen ein Tooltip beim Schweben automatisch erfolgt. Sie erstellen ein Popover auf ähnliche Weise wie eine QuickInfo, mit der Ausnahme, dass der Popup-Inhalt in einem Datenattribut definiert wird Wie beim Tooltip müssen Sie auch irgendwo während des Dokumentstarts sicherstellen, dass Sie die Komponente initialisieren, indem Sie Folgendes verwenden: Ebenso wie beim Tooltip können Sie hier ein Objekt mit Optionen übergeben. Es stehen viele zur Verfügung. Ich empfehle Ihnen, die BS3-Dokumente zu lesen, um sie alle zu erlernen. Wenn alles funktioniert hat, sollten Sie in der Lage sein, Ihre Seite zu rendern und Folgendes anzuzeigen: Leider wurde unter anderem in BS3 die fertige Akkordeonkomponente entfernt. An ihrer Stelle steht jedoch etwas Besseres: das zusammenklappbare Panel. Mit diesen Panels ist es genauso einfach, ein Standard-Akkordeon zu erstellen, aber sie sind jetzt auch separat verwendbare, eigenständige Komponenten, mit denen Sie beispielsweise Faltinformationsbereiche, Werkzeugleisten und vieles mehr erstellen können. Beachten Sie jedoch Folgendes: Wenn Sie einen benutzerdefinierten Build durchführen, müssen Sie auch sicherstellen, dass Sie das JavaScript-Plug-in für die Übergangshilfe verwenden. Die BS3-Dokumente enthalten weitere Informationen, die Sie benötigen, wenn Sie einen benutzerdefinierten Build durchführen. Um aus zusammenklappbaren Paneelen ein Akkordeon zu erstellen, müssen Sie lediglich ein Äußeres erstellen Sobald Sie Ihre Platten angelegt haben, müssen Sie nur noch ein Das Toggle-Attribut sollte den Wert von haben Der folgende Code zeigt, wie dies erreicht werden kann: Wie bereits erwähnt, müssen Panels nicht gruppiert werden. Sie können auf einmalige Weise mit nur einem einzigen Element als Auslöser für die Faltung verwendet werden. Wenn Sie beispielsweise ein Bedienfeld mit einer einfachen Schaltfläche ausblenden möchten, stellen Sie sicher, dass Ihre Schaltfläche über ein Datenattribut verfügt Das letzte JavaScript-Plugin, das ich vorstellen werde, ist das neu entworfene Karussell. BS2 hatte ein Karussell, aber wie das Akkordeon wurde es jetzt entfernt und stark vereinfacht, um es einfacher zu verwenden. Typischerweise wird das Karussell-Plugin oben auf einer Seite verwendet, um ein rotierendes Banner mit Bildern bereitzustellen. In BS2 war dies das einzige, für das das Karussell verwendet werden konnte. In BS3 werden jedoch alle Inhalte, die in den Bedienfeldern des Karussells platziert werden können, einschließlich Bildern, Text, SVG und vielem mehr, gedreht. Der folgende Code zeigt ein grundlegendes Beispiel für die Erstellung eines Karussells: Die Raumzeit ist eine Konstante. Will erfordert Erkundung Sternenstaub muss erforscht werden. Sie und ich sind Geschichtenerzähler des Kosmos Die Raumzeit ist eine Konstante. Will erfordert Erkundung Es gibt einige weitere Low-Key-JavaScript-Objekte, die meisten sind jedoch nicht direkt mit normalem Benutzercode verwendbar und werden im Allgemeinen nur unter besonderen Umständen verwendet. Die BS3-Dokumente behandeln alles, was ich vermisst habe. Wenn Sie sich eingehend mit den verfügbaren JavaScript-Funktionen beschäftigen möchten, ist eine lange Lektüre und ein Verständnis dafür, wie alles verbunden ist, definitiv eine Voraussetzung. Eine letzte Anmerkung: BS3-JavaScript-Plugins sind nichts weiter als reguläre jQuery-Plugins (BS verwendet jQuery unter der Haube). Dies bedeutet, dass es sehr einfach sein sollte, Ihr bevorzugtes jQuery-Plugin von Orten wie unheap.com mitzunehmen und es an BS3 anzupassen. Vergessen Sie nicht, dass es bereits eine Vielzahl von Add-Ons gibt, die speziell für das Framework verwendet werden können. Die meisten davon sind nur eine Google-Suche entfernt. Dieses Tutorial enthält ein Kapitel von Bootstrap 3 Succinctly, ein kostenloses eBook des Teams von Syncfusion.Modales Dialogfeld anzeigen. Damit eine Auslöseraktion funktionieren kann, muss ein Umschalt- und Zieldatenattribut zugewiesen sein, und für den Umschalter muss der Wert "modal"um anzuzeigen, dass es sich um einen modalen Dialog handelt. Das Ziel muss den ID - Selektor am äußersten haben ID = "myModal" darauf, was das Datenattribut für bedeutet Ziel sollte haben #myModal als seinen Wert.modal darauf angewendet. Optional können Sie auch hinzufügen verblassen, Dadurch wird der Modal beim Anzeigen und Verstecken einen schönen Übergang erhalten. Diese äußere Z-Reihenfolge und alles andere in der Art von globalen modalen Anpassungen, die Sie vornehmen möchten.Modal-Dialog hinzugefügt. Das Modal-Inhalt ihm zugewiesen. Es ist in diesem dritten Modal-Kopfzeile, Modal-Körper, und modale Fußzeile. Diese drei inneren Abschnitte sollten NICHT geschachtelt werden, sondern müssen als Geschwister des Markups hinzugefügt werden. Sie werden verwendet, um den Inhalt für die drei Hauptabschnitte des Dialogs zu definieren.entlassen Das Datenattribut hat einen Wert von modal und nicht warnen. Jedes anklickbare Element, das innerhalb des inneren modalen Markups mit diesem Datenattribut und diesem Wert platziert wird, schließt das Dialogfeld, wenn Sie darauf klicken.Modal-Dialog modal-lg und modal-sm. Die Large-Size-Klasse erweitert die Breite des Modals auf die Hälfte der Bildschirmbreite (ideal für Tabellen und Listen), während die kleine Größe die Standardbreite auf ungefähr die Hälfte der ursprünglichen Größe reduziert (ideal für Ja / Nein-Eingabeaufforderungen)..$ ('# myModal'). Modal (Hintergrund: true / false, Tastatur: true / false, show: true / false, remote: 'Pfad zu einer URL, die Inhalt zurückgibt');
Hintergrund: Boolean true oder false, um den schattierten Hintergrund auf der Seite aufzunehmen oder nicht, wenn das Modal angezeigt wird; wenn der Wert statisch angegeben ist, wird der Hintergrund angezeigt, schließt jedoch NICHT das Modal, wenn es angeklickt wird wahr wird eingesetzt.Tastatur: Boolean wahr oder falsch; erlaubt oder lässt den Escape-Schlüssel den Modal nicht schließen.Show: Boolean true oder false, zeigt das Dialogfeld automatisch an oder zeigt es nicht an, sobald es initialisiert wird.Fernbedienung: String, der eine URL enthält, um den inneren Inhalt des Dialogkörpers zu erhalten; Wenn dies angegeben ist, fordert das Dialogfeld die URL dazu auf, einen HTML-Block anzugeben, der im Hauptteil des Modals verwendet werden soll.Tabs
Elemente eingebettet in jedes seiner Elemente, mit der href von jedem Anker auf die Ich würde von jedem assoziierten Tab.Tab-Inhalt dazu Innerhalb davon Tab-Bereich und ein Ich würde Attribut, das der zugeordneten Registerkarte im Navigationssatz entspricht. Optional können Sie auch hinzufügen einblenden Registerkarten einblenden, wenn sie sich ändern, und aktiv um zu markieren, welche der Registerkarten aktuell angezeigt wird.
Wir verwirklichen uns, wir glauben, wir werden wiedergeboren
Wir existieren als vierdimensionale Überstrukturen
Das Ziel morphogenetischer Felder ist das Pflanzen von…
Tabulatorsatz erstellt durch Codebeispieltab ('show') darauf Wenn dies geschehen ist, machen Ihre Registerkarten die referenzierte Registerkarte automatisch zur ausgewählten Registerkarte. Wie bei Modals (und anderen) stehen Ihnen Ereignisse zur Verfügung, um Sie über Änderungen zu informieren. Die Details und Parameter jedes Aufrufs finden Sie in den BS3-Dokumenten.Tooltips und Popovers
Umschalten mit dem Wert Tooltip zu jedem Standard-HTML-Element, für das der Tooltip angezeigt werden soll. Um den Text für die QuickInfo zu definieren, fügen Sie ein Titelattribut hinzu, das den gewünschten Text enthält, und fügen Sie optional ein Datenattribut hinzu Platzierung den Wert enthalten links, oben, Unterseite, oder Recht je nach Bedarf, in welche Richtung der Tooltip angezeigt werden soll.
$ ('# mybutton'). tooltip ();Tooltip () zu jedem Element, an das ein Tooltip angehängt ist.
Button mit begleitendem Tooltippopover (). Der Hauptunterschied zwischen einem Popover und einem Tooltip besteht darin, dass Popovers mehr Inhalt enthalten können als ein Tooltip.Inhalt, und das Titel Attribut wird verwendet, um dem Popover einen Mini-Titelbereich zu geben (ähnlich wie der Kopfbereich in einer Bedienfeldkomponente verwendet wird). Der folgende Code zeigt, wie ein einfaches Popover definiert wird:$ ('# mybutton'). popover ();
BS3-Button mit einem PopoverZusammenklappbare Panels
Panel-Gruppe und gib es ein Ich würde. Dann brauchen Sie eine Reihe von div ein einzelnes in sich geschlossenes Panel sein.Panel-Titel in einem Panel-Kopfzeile. Dieser Header sollte ein Tag mit zwei zugewiesenen Datenattributen: eines aufgerufen Datenumschaltung, und einer rief an Daten-Elternteil.Zusammenbruch, und das übergeordnete Attribut sollte die Ich würde der äußeren href mit dem Ich würde des Zielbereichskörpers, der das Objekt des kollabierenden Verhaltens sein soll. Jedes Zielpanel sollte die Klassen haben Panel-Zusammenbruch und Zusammenbruch ihnen zugewiesen. Bewusstsein ist der Reichtum der Wahrheit und von uns
Der Planet strahlt vierdimensionale Superstrukturen aus
Die Wirklichkeit hat immer Boten ausgestrahlt, deren Seelen durch Sternenstaub geöffnet werden
Akkordeonersatz durch Muster hergestelltUmschalten mit dem Wert Zusammenbruch, und ein Datenattribut aufgerufen Ziel mit dem Selektor für das Zielfeld als Wert.Karussell
Du und ich sind Wesen des Planeten
Nichts ist unmöglich
Du und ich sind Wesen des Planeten
Karussell nach Codebeispiel hergestellt
Accentsconagua