Panele jQuery Telefony
Panele w jQuery Mobile będzie przesuwać się z lewej lub prawej strony ekranu z dodatkową zawartością.
Aby utworzyć panel, dodać data-role="panel" atrybut do <div> elementu i podać id .
Dodaj żadnych znaczników HTML wewnątrz tego <div> , które chcesz wyświetlić w panelu:
<div data-role="panel" id="myPanel" >
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>Uwaga: Znaczniki panel musi być umieszczone przed lub po nagłówka, treści i stopki wewnętrznej stronie jQuery Mobile.
Aby uzyskać dostęp do panelu, należy utworzyć odnośnik wskazujący na id panelu <div> . Gdy użytkownik kliknie na link, otworzy panel:
<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>Oto prosty przykład panel:
Przykład
<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> Spróbuj sam " Płyty zamykające
Można zamknąć panel klikając poza nią, przesuwając lub naciskając Esc klucz. Można wyłączyć klikanie i przesuwając możliwości poprzez dodanie dodatkowych data-* atrybuty do panelu <div> :
| Atrybut | Wartość | Opis | Przykład |
|---|---|---|---|
| data-dismissible | true | false | Określa, czy panel może być zamknięty poprzez kliknięcie poza nią, czy nie | Spróbuj |
| data-swipe-close | true | false | Określa, czy panel może zostać zamknięty przez przesunięcie, czy nie | Spróbuj |
Można również zamknąć panel za pomocą przycisku: Wystarczy dodać link wewnątrz panelu <div> z data-rel="close" atrybut dołączony do niego. I ze względu na kompatybilność, należy również określić href atrybutu aby wskazywał ID strony użytkownik powinien udać się po zamknięciu panelu:
Przykład
<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> Spróbuj sam " panel wyświetlacza
Można kontrolować tryb wyświetlania panelu z wyświetlaczem danych atrybutu:
| wartość atrybutu | Opis |
|---|---|
| data-display="overlay" | Wyświetla panel nad treścią |
| data-display="push" | Ożywia zarówno panel i strony w tym samym czasie |
| data-display="reveal" | Zaniedbanie. Panel będzie siedzieć pod strony i ujawnić jako strona slajdy z dala |
Przykład
<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" > Spróbuj sam " Panele pozycjonowania
Domyślnie Panele pojawią się po lewej stronie ekranu. Na panelu pojawiają się po prawej stronie ekranu, określić data-position="right" atrybut.
Można również określić, jak treść centrali powinien być umieszczony zgodnie z resztą strony, gdy użytkownik zacznie się przewijać. Domyślnie centrala przewijać ze stroną (ale treść centrali będzie utrzymać się na górze strony). Jeśli zawsze chcesz zobaczyć zawartość panelu, bez względu na to, jak daleko można przewijać stronę, należy dodać data-position-fixed="true" atrybutu do panelu: