jQuery Mobile Popup
Popups sono simili alle finestre di dialogo, in quanto entrambe overlay una parte di una pagina. Una finestra di pop-up può essere utile quando si desidera visualizzare testo di piccole dimensioni, foto, mappe o altri contenuti.
Per creare un popup, iniziare con un <a> elemento e un <div> elemento. Aggiungere la data-rel="popup" attributo <a> , e il data-role="popup" attributo <div> . Quindi specificare un ID per <div> , e impostare il href di <a> per abbinare l'ID specificato. Il contenuto all'interno <div> è il contenuto effettivo che apparirà quando un utente fa clic sul collegamento.
Nota: Il popup <div> deve essere all'interno della stessa pagina del collegamento.
Esempio
< 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> Prova tu stesso " Se volete qualche chilo in più e il margine nella tua casella di popup, aggiungere il "ui-content" classe per <div> :
Chiusura popup
Per impostazione predefinita, popup possono essere chiuse facendo clic al di fuori della finestra di popup o premendo il "Esc" chiave. Se non si desidera che il popup di essere richiudibile cliccando fuori dagli schemi, è possibile aggiungere l' data-dismissible="false" attributo per il popup (in realtà non consigliata). È inoltre possibile aggiungere un pulsante di chiusura per il popup, posizionato a destra oa sinistra. Per fare ciò, aggiungere un collegamento pulsante con il data-rel="back" attributo nel contenitore popup, e posizionare il pulsante per classi CSS.
| Descrizione | Esempio |
|---|---|
| Pulsante destro vicino | Provalo |
| pulsante di chiusura a sinistra | Provalo |
| Popup Undismissible | Provalo |
Posizionamento popup
Per impostazione predefinita, popup appariranno direttamente sopra l'elemento cliccato. Per controllare la posizione della comparsa, utilizzare i dati di posizione-attribuire sul link che viene utilizzato per aprire la comparsa.
Ci sono tre modi di posizionamento del popup:
| valore di attributo | Descrizione |
|---|---|
| data-position-to="window" | Popup apparirà centrato all'interno della finestra |
| data-position-to="#myId" | Popup è posizionato sopra l'elemento con un #id specificato |
| data-position-to="origin" | Predefinito. Popup è posizionato direttamente sopra l'elemento cliccato |
Esempio
<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> Prova tu stesso " transizioni
Per impostazione predefinita, pop-up non hanno alcun effetto di transizione aggiunti a loro. È possibile utilizzare uno qualsiasi degli effetti che abbiamo introdotto nel capitolo "Transitions". Basta applicare i dati di transizione = "valore" attributo al collegamento che apre il popup:
Una dimostrazione di tutti gli effetti di transizione disponibili
<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade" >Fade</a> Prova tu stesso " Frecce Popup
Per aggiungere una freccia per il bordo del popup, utilizzare l'attributo data-freccia, e specificare il valore "l" (left), "t" (top), "r" (right) o "b" (bottom) :
Esempio
<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> Prova tu stesso " Popup finestre di dialogo
È possibile aggiungere dialogo markup standard in un pop-up (intestazione, contenuti e piè di pagina markup):
Esempio
<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> Prova tu stesso " Foto Popup
È inoltre possibile visualizzare le immagini in un pop-up:
Esempio
<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> Prova tu stesso " Nota: Popup non sono l'ideale quando si ha tutta una serie di immagini che si desidera visualizzare (come un album con 500 immagini). Tuttavia, per una coppia di immagini che devono essere visti più grande - sono perfetti.
popup Overlay
È possibile controllare il colore dello sfondo dietro il popup (la pagina stessa) con il data-overlay-theme attributo.
Per impostazione predefinita, la sovrapposizione è trasparente. Utilizzare data-overlay-theme="a" per aggiungere una sovrapposizione di luce e dati-overlay-theme = "b" per aggiungere un overlay scuro:
Esempio
<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> Prova tu stesso " L'effetto di sovrapposizione è spesso usato sulle foto popup:
Esempio
<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> Prova tu stesso " Nota: è anche imparare a usare popup in forme e visualizzazioni elenco nei capitoli successivi.