jQuery Mobile navigationsfält

jQuery Mobile navigationsfält

Navigationsmenyn består av ett antal horisontellt placerade länkar och finns vanligtvis inom sidhuvud eller sidfot.

Som standard konverteras länkar i navigationsmenyn automatiskt till knappar (utan behov av data-role="button").

Använd egenskapen data-role="navbar" för att definiera navigationsmenyn:

exempel

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">Hem</a></li>
      <li><a href="#anylink">Sida två</a></li>
      <li><a href="#anylink">Sök</a></li>
    </ul>
  </div>
</div>

Prova själv

Tips:Knappens bredd är som standard samma som dess innehåll. Använd en icke-punktlist för att jämnt dela upp knapparna: en knapp tar upp 100% av bredden, två knappar delar varsin 50% av bredden, tre knappar 33.3%, och så vidare. Men om du har fem eller fler knappar i navigationsmenyn, böjer det sig till flera rader (se "mer exempel" på sidans botten).

Aktiv knapp

När en länk i navigationsmenyn klickas på, får den ett valt utseende (tryckt).

Om du vill uppnå detta utseende utan att klicka på länken, använd klassen "ui-btn-active":

exempel

<li><a href="#anylink" class="ui-btn-active">Hem

Prova själv

För flera sidor kanske du behöver ställa in "vald"-utseende för varje knapp för att visa att användaren bläddrar genom sidan. Om du vill göra detta, lägg till klassen "ui-state-persist" samt klassen "ui-btn-active" till länken:

exempel

<li><a href="#anylink" class="ui-btn-active ui-state-persist">Hem

Prova själv

Mer exempel

Navigationsfält i innehållet
Hur man lägger till navigationsfält i data-role="content".
Navigationsfält i sidfoten
Hur man lägger till navigationsfält i sidfoten.
Placering av ikoner i navigationsfältet
Hur man lägger till ikoner i navigationsfältet i sidfoten.
Fem eller fler knappar
Demonstration av tio knappar i navigationsfältet.