jQuery Mobile popup-uri
Popup-uri sunt similare cu dialoguri, în măsura în care ambele se suprapun peste o parte a unei pagini. O casetă pop-up poate fi utilă atunci când doriți să se afișeze text mic, fotografii, hărți sau alt conținut.
Pentru a crea un pop - up, începe cu un <a> element și un <div> Element. Adăugați data-rel="popup" - <a> data-role="popup" <div> data-rel="popup" atribut la <a> , și data-role="popup" de data-role="popup" - data-role="popup" , atribuie <div> . Apoi , specificați un cod pentru <div> și setați href de <a> pentru a se potrivi codul indicat. Conținutul în interiorul <div> este conținutul propriu - zis , care va apărea atunci când un utilizator face clic pe link - ul.
Notă: popup <div> trebuie să fie în aceeași pagină ca și link - ul.
Exemplu
< a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline
ui-corner-all">Show Popup</a>
< div data-role="popup" id="myPopup" >
<p>This
is a simple popup.</p>
</div> Încearcă - l singur » Dacă doriți unele padding suplimentare și marginea din caseta de tip pop - up, adăugați "ui-content" clasa de la <div> :
popup-uri de închidere
În mod implicit, popup - uri pot fi închise , fie făcând clic în afara casetei pop - up sau prin apăsarea "Esc" tasta. Dacă nu doriți ca pop - up să fie poate fi închis , făcând clic în afara casetei, puteți adăuga data-dismissible="false" cu atributul fereastra pop - up (not really recommended) este (not really recommended) - (not really recommended) . Puteți adăuga, de asemenea, un buton de închidere fereastra pop-up, plasat fie dreapta sau la stânga. Pentru a face acest lucru, adăugați un buton cu data-rel="back" atribut în container pop - up, și poziționați butonul de clase CSS.
| Descriere | Exemplu |
|---|---|
| Butonul Dreapta închidere | Incearca-l |
| Stânga buton de închidere | Incearca-l |
| Popup Undismissible | Incearca-l |
poziţionarea popup-uri
În mod implicit, popup-uri vor apărea în mod direct peste elementul dat clic. Pentru a controla poziția pop - up, utilizați data-position-to atribui pe link - ul care este folosit pentru a deschide fereastra pop - up.
Există trei moduri de a pozitiona fereastra pop-up:
| valoarea atributului | Descriere |
|---|---|
| data-position-to="window" | Popup va apărea centrată în cadrul ferestrei |
| data-position-to="#myId" | Popup este poziționat deasupra elementului cu un #ID specificat |
| data-position-to="origin" | Mod implicit. Popup este poziționat direct deasupra elementului selectat |
Exemplu
<a href="#myPopup1" data-rel="popup" class="ui-btn" data-position-to="window" >Window</a>
<a href="#myPopup2" data-rel="popup"
class="ui-btn" data-position-to="#demo"> id="demo"</a>
<a href="#myPopup3"
data-rel="popup" class="ui-btn" data-position-to="origin" >Origin</a> Încearcă - l singur » tranziţii
În mod implicit, popup-uri nu au nici un efect de tranziție adăugate acestora. Puteți utiliza oricare dintre efectele pe care am introdus în "Transitions" capitol. Doar aplica data-transition=" value " atribut la care se deschide fereastra pop - up:
O demonstrație a tuturor efectelor de tranziție disponibile
<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade" >Fade</a> Încearcă - l singur » Săgeți Popup
Pentru a adăuga o săgeată la frontieră pop - up, utilizați data-arrow atributul, și specificați valoarea "l" (left) , "t" (top) , "r" (right) de "b" (bottom) "l" (left) , "t" (top) , "r" (right) sau "b" (bottom) :
Exemplu
<a href="#myPopup" data-rel="popup" class="ui-btn">Open
Popup</a>
<div data-role="popup" id="myPopup" class="ui-content"
data-arrow="l" >
<p>There
is an arrow on my LEFT border.</p>
</div> Încearcă - l singur » Popup Dialoguri
Puteți adăuga marcaje de dialog standard, într-o fereastră pop-up (antet, conținut și marcare subsol):
Exemplu
<a href="#myPopupDialog" data-rel="popup" class="ui-btn">Open Dialog
Popup</a>
<div data-role="popup" id="myPopupDialog">
<div
data-role="header"><h1>Header Text..</h1></div>
<div
data-role="main" class="ui-content"><p>Some text..</p><a href="#">some
links..</a>
<div data-role="footer"><h1>Footer Text..</h1></div>
</div> Încearcă - l singur » Popup Fotografii
Puteți afișa, de asemenea, imagini într-un pop-up:
Exemplu
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup">
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div> Încearcă - l singur » Notă: popup - uri nu sunt ideale atunci când aveți un întreg set de imagini pe care doriți să le afișați (like an album with 500 images) de (like an album with 500 images) . Cu toate acestea, pentru un cuplu de imagini care trebuie să fie văzute mai mari - acestea sunt perfecte.
Popup Suprapunere
Puteți controla culoarea de fundal din spatele pop - up (the page itself) în data-overlay-theme (the page itself) , cu data-overlay-theme atribut.
În mod implicit suprapunerea este transparent. Utilizați data-overlay-theme="a" pentru a adăuga o suprapunere de lumină și de date-suprapunere tema = „b“ pentru a adăuga o suprapunere pe întuneric:
Exemplu
<a href="#myPopup" data-rel="popup">Show Popup</a>
<div data-role="popup" id="myPopup"
data-overlay-theme="b" >
<p>I
have a dark background behind me.</p>
</div> Încearcă - l singur » Efectul de acoperire este adesea folosit pe fotografii pop-up:
Exemplu
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup"
data-overlay-theme="b" >
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div> Încearcă - l singur » Notă: Veți învăța , de asemenea , cum să folosească popup - uri în forme și lista de puncte de vedere în capitolele următoare.