Pannelli jQuery Mobile
Pannelli in jQuery Mobile potranno sfilare da sinistra o destra dello schermo con contenuti aggiuntivi.
Per creare un pannello, aggiungere il data-role="panel" attributo a un <div> elemento e specificare un id .
Aggiungere qualsiasi codice HTML all'interno di questo <div> che si desidera visualizzare nel tuo pannello:
<div data-role="panel" id="myPanel" >
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>Nota: Il markup pannello deve essere posizionato prima o dopo l'intestazione, il contenuto e piè di pagina all'interno di una pagina di jQuery Mobile.
Per accedere al pannello, creare un link che punta al id del pannello <div> . Quando un utente fa clic sul collegamento, il pannello si aprirà:
<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>Ecco un esempio di pannello di base:
Esempio
<div data-role="page" id="pageone">
<div
data-role="panel" id="myPanel" >
<h2>Panel Header..</h2>
<p>Some
text in the panel..</p>
</div>
<div
data-role="header">
<h1>Standard Page Header</h1>
</div>
<div data-role="main" class="ui-content">
<p>Click on the button below to open the Panel.</p>
<a
href="#myPanel" class="ui-btn ui-btn-inline">Open
Panel</a>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div> Prova tu stesso " I pannelli di chiusura
È possibile chiudere il pannello facendo clic al di fuori di esso, scorrendo o premendo il Esc chiave. È possibile disattivare il clic e le caratteristiche strisciata con l'aggiunta di ulteriori data-* attributi al pannello <div> :
| Attributo | Valore | Descrizione | Esempio |
|---|---|---|---|
| data-dismissible | true | false | Specifica se il pannello può essere chiusa facendo clic all'esterno di esso, o no | Provalo |
| data-swipe-close | true | false | Specifica se il pannello può essere chiuso da strisciata, o no | Provalo |
È inoltre possibile chiudere il pannello utilizzando un tasto: Basta aggiungere un link all'interno del pannello <div> con il data-rel="close" attributo collegato ad esso. E per ragioni di compatibilità, è necessario specificare anche il href attributo per indicare l'ID della pagina l'utente deve andare a quando la chiusura del pannello:
Esempio
<div
data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some
text in the panel..</p>
<a
href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">Close Panel</a>
</div> Prova tu stesso " display Panel
È possibile controllare la modalità di visualizzazione del pannello con l'attributo-visualizzazione dei dati:
| Attributo Valore | Descrizione |
|---|---|
| data-display="overlay" | Consente di visualizzare il pannello sul contenuto |
| data-display="push" | Anima sia il pannello e la pagina contemporaneamente |
| data-display="reveal" | Predefinito. Il pannello siederà sotto la pagina e rivelare come pagina scivola via |
Esempio
<div data-role="panel" id="overlayPanel" data-display="overlay" >
<div
data-role="panel" id="revealPanel" data-display="reveal" >
<div
data-role="panel" id="pushPanel" data-display="push" > Prova tu stesso " Pannelli di posizionamento
Per default, pannelli appariranno sul lato sinistro dello schermo. Per il pannello di apparire sul lato destro dello schermo, specificare la data-position="right" attributo.
È inoltre possibile specificare come il contenuto del pannello deve essere posizionato in base al resto della pagina quando un utente inizia a scorrere. Per impostazione predefinita, il pannello scorrerà con la pagina (ma il contenuto del pannello rimarrà sulla parte alta della pagina). Se si desidera sempre per visualizzare i contenuti del pannello, non importa quanto lontano si scorre la pagina, aggiungere il data-position-fixed="true" attributo al pannello: