Das Bootstrap-Popup-Plug-In bietet eine erweiterte Ansicht. Das Popup-Plug-In generiert Inhalte und Tags entsprechend den Anforderungen. Standardmäßig werden Pop-ups hinter ihren Triggerelementen platziert.
Ein Popover ähnelt einem Tooltip und bietet eine erweiterte Ansicht. Um das Popup-Box zu aktivieren, muss der Benutzer nur über das Element schweben. Der Inhalt der Popup-Box kann mit der Bootstrap-Daten-API (Bootstrap-Daten-API) vollständig besiedelt werden. Diese Methode basiert auf Tooltips.
Wenn Sie auf die Funktionalität des Plugins separat verweisen möchten, müssen Sie sich auf popover.js verweisen, das sich auf das Tooltip -Plugin stützt. Oder, wie im Kapitel "Bootstrap Plugin" erwähnt, können Sie unter Bootstrap.js oder komprimierten Versionen von Bootstrap.min.js verweisen.
1. Nutzung
Das Popover -Plugin generiert Inhalte und Tags basierend auf den Anforderungen. Standardmäßig werden Popovers hinter ihren Triggerelementen platziert. Sie können Popover auf zwei Arten hinzufügen:
Übergeben Sie die Dateneigenschaft: Um ein Popover hinzuzufügen, fügen Sie einfach Data-Toggle = "Popover" zu einer Anker-/Taste-Beschriftung hinzu. Der Titel des Ankers ist der Text des Popovers. Standardmäßig legt das Plugin das Popover oben.
<a href = "#" data-toggle = "popover"> Bitte schweben Sie über meinen </a>
Durch JavaScript: Popover über JavaScript aktivieren:
$ ('#identifier'). Popover (Optionen)
Das Popover-Plugin ist nicht wie die zuvor diskutierten Dropdown-Menüs und andere Plug-Ins, es ist kein reines CSS-Plug-In. Um das Plugin zu verwenden, müssen Sie es mit JQuery aktivieren (lesen Sie JavaScript). Verwenden Sie das folgende Skript, um alle Popovers auf der Seite zu aktivieren:
$ (function () {$ ("[data-toggle = 'popover']"). popover ();});
2. Beispiele
In einem Popup-Feld klicken Sie auf ein Element, um einen Container mit Titel und Inhalt zu packen.
// Grundlegende Verwendung <Schaltfläche type = "Button" data-toggle = "popover" data-content = "Dies ist ein Popup-Box-Plugin"> Klicken Sie, um das Popup-Feld zu popup/ausblenden </button> // JavaScript initialisieren $ ('Button'). Popover ();Das Popup-Plug-In verfügt über viele Eigenschaften, um die Anzeige von Eingabeaufforderungen zu konfigurieren, wie folgt:
$ ('button'). popover ({container: 'body', Ansichtsfenster: {selektor: '#view', padding: 10,}});Es gibt vier Methoden, die über JavaScript ausgeführt werden können.
// $ ('button'). Popover ('show'); // $ ('button'). Popover ('ausblenden'); // Invert Show und $ $ ('Button'). Popover ('Toggle'); // $ $ ('Button'). Popover ('Destroy');Es gibt vier Arten von Ereignissen im Popover -Plugin:
// Ereignisse, andere ähnlich wie $ ('Button'). On ('show.bs.tab', function () {alert ('kostenlos beim Aufrufen der Show -Methode!');});Das obige dreht sich alles um diesen Artikel. Ich hoffe, es wird für alle hilfreich sein, das Bootstrap-Pop-up-Plugin zu lernen.