jQuery Mobile navigationslinje

jQuery Mobile navigationslinje

Navigationslinjen består af et sæt vandrette links og findes normalt inde i hoved- eller fødder.

Som standard konverteres links i navigationslinjen automatisk til knapper (uden data-role="button").

Brug egenskaben data-role="navbar" til at definere navigationslinjen:

eksempel

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">Forside</a></li>
      <li><a href="#anylink">Side to</a></li>
      <li><a href="#anylink">Søg</a></li>
    </ul>
  </div>
</div>

Prøv det selv

Tip:Knapens bredde er som standard ens med indholdet. Brug en uliste til at jævne ud knapperne: En knap optager 100% af bredden, to knapper deler 50% af bredden hver, tre knapper 33.3%, og så videre. Hvis du har fem eller flere knapper i navigationslinjen, vil den bøje sig til flere rækker (se "Flere eksempler" nederst på siden).

Aktiv knap

Når et link i navigationslinjen klikkes på, får det et valgt udseende (trykket ned).

Hvis du ønsker at opnå dette udseende uden at klikke på linket, skal du bruge klassen "ui-btn-active":

eksempel

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

Prøv det selv

For flere sider, kan du måske have brug for at sætte "valgt"-udseende for hver knap for at indikere, at brugeren kigger på denne side. Hvis du vil gøre dette, skal du tilføje klassen "ui-state-persist" samt klassen "ui-btn-active" til linket:

eksempel

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

Prøv det selv

Flere eksempler

Navigationslinje i indholdet
Sådan tilføjes en navigationslinje i "data-role="content"".
Navigationslinje i bundfoden
Sådan tilføjes en navigationslinje i bundfoden.
Ikoner i navigationslinjen
Sådan placeres ikoner i navigationslinjen i bundfoden.
Fem eller flere knapper
Demonstration af ti knapper i navigationslinjen.