Mobile Panel jQuery
Pannello jQuery Mobile attirerà a destra sul lato sinistro dello schermo.
Designato dal id dell'elemento <div> per aggiungere dati-role = "pannello" proprietà per creare un pannello.
Aggiungi tag HTML <div> per visualizzare il contenuto del pannello:
<div data-role="panel" id="myPanel"> <h2>面板标题..</h2> <p>文本内容..</p> </div>
Nota: tag pannello deve essere posizionato prima che la pagina di intestazione, il contenuto, o dopo la composizione del fondo.
Per accedere al pannello, è necessario creare un pannello di collegamento <div> id del collegamento, fare clic sul link per aprire il pannello:
<a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>
Semplici esempi di pannello
Esempi
<Div data-role = "pannello " id = "myPanel">
<H2> capo panel .. </ h2>
<P> pannello Contenuto .. </ p>
</ Div>
<Div data-role = "header">
<H1> intestazione della pagina di serie </ h1>
</ Div>
<Div data-role = "principale" class = "ui-content">
<P> Clicca qui sotto per aprire il pannello. </ P>
<a href="#myPanel" class="ui-btn ui-btn-inline"> pannello aperto </a>
</ Div>
<Div data-role = "footer">
<H1> in fondo il testo </ h1>
</ Div>
</ Div>
Prova »
Chiudi pannello
È possibile fare clic sul pannello o area esterna o premere Esc per chiudere il pannello scorrevole. È possibile utilizzare dati- * attributo per disattivare e fare clic per chiudere il pannello scorrevole:
| proprietà | valore | descrizione | Esempi |
|---|---|---|---|
| dati-dismissible | true | false | Specifica se il pannello facendo clic sul pannello per chiudere l'area esterna. | provare |
| dati-colpo-vicino | true | false | Specifica se può essere chiuso facendo scorrere. | provare |
È possibile utilizzare il pulsante per chiudere il pannello: solo bisogno di aggiungere dati-rel = "vicino" a pannello delle proprietà <div> in. Per motivi di prestazioni, abbiamo bisogno di chiudere i punti di collegamento attributo href per un ID di pagina.
Esempi
<H2> capo panel .. </ h2>
<P> Pannello di un testo .. </ p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline"> Chiudi pannello </a>
</ Div>
Prova »
display
È possibile utilizzare la proprietà modalità di visualizzazione dei dati per il controllo del display:
| Proprietà Valore | descrizione |
|---|---|
| Dati-display = "overlay" | Il pannello del display sul contenuto |
| Dati-display = "push" | Contemporaneamente pannello "push" e la pagina. |
| Dati-display = "rivelare" | Pagina di default trarrà dallo schermo, come una presentazione, verrà visualizzato il pannello |
Esempi
<Div data-role = "pannello " id =-visualizzazione dei dati "revealPanel" = "rivelare">
<Div data-role = "pannello " id = "pushPanel"-visualizzazione dei dati = "push">
Prova »
Pannello Località
Per impostazione predefinita, il pannello sarà visualizzato sul lato sinistro dello schermo. Se si desidera che viene visualizzato il pannello sul lato destro dello schermo, è possibile specificare i dati-position = "right" di proprietà.
È possibile specificare il contenuto del pannello in base alla pagina di scorrimento e di scorrimento. Per default, il pannello insieme con la pagina di scorrimento (ma il contenuto del pannello è ancora nella parte superiore della pagina). Se è necessario implementare il contenuto del pannello è ferma con la pagina di scorrimento e di scorrimento, è possibile aggiungere l'attributo = "true" data-posizione-fissa nel pannello: