JS Popover (popover.js)
Popover Wtyczka jest podobna do etykiet; Jest to okno pop-up, który pojawia się, gdy użytkownik kliknie na elemencie. Różnica polega na tym, że popover może zawierać znacznie więcej treści.
Plugin zależność: Popovers wymaga wtyczki podpowiedzi (tooltip.js) , które należy uwzględnić w wersji Bootstrap .
Samouczek o Popovers , przeczytaj naszą Bootstrap Popover Tutorial .
Via data-* Atrybuty
data-toggle="popover" aktywuje popover .
title atrybut określa tekst nagłówka z popover .
data-content atrybut określa tekst, który powinien być wyświetlany wewnątrz popover's organizmie.
Przykład
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some
content inside the popover">Toggle popover</a>
Spróbuj sam " za pośrednictwem JavaScript
Popovers nie tylko CSS wtyczek, a zatem musi być inicjowane z jQuery: wybierz określony element i wywołać popover() metody.
Przykład
// Select all
elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();
// Select a specified
element
$('#myPopover').popover();
Spróbuj sam " Popover Opcje
Opcje mogą być przekazywane za pomocą atrybutów danych lub JavaScript. Dla atrybutów danych, nazwy opcji dołączania do data- , jak w data-placement="" .
| Nazwa | Rodzaj | Zaniedbanie | Opis | Spróbuj |
|---|---|---|---|---|
| animation | boolean | true | Określa, czy dodać efekt przejścia CSS na blaknięcie przy otwieraniu i zamykaniu popover
| Spróbuj |
| container | string, or the boolean false | false | Dołącza popover do konkretnego elementu. Przykład: pojemnik: 'body' | Spróbuj |
| content | string | "" | Określa tekst wewnątrz popover's body | Spróbuj |
| delay | number, or object | 0 | Określa liczbę milisekund będzie podjąć, aby otworzyć i zamknąć popover . Aby określić opóźnienie otwarcia i drugi do zamykania, należy użyć struktury obiektu: delay: {show: 500, hide: 100} - która zajmie 500 ms, aby otworzyć popover , ale tylko 100 ms, aby go zamknąć | Spróbuj |
| html | boolean | false | Określa, czy przyjąć tagów HTML w popover :
Gdy ustawiona na false (domyślnie), jQuery text() zostanie użyta metoda. Użyj tej opcji, jeśli są zaniepokojeni atakami XSS | Spróbuj |
| placement | string | "right" | Określa popover pozycję. Możliwe wartości:
| Spróbuj |
| selector | string, or the boolean false | false | Dodaje popover do określonego selektora | Spróbuj |
| template | string | HTML baza do wykorzystania przy tworzeniu popover. W popover's tytuł będzie wtryskiwany do .popover-tytule. W popover's zawartość będzie wtryskiwany do .popover zawartości. .arrow staną się popover's strzałka. Najbardziej zewnętrzna elementu otoki powinny mieć .popover klasę. | ||
| title | string | "" | Określa tekst nagłówka z popover | Spróbuj |
| trigger | string | "click" | Określa sposób popover jest wyzwalany. Możliwe wartości:
| Spróbuj |
| viewport | string, or object | {selector: "body", padding: 0} | Utrzymuje popover w granicach tego elementu. Przykład: viewport: '#viewport' lub {selector: '#viewport', padding: 0} |
Popover Metody
Poniższa tabela zawiera listę wszystkich dostępnych popover metod.
| metoda | Opis | Spróbuj |
|---|---|---|
| .popover( options ) | Aktywuje popover z opcja. Patrz wyżej opcje dla prawidłowych wartości | Spróbuj |
| .popover("show") | Pokazuje popover | Spróbuj |
| .popover("hide") | Ukrywa popover | Spróbuj |
| .popover("toggle") | Przełączenie popover | Spróbuj |
| .popover("destroy") | Ukrywa i niszczy popover | Spróbuj |
Popover Wydarzenia
Poniższa tabela zawiera listę wszystkich dostępnych popover wydarzenia.
| Zdarzenie | Opis | Spróbuj |
|---|---|---|
| show.bs.popover | Występuje, gdy popover ma być pokazany | Spróbuj |
| shown.bs.popover | Występuje, gdy popover jest w pełni pokazane (po zakończeniu przejścia CSS) | Spróbuj |
| hide.bs.popover | Występuje, gdy popover ma być ukryta | Spróbuj |
| hidden.bs.popover | Występuje, gdy popover jest całkowicie ukryty (po zakończeniu przejścia CSS) | Spróbuj |
Przykłady
Niestandardowe Popover Projekt
Za pomocą CSS, aby dostosować wygląd popover :
Przykład
/* 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;
} Spróbuj sam "