jQuery Mobile teemat

jQuery Mobile teemat

jQuery Mobile tarjoaa viisi erilaista tyyliteemaa, a-lta e-kanneen - jokaisessa teemassa on erilaisia värejä painikkeille, valikoille, sisällösyötteille ja niin edelleen. Yksi jQuery Mobile -teema koostuu useista näkyvistä tehosteista ja väreistä.

Jos haluat mukauttaa sovelluksen ulkoasua, käytä data-theme-ominaisuutta ja määritä ominaisuudelle kirjain：

<div data-role="page" data-theme="a|b|c|d|e">
Arvo Kuvaus Esimerkki
a Oletus. Valkoisella taustalla oleva musta teksti. Testi
b Käytä taustaväriä keltaisella tai harmaalla Testi
c Kirkkaan harmaalla taustalla oleva musta teksti Testi
d Valkoisella taustalla oleva musta teksti Testi
e Keltaisella taustalla oleva musta teksti Testi

Vinkki:Yhdistä mieleisesi teemat!

Oletusarvoisesti jQuery Mobile käyttää "a"-teemaa otsikkopalkin ja alatunnisteen varten, "c"-teemaa otsikkopalkin sisällölle (kirkas harmaa). Voit kuitenkin sekoittaa teemoja vapaasti.

Teemalliset sivut, sisältö ja alatunniste

Esimerkki

<div data-role="header" data-theme="b"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>

Kokeile itse

Teemallinen dialogi

Esimerkki

<a href="#pagetwo" data-rel="dialog">Siirry Teemalliseen Dialogisivulle</a>
<div data-role="page" id="pagetwo" data-overlay-theme="e">
  <div data-role="header" data-theme="b"></div>
  <div data-role="content" data-theme="a"></div>
  <div data-role="footer" data-theme="c"></div>
</div>

Kokeile itse

Teemalliset painikkeet

Esimerkki

<a href="#" data-role="button" data-theme="a">Painike</a>
<a href="#" data-role="button" data-theme="b">Painike</a>
<a href="#" data-role="button" data-theme="c">Painike</a>

Kokeile itse

Teemalliset ikonit

Esimerkki

<a href="#" data-role="button" data-icon="plus" data-theme="e">Lisää</a>

Kokeile itse

Otsikkopalkin ja alatunnisteessa teemalliset painikkeet

Esimerkki

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">Koti</a>
  <h1>Tervetuloa Kotiin Sivulle</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">Hae</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">Painike 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">Painike 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">Painike 3</a>
</div>

Kokeile itse

Teemoitettu navigointirivi

Esimerkki

<div data-role="footer" data-theme="e">
  <h1>Lisää alatunniste teksti tähän</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">Painike 1</a></li>
      <li><a href="#" data-icon="arrow-r">Painike 2</a></li>
      <li><a href="#" data-icon="arrow-r">Painike 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >Painike 4</a></li>
    </ul>
  </div> 
</div>

Kokeile itse

Teemoitettu kääntyvä painike ja sisältö

Esimerkki

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>Klikkaa minua - olen kääntyvä!</h1>
  <p>Olen laajennettu sisältö.</p>
</div>

Kokeile itse

Teemoitettu luettelo

Esimerkki

<ul data-role="listview" data-theme="e">
  <li><a href="#">Luettelo kohta</a></li>
  <li data-theme="a"><a href="#">List Item</a></li>
  <li data-theme="b"><a href="#">Luettelo kohta</a></li>
  <li><a href="#">Luettelo kohta</a></li>
</ul>

Kokeile itse

Teemoitettu erottelu-painike

Esimerkki

<ul data-role="listview" data-split-theme="e">

Kokeile itse

Teemoitettu venytettävä luettelo

Esimerkki

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <ul data-role="listview">
    <li><a href="#">Agnes</a></li>
  </ul>
</div>

Kokeile itse

Teemoitettu lomake

Esimerkki

<label for="name">Täydellinen nimi:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">Valitse suosikkiväri:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">Punainen</option>
  <option value="green">Vihreä</option>
  <option value="blue">Sininen</option>
</select>

Kokeile itse

Teemoitettu venytettävä lomake

Esimerkki

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Napsauta minua - olen venytettävä!</legend>

Kokeile itse

Lisää uusi teema

jQuery Mobile mahdollistaa myös uusien teemojen lisäämisen mobiilisivuille.

Lisää tai muokkaa uusia teemoja editoimalla CSS-tiedostoa (esim. ladattu jQuery Mobile). Kopioi vain osa tyyleistä, nimitä luokat kirjaimilla (f-z) ja muokkaa haluamasi värit ja kirjasimet.

Voit myös lisätä uusia tyylejä HTML-dokumenttiin käyttämällä teemaklassia - lisää työkalupalkille luokka ui-bar-(a-z) ja sisällölle luokka ui-body-(a-z)：

Esimerkki

<style>
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>

Kokeile itse