jQuery Mobile sivut

jQuery Mobile:n aloittaminen

Vinkki:Vaikka jQuery Mobile sopii kaikkiin mobiililaitteisiin, se voi silti olla yhteensopimaton tietokoneilla (rajoitetun CSS3-tuen vuoksi).

Siksi suosittelemme käyttämään Googlen Chrome-selainta parhaan lukukokemuksen saamiseksi tässä oppaassa.

Esimerkki

<body>
<div data-role="page">
  <div data-role="header">
    <h1>Tervetuloa sivulleni</h1>
  </div>
  <div data-role="content">
    <p>Olen liikkuvan kehittäjä!</p>
  </div>
  <div data-role="footer">
    <h1>Sivun alatunniste teksti</h1>
  </div>
</div>
</body>

Kokeile itse

Esimerkki selityksestä:

  • data-role="page" on näytettävissä selaimessa oleva sivu
  • data-role="header" luo sivun yläreunan työkalupalkin (usein käytetään otsikoihin ja hakupainikkeisiin)
  • data-role="content" määrittelee sivun sisällön, kuten tekstin, kuvat, lomakkeet ja painikkeet jne.
  • data-role="footer" luo sivun alareunan työkalupalkin

Näissä säiliöissä voit lisätä minkä tahansa HTML-elementin - kappaleita, kuvia, otsikoita, listoja jne.

Vinkki:HTML5 data-*-ominaisuudet käytetään luomaan "käsittelyystä kestäviä" interaktiivisia ulkoasuja jQuery Mobile:n avulla mobiililaitteille.

Lisää sivu jQuery Mobileen

jQuery Mobile:ssa voit luoda useita sivuja yhdessä HTML-tiedostossa.

Erotta jokainen sivu ainutlaatuisella id:nä ja yhdistä ne href-ominaisuuden avulla:

Esimerkki

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">Siirry sivulle kaksi</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Siirry sivulle yksi</a>
  </div>
</div>

Kokeile itse

Huomautus:Web-sovellukset, jotka sisältävät paljon sisältöä, voivat vaikuttaa latausaikaan (esimerkiksi teksti, linkit, kuvat ja skriptit jne.). Jos et halua käyttää sisäistä linkkisivua, käytä ulkoista tiedostoa:

<a href="externalfile.html">Siirry ulkoiseen sivuun</a>

Käytä sivua dialogina

Dialogi on tyyppi, joka näyttää tietoja tai pyytää syöttöä.

Jos haluat luoda dialogin, kun käyttäjä napsauttaa (yleiskosketus) linkkiä, lisää data-rel="dialog" kyseiselle linkille:

Esimerkki

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">Siirry sivulle kaksi</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Siirry sivulle yksi</a>
  </div>
</div>

Kokeile itse