Panel narzędziowy jQuery Mobile

Panel narzędziowy jQuery Mobile

Elementy paska narzędziowego często są umieszczane w nagłówku i stopce, aby osiągnąć nawigację "odwiedzone":

Pasek tytułu

Nagłówek zazwyczaj zawiera tytuł nagłówka/LOGO lub jeden do dwóch przycisków (zwykle strona główna, opcje lub przycisk wyszukiwania).

Możesz dodać przyciski do lewej lub prawej strony nagłówka.

Poniższy kod doda przycisk do lewej strony tekstu tytułu nagłówka i przycisk do prawej strony:

Przykład

<div data-role="header">
  <a href="#" data-role="button">Strona główna</a>
  <h1>Witamy na mojej stronie głównej</h1>
  <a href="#" data-role="button">Szukaj</a>
</div>

Spróbuj sam

Poniższy kod doda przycisk do lewej strony tytułu nagłówka:

<div data-role="header">
  <a href="#" data-role="button">Strona główna</a>
  <h1>Witamy na mojej stronie głównej</h1>
</div>

Jednak, jeśli umieścisz przyciski linki po elemencie <h1>, nie będą one wyświetlane po prawej stronie tekstu. Aby dodać przycisk do prawej strony tytułu nagłówka, określ nazwę klasy "ui-btn-right":

Przykład

<div data-role="header">
  <h1>Witamy na mojej stronie głównej</h1>
  <a href="#" data-role="button" class="ui-btn-right">Szukaj</a>
</div>

Spróbuj sam

Wskazówka:Nagłówek może zawierać jeden lub dwa przyciski, ale stopka nie ma ograniczeń.

Stopka panelu

W porównaniu do nagłówka, stopka jest bardziej elastyczna - jest bardziej praktyczna i zmienna, więc może zawierać odpowiednią liczbę przycisków:

Przykład

<div data-role="footer">
  <a href="#" data-role="button">Przekazuj do Weibo Sina</a>
  <a href="#" data-role="button">Przekazuj do Weibo Tencent</a>
  <a href="#" data-role="button">Przekazuj do przestrzeni QQ</a>
</div>

Spróbuj sam

Uwaga:Styl stopki i nagłówka jest inny (zostanie usunięty pewien margines wewnętrzny i puste przestrzenie, a przyciski nie będą wyśrodkowane). Aby naprawić ten problem, ustaw klasę "ui-btn" w stopce:

Przykład

<div data-role="footer" class="ui-btn">

Spróbuj sam

Możesz również wybrać, czy przyciski będą umieszczone poziomo czy pionowo w stopce:

Przykład

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">Przekazuj do Weibo Sina</a>
    <a href="#" data-role="button" data-icon="plus">Przekazuj do Weibo Tencent</a>
    <a href="#" data-role="button" data-icon="plus">Przekazuj do przestrzeni QQ</a>
  </div>
</div>

Spróbuj sam

Pozycjonowanie nagłówka i stopki

Sposoby umieszczania nagłówka i stopki są trzy:

  • Inline - domyślny. Nagłówek i stopka będą umieszczone w linii z treścią strony.
  • Stała pozycja - nagłówek i stopka pozostaną na górze i dole strony.
  • Pełny ekran - podobny do fixed; nagłówek i stopka pozostaną na górze i dole strony, ale również nad treścią strony. Jest również lekko przezroczysty

Użyj atrybutu data-position, aby ustawić pozycję nagłówka i stopki:

Inline pozycja (domyślna)

<div data-role="header" data-position="inline"</div>
<div data-role="footer" data-position="inline"</div>

Spróbuj sam

Stała pozycja

<div data-role="header" data-position="fixed"</div>
<div data-role="footer" data-position="fixed"</div>

Spróbuj sam

Jeśli chcesz włączyć pełny ekran, użyj data-position="fixed" i dodaj atrybut data-fullscreen do tego elementu:

Pełny ekran

<div data-role="header" data-position="fixed" data-fullscreen="true"</div>
<div data-role="footer" data-position="fixed"} data-fullscreen="true"</div>

Spróbuj sam

Wskazówka:Fullscreen jest idealny dla zdjęć, obrazów i wideo.

Wskazówka:Dla pozycji fixed i fullscreen, dotknięcie ekranu ukryje i wyświetli nagłówek i stopkę.