Neueste Web-Entwicklung Tutorials
 

Bootstrap JS Popover


JS Popover (popover.js)

Das Popover Plugin ist ähnlich wie Tooltips; es ist ein Pop-up-Fenster, das erscheint, wenn der Benutzer auf ein Element klickt. Der Unterschied ist , dass die popover viel mehr Inhalt enthalten kann.

Plugin - Abhängigkeit: Popovers erfordern den Tooltip - Plugin (tooltip.js) in Ihrer Version von einbezogen werden Bootstrap .

Ein Tutorial über Popovers , unsere lesen Bootstrap Popover Tutorial .


Via data-* Attribute

Die data-toggle="popover" aktiviert die popover .

Der title Attribut gibt den Kopftext des popover .

Die data-content - Attribut gibt den Text an, die innerhalb der angezeigt werden soll popover's Körpers.

Beispiel

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Versuch es selber "

Via JavaScript

Popovers sind nicht CSS-only - Plugins und müssen daher mit jQuery initialisiert werden: das angegebene Element wählen und den Anruf popover() Methode.

Beispiel

// Select all elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();

// Select a specified element
$('#myPopover').popover();
Versuch es selber "

Popover Optionen

Die Optionen können über Datenattribute oder JavaScript übergeben werden. Die Option Namen für Datenattribute, hängen Sie data- , wie in data-placement="" .

Name Art Standard Beschreibung Versuch es
animationbooleantrue

Gibt an, ob eine CSS - Fade Übergangseffekt hinzugefügt , wenn das Öffnen und Schließen popover

  • true - Fügen Sie einen Fading-Effekt
  • false - Sie einen Fading-Effekt nicht hinzufügen
Versuch es
containerstring, or the boolean falsefalse Hängt die popover auf ein bestimmtes Element.
Beispiel: Behälter: 'body'
Versuch es
contentstring"" Gibt den Text innerhalb des popover's body Versuch es
delaynumber, or object0 Gibt die Anzahl der Millisekunden dauert , um es zu öffnen und die enge popover .

Um eine Verzögerung zum Öffnen angeben und eine weitere für das Schließen, verwenden Sie die Objektstruktur:

delay: {show: 500, hide: 100} - die 500 ms dauern wird , die zu öffnen popover , aber nur 100 ms um es zu schließen
Versuch es
htmlbooleanfalse Gibt an, ob HTML - Tags in der zu akzeptieren popover :
  • true - HTML - Tags übernehmen
  • false - Sie HTML - Tags nicht akzeptieren
Hinweis: Die HTML muss im Titel - Attribut eingefügt werden (oder den Titel - Option).

Wenn auf false gesetzt (Standard), jQuery text() Methode verwendet wird. Verwenden Sie diese Option, wenn Sie über XSS-Angriffe sind besorgt
Versuch es
placementstring"right" Gibt die popover Position. Mögliche Werte:

  • "top" - Popover oben
  • "bottom" - Popover auf der Unterseite
  • "left" - Popover auf der linken Seite
  • "right" - Popover auf der rechten Seite
  • "auto" - Hiermit kann der Browser die Position des entscheiden popover . Zum Beispiel, wenn der Wert "auto left" , die popover auf der linken Seite , wenn möglich angezeigt werden, da sonst auf der rechten Seite . Wenn der Wert "auto bottom" , die popover wird unten angezeigt werden, wenn möglich, sonst auf der Oberseite
Versuch es
selectorstring, or the boolean falsefalse Fügt die popover zu einem festgelegten Selektor Versuch es
templatestring  Base-HTML zu verwenden, wenn die popover zu schaffen.

Die popover's Titel wird in die .popover-Titel injiziert werden.

Die popover's Inhalte werden in den .popover-Gehalt injiziert werden.

.arrow wird das geworden popover's Pfeil.

Die äußerste Hüllenelement sollte die haben .popover Klasse.
titlestring"" Gibt den Kopftext des popover Versuch es
triggerstring"click" Gibt an, wie die popover ausgelöst wird. Mögliche Werte:

  • "click" - Lösen Sie die popover mit einem Klick
  • "hover" - Auslösung des popover auf schweben
  • "focus" - Auslösung des popover , wenn es den Fokus erhält (durch Tabbing oder klicken .eg)
  • "manual" - Lösen Sie die popover manuell
Tipp: Um mehrere Werte, trennen Sie diese mit einem Raum passieren
Versuch es
viewportstring, or object{selector: "body", padding: 0} Hält die popover innerhalb der Grenzen dieses Elements.

Beispiel: viewport: '#viewport' oder {selector: '#viewport', padding: 0}

Popover Methoden

Die folgende Tabelle listet alle verfügbaren popover Methoden.

Methode Beschreibung Versuch es
.popover( options ) Aktiviert die popover mit einer Option. Siehe oben stehenden Optionen für gültige Werte Versuch es
.popover("show") Zeigt die popover Versuch es
.popover("hide") Blendet die popover Versuch es
.popover("toggle") Blendet die popover Versuch es
.popover("destroy") Versteckt und zerstört die popover Versuch es

Popover Veranstaltungen

Die folgende Tabelle listet alle verfügbaren popover Veranstaltungen.

Event Beschreibung Versuch es
show.bs.popover Tritt ein, wenn die popover über gezeigt werden soll Versuch es
shown.bs.popover Tritt ein, wenn der popover vollständig angezeigt wird (nach dem CSS - Übergänge abgeschlossen haben) Versuch es
hide.bs.popover Tritt ein, wenn die popover etwa ist versteckt werden Versuch es
hidden.bs.popover Tritt ein, wenn die popover vollständig verborgen ist (nachdem CSS - Übergänge abgeschlossen haben) Versuch es

Beispiele

Beispiele

Benutzerdefinierte Popover Entwurf

Verwenden Sie CSS das Aussehen des anpassen popover :

Beispiel

 /* Popover */
.popover {
    border: 2px dotted red;
}

/* Popover Header */
.popover-title {
    background-color: #73AD21;
    color: #FFFFFF;
    font-size: 28px;
    text-align:center;
}

/* Popover Body */
.popover-content {
    background-color: coral;
    color: #FFFFFF;
    padding: 25px;
}

/* Popover Arrow */
.arrow {
    border-right-color: red !important;
}
Versuch es selber "