jQuery Mobile Panel
Panel jQuery Mobile będzie zwrócić się po prawej, po lewej stronie ekranu.
Wskazany przez id elementu <div>, aby dodać data-role = "panel" własność stworzyć panel.
Dodaj znaczniki HTML <div>, aby wyświetlić zawartość panelu:
<div data-role="panel" id="myPanel"> <h2>面板标题..</h2> <p>文本内容..</p> </div>
Uwaga: tag panel musi być umieszczony przed nagłówku strony, treści lub po składzie dnie.
Aby uzyskać dostęp do panelu, trzeba stworzyć panel Link <div> ID łącza, kliknij na link, aby otworzyć panel:
<a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>
Proste przykłady panelu
Przykłady
<Div data-role = "panel " id = "myPanel">
<H2> Panel głowy .. </ h2>
<P> panel Zawartość .. </ p>
</ Div>
<Div data-role = "header">
<H1> standardowy nagłówek strony </ h1>
</ Div>
<Div data-role = "main" class = "ui-content">
<P> Kliknij poniżej, aby otworzyć panel. </ P>
<a href="#myPanel" class="ui-btn ui-btn-inline"> panel otwarty </a>
</ Div>
<Div data-role = "footer">
<H1> u dołu tekstu </ H1>
</ Div>
</ Div>
Spróbuj »
Zamknij panel
Można kliknąć na panelu lub obszaru zewnętrznego lub klawisz ESC, aby zamknąć panel przesuwne. Można użyć atrybutu teleinformatyczny * wyłączyć i kliknij, aby zamknąć panel przesuwny:
| nieruchomość | wartość | opis | Przykłady |
|---|---|---|---|
| danych dismissible | true | false | Określa, czy panel klikając na panel, aby zamknąć obszar zewnętrzny. | próbować |
| Dane-swipe-close | true | false | Określa, czy można zamknąć przesuwane. | próbować |
Możesz użyć przycisku, aby zamknąć panel: wystarczy dodać data-rel = "zamknąć" w panelu właściwości <div> w. Ze względu na wydajność, musimy zamknąć linkiem href punkty atrybutów do ID strony.
Przykłady
<H2> Panel głowy .. </ h2>
<P> Panel jakiś tekst .. </ p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline"> Zamknij panel </a>
</ Div>
Spróbuj »
panel wyświetlacza
Można skorzystać z właściwości trybu wyświetlania danych do kontroli panel wyświetlacza:
| Wartość nieruchomości | opis |
|---|---|
| Dane wyświetlacz = "overlay" | Panel wyświetlacza od zawartości |
| Dane wyświetlacz = "push" | Jednocześnie "push" oraz panel stronę. |
| Dane wyświetlacz = "ujawniają" | Strona domyślna wyciągnie z ekranu jak pokaz slajdów zostanie wyświetlony panel |
Przykłady
<Div data-role = "panel " id = "revealPanel" dane-display = "ujawniają">
<Div data-role = "panel " id = "pushPanel" data-display = "push">
Spróbuj »
panel Lokalizacja
Domyślnie panel będzie wyświetlany po lewej stronie ekranu. Jeśli chcesz się po prawej stronie ekranu pojawi się panel, można określić data-position = "right" mienia.
Można określić zawartość panelu zgodnie z przewijaniem stron i przewijania. Domyślnie, panel wraz z przewijaniem strony (lecz treść panelu pozostaje na górze strony). Jeśli konieczne jest wdrożenie Zawartość panelu jest nieruchomy z przewijaniem stron i przewijania, można dodać dane pozycyjne utrwalonych = "true" atrybut w panelu: