jQuery Mobile työkalupalkki

jQuery Mobile työkalupalkki

Työkalupalkin elementit sijoitetaan usein verhoon ja alatunnisteeseen - navigointitarkoituksiin "vieraillut":

Otsikkopalkki

Verhokohdessa sisältyy yleensä verhon otsikko/LOGO tai yksi tai kaksi painiketta (yleensä etusivu, valinnat tai etsi-painike).

Voit lisätä painikkeita verhon otsikon sekä vasemmalle että oikealle puolelle.

Seuraava koodi lisää painikkeen verhon otsikon vasemmalle puolelle ja toisen painikkeen oikealle puolelle:

Esimerkki

<div data-role="header">
  <a href="#" data-role="button">etusivu</a>
  <h1>Tervetuloa kotisivulleni</h1>
  <a href="#" data-role="button">etsi</a>
</div>

Kokeile itse!

Seuraava koodi lisää painikkeen verhon otsikon vasemmalle puolelle:

<div data-role="header">
  <a href="#" data-role="button">etusivu</a>
  <h1>Tervetuloa kotisivulleni</h1>
</div>

Jos kuitenkin sijoitat painikkeiden linkit <h1>-elementin jälkeen, ne eivät näy tekstin oikealla puolella. Jos haluat lisätä painikkeen verhon otsikon oikealle puolelle, määritä luokka "ui-btn-right":

Esimerkki

<div data-role="header">
  <h1>Tervetuloa kotisivulleni</h1>
  <a href="#" data-role="button" class="ui-btn-right">etsi</a>
</div>

Kokeile itse!

Vinkki:Verhokohdessa voidaan sisällyttää yksi tai kaksi painiketta, mutta alatunnisteessa ei ole rajoituksia.

Alatunniste

Verholla verrattuna alatunniste on joustavampi - se on käytännöllisempi ja monipuolisempi, joten se voi sisältää tarvittavan määrän painikkeita:

Esimerkki

<div data-role="footer">
  <a href="#" data-role="button">Lähetä Sina Weibo</a>
  <a href="#" data-role="button">Lähetä Tencent Weibo</a>
  <a href="#" data-role="button">Lähetä QQ-kylpylään</a>
</div>

Kokeile itse!

Huomautus:Alatunniste ja otsikon tyylit ovat erilaisia (se vähentää hieman sisätilaa ja tyhjyttä, eikä painikkeet ole keskitetty). Jos haluat korjata tämän ongelman, lisää alatunnisteeseen luokka "ui-btn":

Esimerkki

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

Kokeile itse!

Voit myös valita, onko painikkeet horisontaalisesti vai vertikaalisesti yhdistettyjen napojen kanssa sivun alatunnisteessa:

Esimerkki

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">Lähetä Sina Weibo</a>
    <a href="#" data-role="button" data-icon="plus">Lähetä Tencent Weibo</a>
    <a href="#" data-role="button" data-icon="plus">Lähetä QQ-kylpylään</a>
  </div>
</div>

Kokeile itse!

Sijoita sivun otsikko ja alatunniste

Sivun otsikon ja alatunnisteiden sijoittamistapoja on kolme:

  • Inline - Oletus. Otsikko ja alatunniste ovat rivissä sivun sisällön kanssa.
  • Kiinnitetty - Sivu ja alatunniste pysyvät sivun ylissä ja alassa.
  • Koko näyttö - Samanlainen kuin kiinnitetty; sivu ja alatunniste pysyvät sivun ylissä ja alassa, mutta myös yli sivun sisällön. Se on myös hieman läpinäkyvä

Käytä data-position-ominaisuutta otsikon ja alatunnisteiden sijoittamiseen:

Inline-sijoitus (oletus)

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

Kokeile itse!

Kiinnitetty sijoitus

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

Kokeile itse!

Jos haluat ottaa käyttöön koko näytön sijoituksen, käytä data-position="fixed" ja lisää kyseiselle elementille data-fullscreen-ominaisuus:

Koko näyttö - sijoitus

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

Kokeile itse!

Vinkki:Fullscreen on erittäin sopiva valokuville, kuville ja videolle.

Vinkki:Fixed ja fullscreen -asetuksissa kosketus näytölle piilottaa ja näyttää otsikon ja alatunnisteen.