În această lecție vom învăța cum să creați pop-up-uri către diferite elemente ale unei pagini web folosind Bootstrap Twitter.
Creați panouri pop-up folosind Twitter Bootstrap
Popover este un panou mic care se află în partea superioară a conținutului unei pagini web și este destinat afișării informațiilor suplimentare care apar când faceți clic pe butonul stâng al mouse-ului pe un element al unei pagini Web.
Inițializarea Popovers (panouri pop-up)
Buton cu popup Buton cu popup Buton cu popup Buton cu popup
Setarea direcției pentru a afișa Popover (panoul pop-up)
Pentru popup, puteți seta direcția afișajului (în sus, în jos, în stânga sau în dreapta) de la elementul paginii web care o numește.
Poziționarea popovers cu atributele de date (atribute)
Pentru a poziționa panoul pop-up utilizând API-ul de date, se utilizează atributul de plasare a datelor Bootstrap. care poate lua următoarele valori: sus, jos, stânga, dreapta.
Popover (de sus) Popover (în jos) Popover (stânga) Popover (dreapta)
Popover (sus) Popover (dreapta) Popover (în jos) Popover (stânga)
Ascundeți panoul pop-up (Popover) când faceți clic în afara elementului paginii web pe care o gestionează
În mod implicit, popoverele nu sunt ascunse până când nu faceți clic pe elementul paginii web pe care o gestionează din nou.
Puteți utiliza atributul de date-trigger = "focus". care ascunde popovers, atunci când utilizatorul face clic pe următorul nu pe elementul care le gestionează, dar dincolo.
Pentru ca această funcție să funcționeze corect în diferite browsere, trebuie îndeplinite următoarele condiții:
Popovers opțiuni plug-in
Următorul tabel conține parametri care pot fi specificați de metoda Bootstrap popover () pentru a configura funcționalitatea pluginului Popovers (panouri pop-up).
Tip: boolean. Valoarea implicită este adevărată. Aplică efectul de estompare (CSS fade) la Popover (panoul pop-up). Acest parametru poate fi de asemenea setat utilizând atributul de animație de date. De exemplu: data-animație = "false".
Tip: boolean. Valoarea implicită este falsă. Parametrul "html" este destinat introducerii codului HTML în Popover (panoul pop-up). Dacă este setat la false, se va folosi metoda jQuery "text", care va introduce conținutul în modelul documentului HTML (DOM). Utilizați această metodă cu prudență, deoarece dacă utilizați cod HTML, puteți expune site-ul dvs. la atacurile XSS. Acest parametru poate fi de asemenea setat utilizând atributul html de date. De exemplu: data-html = "true".
Tip: șir | funcție. Valoarea implicită este "corectă". Parametrul "destinație de plasare" indică poziționarea Popover (panoul pop-up) și ia următoarele valori: sus, jos, stânga, dreapta, automat. Valoarea automată este destinată poziționării dinamice a Popover (panouri pop-up). De exemplu, dacă poziționarea este setată la "Auto left", popoverul va fi afișat în partea stângă a elementului atunci când este posibil, altfel va fi afișat în partea dreaptă a elementului. Acest parametru poate fi de asemenea setat utilizând atributul de plasare a datelor. De exemplu: plasarea datelor = "partea de jos".
Tip: șir | funcție. Valoarea implicită este ''. Acest parametru specifică textul antetului Popover (panoul pop-up). Acest parametru poate fi de asemenea setat utilizând atributul titlu. de exemplu: title = "Titlu panou".
Tip: șir | funcție. Valoarea implicită este ''. Acest parametru specifică textul conținutului panoului pop-up Popover. Dacă nu specificați valoarea parametrului de conținut sau a atributului de conținut, atunci textul conținutului Popover (panoul pop-up) va avea o valoare implicită, adică ''.
Tip: șir. Valoarea implicită este "clic". Parametrul "declanșator" specifică acțiunile pentru care Popover (panoul pop-up) va fi afișat sau ascuns: faceți clic pe (atunci când este apăsat), plasați mouse-ul (când plasați cursorul în sus), focalizați. Când utilizați mai multe valori ale parametrului "declanșator", separați-le cu un spațiu. Acest parametru poate fi de asemenea setat utilizând atributul de declanșare a datelor. de exemplu: data-trigger = "clic".
Tip: număr obiect. Valoare prestabilită: 0. Setează timpul de întârziere atunci când Popovers sunt afișate și ascunse în milisecunde. Acest parametru nu se aplică parametrului de declanșare cu manualul de valori. Când se specifică o singură valoare, timpul de întârziere este utilizat atât pentru afișare, cât și pentru ascundere. Structura parametrilor: întârziere:
Popover plug-in metode
Mai jos sunt metodele de bază pentru plug-in-ul Popover.
Alo
Poți clarifica un punct sau trimite-mă într-o direcție aproximativă?
Există un buton care afișează formularul. Acest buton are o etichetă onclick care lansează funcția "OneClickForm". Scriptul funcționează, formularul este generat, dar este trimis în nicăieri. După cum am aflat, mai devreme această formă de "OneClickForm ()" a fost afișată prin panoul pop-up Popover, care face parte din Twitter Bootstrap. Mai jos în scenariu există o funcție care ascunde acest panou.
Tot ce trebuie să faceți este să împachetați ceea ce funcția OneClickForm () se afișează în panoul pop-up popup.
Datele care apar în popup sunt specificate în eticheta de conținut. Funcția este lansată prin intermediul etichetei oneclick. Cum aș combina asta? N-am găsit asta în documentație. Dar sunt sigur că a funcționat așa. Am văzut aspectul ferestrei pop-up și pot spune cu certitudine că s-au folosit stilurile standard de tip pop-up pop-up incluse în Bootstrap-ul Twitter.
Alo Nu înțelege destul descrierea. Prin urmare, explicați exact ce trebuie făcut? Ie Există un buton care deschide și închide panoul pop-up. Acest panou se referă la un buton sau la alt element? Dacă doriți să combinați deschiderea și închiderea, utilizați comutarea. Este mai bine să scrieți ceea ce doriți să implementați, și nu cum a fost făcut.
Bună seara, Alexander.
Am avut o astfel de întrebare ...
Există un buton:
și js:
Acum, esența întrebării:
Cum de a controla timpul de animație pentru aspectul panoului și dispariția panoului?
Sau doar prin css?
Vă mulțumim anticipat pentru răspunsul dvs.
Bună seara, Igor.
Pentru a ajusta numărul de secunde pentru o animație atunci când apare un popup, puteți utiliza suprascrierea clasei de estompare:
În loc de 0,15 secunde, setați timpul necesar.
Dacă aveți nevoie de mai mult pentru a închide, probabil că va fi mai bine să schimbați acest lucru în fișierul bootstrap.js (sau bootstra.min.js). În acest caz, în fișierul bootstrap.js corespunde constant Tooltip.TRANSITION_DURATION în secțiunea Tooltip. Dacă schimbați valorile sale, aceasta va afecta deschiderea și închiderea. Dacă doriți să setați diferite valori, va trebui să găsiți în această secțiune liniile .emulateTransitionEnd (Tooltip.TRANSITION_DURATION) și să setați valorile necesare în ms în paranteze.
Este clar. Vă mulțumim pentru răspuns.
Și cu ce funcționalitate încorporată în bootstrap este cel mai convenabil să nu-mi spui?
Pentru a face mai clară, vreau să spun când acest panou este complet sau parțial în afara vizibilității paginii. De exemplu, este ascuns în partea dreaptă a paginii sau din partea de sus și dând clic pe ea sau printr-un buton corespunzător este avansat și afișat în întregime. Există o bootstrap funcțional built-in care ar ajuta la astfel de implementări
Ne pare rău că nu ți-a înțeles corect întrebarea.
Toate funcționalitățile Twitter Bootstrap sunt concentrate în clase și plug-in-uri care sunt concepute pentru a rezolva cele mai frecvente sarcini cu care se confruntă dezvoltatorii. În plus, conține și componente gata făcute.
Să începem cu aspectul blocurilor. Pentru punerea lor în aplicare, aveți nevoie de HTML, clase Bootstrap și stiluri CSS. Bootstrap nu suprascrie HTML sau CSS, doar cu ea (folosind clasele sale) o poti face putin mai rapid si peste tot este in mod normal afisat. Ie Bootstrap conține clase, componente și plug-in-uri care funcționează în toate browserele și pe toate dispozitivele posibile. Ce nu se poate spune despre blocurile pe care dezvoltatorul le creează, pentru că Pentru a le verifica în toate browserele și pe toate dispozitivele la unul sau doi dezvoltatori este foarte dificil. Deci, nu există nici o garanție că peste tot unitatea dvs. va fi afișată în mod normal. Prin urmare, este posibil să încercați rescrierea marcării acestor blocuri folosind clasele Bootstrap.
Situația cu componenta dinamică a acestui bloc prin Bootstrap nu este rezolvată, deoarece nu există niciun astfel de plug-in. Aici puteți folosi jQuery.
În majoritatea cazurilor, dacă doriți să implementați unele funcționalități suplimentare, trebuie fie să căutați soluții gata, fie să le creați pe cont propriu (bineînțeles cu utilizarea claselor și pluginurilor Twitter Bootstrap).
Vă mulțumim pentru răspunsul detaliat. Ca marcare a unui astfel de bloc pe bootstrap, mi-am dat seama. Este mult mai rapid decât tastarea. Ei bine, voi conecta JQuery-ul meu. M-am gândit că dezvoltatorii au oferit astfel de plug-in-uri, pentru că acum sunt destul de comune.
Dacă nu este cazul, puteți căuta opțiunile de implementare în expo.getbootstrap.com/ și, pe baza exemplului de cod, puteți să căutați în direcția corectă.
Trebuie să fie un buton? poate să apară, de exemplu, atunci când plasați mouse-ul peste o imagine sau, să zicem, o anumită div?
Mi-a plăcut site-ul reallygood.co.il/. există un bloc cu feedback, aș dori să fac ceva similar, folosind un bootstrap, și apoi doar popover a fost prins.
Aveți posibilitatea să utilizați popovers pentru orice articol. Configurația popup se face folosind parametrii care sunt furnizați în acest tutorial.
De exemplu, inițializați popovers pentru elementele care au un atribut de date-switch = "popover".
Ie cu ajutorul scriptului de mai sus veți inițializa orice elemente care au acest atribut:
Puteți selecta elementele pe care doriți să le inițializați, nu numai cu atributul, ci și cu orice doriți.
De exemplu, inițializați Popover pentru toate imaginile situate în container cu id = "comment"
Mulțumesc! Apoi am pus o pictogramă amuzantă, o pictogramă rotundă cu litera I, înfășurată într-o legătură, cu instrumentul.
Când treceți cu mouse-ul, instrumentul apare puțin și trebuie să faceți clic pe pictogramă pentru mai multe informații. Mi sa spus că oamenii nu știu :)
Alo Și există vreun mod de a pune o legătură în interiorul indiciului în afară de text?