Ultimele tutoriale de dezvoltare web
 

Bootstrap JS Popover

❮ Anterior Următor Referință ❯

JS Popover (popover.js)

Popover plugin - ul este similar cu ponturile; este o casetă de tip pop-up care apare atunci când utilizatorul face clic pe un element. Diferența constă în faptul că popover poate conține mult mai mult conținut.

Dependență Plugin: Popovers nevoie de plugin - ul tooltip (tooltip.js) care urmează să fie incluse în versiunea de Bootstrap .

Pentru un tutorial despre Popovers , citiți Bootstrap Popover Tutorial .

Via data-* Atribute

De data-toggle="popover" de popover data-toggle="popover" activează popover .

title atribut specifică textul antet al popover .

De data-content atributul specifică textul care trebuie să fie afișat în interiorul popover's corp.

Exemplu

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Încearcă - l singur »

Via JavaScript

Popovers nu sunt plugin - uri numai CSS, și , prin urmare , trebuie să fie inițializată cu jQuery: selectați elementul specificat și apelați popover() metoda.

Exemplu

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

// Select a specified element
$('#myPopover').popover();
Încearcă - l singur »

Popover Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atribute de date, adăugați numele opțiune pentru a data- , la fel ca în data-placement="" .

Nume Tip Mod implicit Descriere Incearca-l
animationbooleantrue

Specifică dacă pentru a adăuga un efect de tranziție CSS estompare la deschiderea și închiderea popover

  • true - Adăugați un efect de decolorare
  • fals - Nu adăugați un efect de decolorare
Incearca-l
containerstring, or the boolean falsefalse Atasaza popover unui element specific.
Exemplu: container: 'body' 		Incearca-l
contentstring"" Specifică textul din interiorul popover's body Incearca-l
delaynumber, or object0 Specifică numărul de milisecunde va lua pentru a deschide și închide popover .

Pentru a specifica o întârziere de deschidere și alta pentru închidere, utilizați structura obiectului:

delay: {show: 500, hide: 100} - care va avea 500 ms pentru a deschide popover , dar numai 100 ms pentru ao închide 		Incearca-l
htmlbooleanfalse Specifică dacă să accepte etichete HTML în popover :
  • true - Acceptă etichete HTML
  • false - Nu acceptați etichete HTML
Notă: HTML trebuie să fie introdus în title atributul (sau folosind opțiunea din titlu).

Când este setat la fals (default) , jQuery text() metodă va fi utilizată. Utilizați această opțiune dacă sunteți îngrijorat cu privire la atacurile XSS 		Incearca-l
placementstring"right" Specifică popover poziția. Valori posibile:

  • "top" - Popover pe partea de sus
  • "bottom" de Popover "bottom" - Popover în partea de jos
  • "left" - Popover la stânga
  • "right" - Popover pe dreapta
  • "auto" - Permite browser - ul decide poziția popover . De exemplu, în cazul în care valoarea este "auto left" , The popover va apărea în partea stângă atunci când este posibil, în caz contrar pe dreapta. Dacă valoarea este "auto bottom" de popover "auto bottom" , The popover se va afișa în partea de jos , atunci când este posibil, în caz contrar pe partea de sus
Incearca-l
selectorstring, or the boolean falsefalse Adaugă popover la un selector specificat Incearca-l
templatestring  HTML de bază pentru a utiliza la crearea popover.

popover's titlu va fi injectat în .popover-titlu.

popover's conținut va fi injectat în .popover conținutului.

.arrow va deveni popover's săgeată.

Elementul de înveliș exterior ar trebui să aibă .popover clasa.
titlestring"" Specifică textul de antet al popover Incearca-l
triggerstring"click" Specifică modul în care popover este declanșată. Valori posibile:

  • "click" - Declanșați popover cu un clic
  • "hover" - Declanșați popover pe Hover
  • "focus" - Declanșați popover atunci când acesta devine focalizarea (prin tabbing sau clic .eg)
  • "manual" - Declanșați popover manual
Sfat: Pentru a introduce mai multe valori, separați - le cu un spațiu 		Incearca-l
viewportstring, or object{selector: "body" , padding: 0} Păstrează popover în limitele acestui element.

Exemplu: viewport: '#viewport' sau {selector: '#viewport', padding: 0}

Popover Metode

Tabelul de mai jos listează toate disponibile popover metode.

Metodă Descriere Incearca-l
. popover( options ) Activează popover cu o opțiune. A se vedea optiunile de mai sus pentru valori valide Incearca-l
. popover("show") Afișează popover Incearca-l
. popover("hide") Ascunde popover Incearca-l
. popover("toggle") Activează sau dezactivează popover Incearca-l
. popover("destroy") Piei brute și distruge popover Incearca-l

Popover Evenimente

Tabelul de mai jos listează toate disponibile popover evenimente.

Eveniment Descriere Incearca-l
show.bs.popover Apare atunci când popover este pe cale să fie afișat Incearca-l
shown.bs.popover Apare atunci când popover este pe deplin demonstrat (dupa tranzițiile CSS au finalizat) Incearca-l
hide.bs.popover Apare atunci când popover este pe cale să fie ascunsă Incearca-l
hidden.bs.popover Apare atunci când popover este complet ascuns (după tranzițiile CSS au finalizat) Incearca-l
Exemple

Exemple

Personalizat Popover Proiectare

Utilizați CSS pentru a personaliza aspectul popover :

Exemplu

 /* 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;
}
Încearcă - l singur »

❮ Anterior Următor Referință ❯