pop jQuery Mobile
È molto popolare pop-up di dialogo pop possono essere sovrapposti sul display pagina.
Pop-up può essere utilizzato per visualizzare un testo, immagini, mappe o altri contenuti.
Creare un pop, e la necessità di utilizzare <a> <div> elemento. Aggiunta di dati-rel = proprietà "pop-up" sul <a> elemento <div> elemento per aggiungere i dati-role = attributo "pop-up". Poi specifichiamo ID per il <div>, e quindi impostare il valore href <a> <div> id specificato. <Div> Il contenuto è esposizione pop contenuti.
Nota: <div> pop e fare clic su un collegamento <a> deve essere sulla stessa pagina.
Esempi
<Div data-role = "pop-up " id = "myPopup">
<P> Si tratta di una semplice comparsa </ p>
</ Div>
Prova »
Se è necessario aggiungere imbottitura verso l'esterno e verso il pop può aggiungere categoria "ui-content" nella <div> in:
Chiudi
Per impostazione predefinita, cliccando pop area esterna o premere il tasto "Esc" per chiudere la finestra. Se non si vuole toccare l'area esterna del pop Chiudi può aggiungere l'attributo = "false" data-dismissible in aggiunta (non raccomandato). È inoltre possibile aggiungere il pulsante Chiudi pop, utilizzando i dati-rel = tasto "indietro" sulla proprietà, e attraverso lo stile per controllare la posizione del pulsante.
| descrizione | Esempi |
|---|---|
| Chiudere il pulsante sul lato destro | provare |
| Chiudi pulsante a sinistra | provare |
| Utilizzando proprietà data-dismissible | provare |
Posizionamento pop
Per impostazione predefinita, il popup appariranno direttamente sopra clic sull'elemento, se avete bisogno di controllare la posizione del pop, è possibile utilizzare i dati di posizione da attribuire per l'apertura di clic pop sul link.
Controllare posizioni pop in tre modi:
| Proprietà Valore | descrizione |
|---|---|
| dati di posizione-to = "finestra" | Popups visualizzati al centro della finestra |
| dati-position-to = "# myid" | Popup visualizzati sugli elementi noti #id |
| dati-position-to = "origine" | Predefinito. Clicca sugli elementi di visualizzazione pop. |
Esempi
<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"> </a> Origin
Prova »
transizione
Per impostazione predefinita, il pop è alcun effetto di transizione. Se si desidera è possibile aggiungere effetti di transizione (tramite data-transizione = "valore" attributo jQuery Mobile di transizione ):
Tutte le istanze di effetti di transizione
Prova »
direzione Pop piccolo bordo
Se è necessario aggiungere un po 'di direzione pop del confine, è possibile utilizzare la proprietà data-freccia e specificare il valore "L" (a sinistra), "t" (in alto), "r" (a destra) o "b" (in basso):
Esempi
<Div data-role = "pop-up " id = "myPopup" class = "ui-content" data-freccia = "l">
<P> a sinistra in direzione di confine. </ P>
</ Div>
Prova »
finestra Pop
Si può pop prodotta da una finestra di dialogo standard (il capo, e il contenuto del marchio in basso):
Esempi
<Div data-role = "pop-up" id = "myPopupDialog">
<Div data-role = "header"> <h1> testo dell'intestazione .. </ h1> </ div>
<div data-role = classe "principale" = "ui-content"> <p> un testo .. </ p> <a href="#"> link .. </a>
<Div data-role = "footer"> <h1> nella parte inferiore del testo .. </ h1> </ div>
</ Div>
Prova »
immagine pop
È possibile visualizzare l'immagine del pop:Esempi
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" alt = stile "w3big" = "width: 200px;"> </a>
<Div data-role = "pop-up" id = "myPopup">
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" style = "width: 800px; height: 400px;" alt = "w3big">
</ Div>
Prova »
copertura pop Sfondo
È possibile utilizzare le proprietà dei dati-overlay-tema dopo il pop aggiungere un colore di sfondo.
Per impostazione predefinita, che copre il colore di sfondo trasparente. Utilizzando i dati-overlay-theme = "a" per aggiungere uno sfondo chiaro, l'uso dei dati di sovrapposizione-theme = "b" aggiungere la copertura scura di sfondo:
Esempi
<Div data-role = "pop-up " id = "myPopup" data-overlay-theme = "b">
<P> Dietro di me c'è un fondo scuro. </ P>
</ Div>
Prova »
Generali popup background image spesso si sovrappongono:
Esempi
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" alt = stile "w3big" = "width: 200px;"> </a>
<Div data-role = "pop-up " id = "myPopup" data-overlay-theme = "b">
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" style = "width: 800px; height: 400px;" alt = "w3big">
</ Div>
Prova »
Nota: Nel prossimo capitolo, imparerete come utilizzare le forme di pop.