jQuery Mobile navigointipalkit

jQuery Mobile navigointipalkit

Navigointirivi koostuu yhdestä ryhmästä horisontaalisesti sijoitettuja linkkejä, jotka sijaitsevat yleensä otsikossa tai alatunnisteessa.

Oletuksena navigointirivin linkit muunnetaan automaattisesti painikkeiksi (ei tarvita data-role="button").

Käytä data-role="navbar"-ominaisuutta määrittääksesi navigointirivin:

esimerkki

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">Etusivu</a></li>
      <li><a href="#anylink">Sivu kaksi</a></li>
      <li><a href="#anylink">Haku</a></li>
    </ul>
  </div>
</div>

Kokeile itse

Vinkki:Painikkeen leveys on oletuksena sama kuin sen sisältö. Käytä taulukkolistausta tasaisesti jakamaan painikkeita: yksi painike ottaa 100% leveydestä, kaksi painiketta jakavat 50% leveydestä, kolme painiketta 33.3%, ja niin edelleen. Jos kuitenkin määrität viiden tai useamman painikkeen navigointiriville, ne taipuvat useisiin riveihin (katso sivun alaosan "Lisää esimerkkejä").

Aktiivinen painike

Kun navigointirivin linkkiä napsautetaan, se saa valittu-ulkoasun (painettu).

Jos haluat saavuttaa tämän ulkoasun ilman, että linkkiä napsautetaan, käytä luokkaa "ui-btn-active":

esimerkki

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

Kokeile itse

Useita sivuja varten sinun saattaa tarvita, että jokaiselle painikkeelle asetetaan "valittu"-ulkoasu, jotta käyttäjä voi tietää, että hän selaa kyseistä sivua. Jos haluat tehdä niin, lisää linkkiin luokka "ui-state-persist" sekä luokka "ui-btn-active":

esimerkki

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

Kokeile itse

Lisää esimerkkejä

Sisällön navigointipalkki
Miten lisätä navigointipalkkiin data-role="content" -elementtiin.
Alavasemalla navigointipalkki
Miten lisätä navigointipalkkiin alavasemalle.
Ikonien sijoittaminen navigointipalkkiin
Miten lisätä ikoneja sivun alavasemalla navigointipalkkiin.
Viisi tai useampi painike
Näytetään kymmenen painiketta navigointipalkissa.