Panouri jQuery Mobile
Panouri din jQuery Mobile va aluneca de pe stânga sau pe partea dreapta a ecranului cu un conținut suplimentar.
Pentru a crea un panou, adăugați data-role="panel" de <div> id data-role="panel" atributul la un <div> element și specificați un id .
Adăugați orice elementele de limbaj HTML în interiorul acestui <div> pe care doriți să le afișați în panoul dumneavoastră:
<div data-role="panel" id="myPanel" >
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>Notă: Panoul de marcaj trebuie să fie plasate înainte sau după antet, conținutul și subsolul în interiorul unei pagini jQuery Mobile.
Pentru a accesa panoul, a crea un link care trimite spre id - <div> id panoului <div> . Atunci când un utilizator face clic pe link-ul, panoul va deschide:
<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>Aici este un exemplu de bază panou:
Exemplu
<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> Încearcă - l singur » Panouri de închidere
Puteți închide panoul făcând clic în afara acesteia, trecând sau prin apăsarea Esc tasta. Puteți dezactiva făcând clic și glisând în caracteristicile prin adăugarea suplimentare data-* atribute panoul <div> :
| Atribut | Valoare | Descriere | Exemplu |
|---|---|---|---|
| data-dismissible | true | false | Specifică dacă panoul poate fi închis făcând clic în afara acesteia, sau nu | Incearca-l |
| data-swipe-close | true | false | Specifică dacă panoul poate fi închis prin trecerea peste ecran, sau nu | Incearca-l |
De asemenea , puteți închide panoul cu ajutorul unui buton: Trebuie doar să adăugați un link în interiorul panoului <div> cu data-rel="close" atribut atașat la acesta. Și , din motive de compatibilitate, ar trebui să specificați , de asemenea, href atributul pentru a indica ID - ul paginii utilizatorul ar trebui să meargă la momentul închiderii panoului:
Exemplu
<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> Încearcă - l singur » Panoul de afișare
Puteți controla modul de afișare a panoului cu data-display de data-display atribut:
| Valoare atribut | Descriere |
|---|---|
| data-display="overlay" | Afișează panoul asupra conținutului |
| data-display="push" | Animă atât panoul și pagina în același timp, |
| data-display="reveal" | Mod implicit. Panoul va sta sub pagina și dezvăluie ca pagina de slide-uri departe |
Exemplu
<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" > Încearcă - l singur » Panouri de poziționare
În mod implicit, panourile vor apărea în partea stângă a ecranului. Pentru panoul să apară în partea dreaptă a ecranului, specificați data-position="right" de data-position="right" atribut.
Puteți specifica, de asemenea, modul în care ar trebui să fie poziționat conținutul panoului în funcție de restul paginii atunci când un utilizator începe pentru a defila. În mod implicit, panoul se va derula cu pagina (but the panel's content will stay on top of the page) de (but the panel's content will stay on top of the page) . Dacă doriți să afișați întotdeauna conținutul panoului, indiferent cât de departe derulați pagina, adăugați data-position-fixed="true" atributul la panou: