Bootstrap Popover Plugin
Das Popover-Plugin ähnelt dem Tooltip; es bietet eine erweiterte Ansicht. Um ein Popover zu aktivieren, muss der Benutzer nur mit der Maus über das Element fahren. Der Inhalt des Popovers kann vollständig über die Bootstrap Data API gefüllt werden. Diese Methode hängt vom Tooltip-Plugin ab.
Wenn Sie die Funktionalität dieses Plugins separat einbinden möchten, müssen Siepopover.jsreferenzieren, das vondem Tooltip-Pluginabhängt. Oder, wie im KapitelDie Bootstrap-Plugins im Überblickerwähnt, können Siebootstrap.jsoder die minifizierte Versionbootstrap.min.js。
Nutzung
Das Popover-Plugin generiert Inhalte und Markups bei Bedarf. Standardmäßig wird das Popover nach seinem Auslöser-Element platziert. Sie können ein Popover auf die folgenden zwei Arten hinzufügen:
- Über Datenattribute: Um ein Popover hinzuzufügen, fügen Sie einfachdata-toggle="popover"zu einem Anker-/Button-Tag hinzu. Der Titel des Ankers ist der Text des Popovers. Standardmäßig platziert das Plugin das Popover oben.
<a href="../index.html" data-toggle="popover" title="Example popover"> 请悬停在我的上面 </a>
- Über JavaScript:Aktivieren Sie Popovers über JavaScript:
$('#identifier').popover(options)
Das Popover-Plugin ist kein reines CSS-Plugin, im Gegensatz zu Dropdowns und anderen zuvor besprochenen Plugins. Um dieses 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(); });
Beispiel
Das folgende Beispiel demonstriert die Verwendung des Popover-Plugins über das Datenattribut.
Beispiel
Ausprobieren »
Das Ergebnis wird unten angezeigt:
Optionen
Es gibt einige Optionen, die über die Bootstrap Data API hinzugefügt oder über JavaScript aufgerufen werden. Die folgende Tabelle listet diese Optionen auf:
| Optionsname | Typ / Standardwert | Datenattribut-Name | Beschreibung |
|---|---|---|---|
| animation | boolesch Standardwert: true | data-animation | Wendet einen CSS-Überblendungsübergang (Fade) auf das Popover an. |
| html | boolesch Standardwert: false | data-html | HTML in das Popover einfügen. Wenn false, wird die Textmethode von jQuery verwendet, um Inhalte in das DOM einzufügen. Wenn Sie sich wegen XSS-Angriffen Sorgen machen, verwenden Sie text. |
| placement | string|function Standardwert: top | data-placement | Gibt an, wie das Popover positioniert werden soll (d. h. top|bottom|left|right|auto). Wenn es aufautogesetzt ist, wird das Popover dynamisch angepasst. Wenn die Platzierung beispielsweise "auto left" ist, wird das Popover so weit links wie möglich angezeigt und nur dann rechts, wenn die Umstände es nicht anders erlauben. |
| selector | string Standardwert: false | data-selector | Wenn ein Selektor angegeben wird, werden Popover-Objekte an die angegebenen Ziele delegiert. |
| title | string | function Standardwert: '' | data-title | Wenn das Attributtitlenicht angegeben ist, ist die Option title der Standard-Titelwert. |
| trigger | string Standardwert: 'hover focus' | data-trigger | Definiert, wie das Popover ausgelöst wird: click| hover | focus | manualSie können mehrere Auslöser über Leerzeichen getrennt übergeben. |
| delay | number | object Standardwert: 0 | data-delay | Anzahl der Millisekunden, um das Anzeigen und Ausblenden des Popovers zu verzögern – gilt nicht für den manuellen Auslösertyp. Wenn eine Zahl angegeben wird, wird die Verzögerung sowohl auf das Anzeigen als auch auf das Ausblenden angewendet. Wenn ein Objekt angegeben wird, sieht die Struktur wie folgt aus:
delay:
{ show: 500, hide: 100 } |
| container | string | false Standardwert: false | data-container | Hängt ein Popover an das angegebene Element an. Beispiel: container: 'body' |
Methoden
Unten sind einige nützliche Methoden im Popover-Plugin aufgeführt:
| Methode | Beschreibung | Beispiel |
|---|---|---|
| Optionen: .popover(options) | Hängt einen Popover-Handler an eine Sammlung von Elementen an. |
$().popover(options) |
| Umschalten: .popover('toggle') | Schaltet das Anzeigen/Ausblenden des Popovers eines Elements um. |
$('#element').popover('toggle')
|
| Anzeigen: .popover('show') | Zeigt das Popover eines Elements an. |
$('#element').popover('show')
|
| Ausblenden: .popover('hide') | Blendet das Popover eines Elements aus. |
$('#element').popover('hide')
|
| Zerstören: .popover('destroy') | Blendet das Popover eines Elements aus und zerstört es. |
$('#element').popover('destroy')
|
Beispiel
Das folgende Beispiel demonstriert die Methoden des Popover-Plugins:
Beispiel
Ausprobieren »
Das Ergebnis ist wie folgt:
Ereignisse
Die folgende Tabelle listet die im Popover-Plugin verwendeten Ereignisse auf. Diese Ereignisse können als Hooks in Funktionen verwendet werden.
| Ereignis | Beschreibung | Beispiel |
|---|---|---|
| show.bs.popover | Dieses Ereignis wird ausgelöst, sobald die Instanzmethode show aufgerufen wird. |
$('#mypopover').on('show.bs.popover', function () {
// 执行一些动作...
})
|
| shown.bs.popover | Dieses Ereignis wird ausgelöst, wenn das Popover für den Benutzer sichtbar ist (es wartet, bis der CSS-Übergang abgeschlossen ist). |
$('#mypopover').on('shown.bs.popover', function () {
// 执行一些动作...
})
|
| hide.bs.popover | Dieses Ereignis wird ausgelöst, sobald die Instanzmethode hide aufgerufen wird. |
$('#mypopover').on('hide.bs.popover', function () {
// 执行一些动作...
})
|
| hidden.bs.popover | Dieses Ereignis wird ausgelöst, wenn das Popover für den Benutzer ausgeblendet ist (es wartet, bis der CSS-Übergang abgeschlossen ist). |
$('#mypopover').on('hidden.bs.popover', function () {
// 执行一些动作...
})
|
Beispiel
Das folgende Beispiel demonstriert die Ereignisse des Popover-Plugins:
Beispiel
Ausprobieren »
Das Ergebnis ist wie folgt:
