jQuery Mobile Tema

jQuery Mobile Tema

jQuery Mobile tilbyder fem forskellige stiltemaer, fra "a" til "e" - hvert tema har forskellige farvede knapper, rækker, indholdsblokke osv. Et tema i jQuery Mobile består af flere synlige effekter og farver.

Hvis du vil tilpasse applikationens udseende, brug data-theme-attributten og tildel en bogstav til denne egenskab:

<div data-role="page" data-theme="a|b|c|d|e">
Værdi Beskrivelse Eksempel
a Standard. Hvid tekst på sort baggrund. Test
b Hvid tekst på blå baggrund / sort tekst på grå baggrund Test
c Sort tekst på lys grå baggrund Test
d Sort tekst på hvid baggrund Test
e Sort tekst på orange baggrund Test

Tip:Bland dine foretrukne temaer!

Standardmæssigt bruger jQuery Mobile "a"-tema til sidehoved og sidefod, og "c"-tema til sidehovedets indhold (lys grå). Men du kan frit blande temaer.

Tematiserede sider, indhold og sidefod

Eksempel

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

Prøv det selv

Tematiserede dialoger

Eksempel

<a href="#pagetwo" data-rel="dialog">Gå til Tematiseret Dialogside</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>

Prøv det selv

Tematiserede knapper

Eksempel

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

Prøv det selv

Tematiserede ikoner

Eksempel

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

Prøv det selv

Sidehoved og sidefod med tematiserede knapper

Eksempel

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">Hjem</a>
  <h1Velkommen til min hjemmeside</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">Søg</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">Knap 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">Knap 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">Knap 3</a>
</div>

Prøv det selv

Thematisk navigationsfelt

Eksempel

<div data-role="footer" data-theme="e">
  <h1>Indsæt føjeretstekst her</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">Knap 1</a></li>
      <li><a href="#" data-icon="arrow-r">Knap 2</a></li>
      <li><a href="#" data-icon="arrow-r">Knap 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >Knap 4</a></li>
    </ul>
  </div> 
</div>

Prøv det selv

Thematisk sammenfaldelig knap og indhold

Eksempel

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>Klik mig - jeg kan sammenfaldes!</h1>
  <p>Jeg er den udvidede indhold.</p>
</div>

Prøv det selv

Thematisk liste

Eksempel

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

Prøv det selv

Tematiserede adskillede knapper

Eksempel

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

Prøv det selv

Tematiserede sammenklappelige lister

Eksempel

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

Prøv det selv

Tematiserede former

Eksempel

<label for="name">Fuldt navn:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">Vælg favoritfarve:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">Rød</option>
  <option value="green">Grøn</option>
  <option value="blue">Blå</option>
</select>

Prøv det selv

Tematiserede sammenklappelige former

Eksempel

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Klik mig - jeg er sammenklappelig!</legend>

Prøv det selv

Tilføj nyt tema

jQuery Mobile giver dig også mulighed for at tilføje nye temaer til mobile sider.

Tilføj eller rediger nye temaer ved at redigere CSS-filen (f.eks. hvis jQuery Mobile er downloadet). Kopier blot et stykke stil og omdøb klassen med bogstaverne (f-z), og juster til dine foretrukne farver og skrifttyper.

Du kan også tilføje nye stilarter ved at bruge tema-klasser i HTML-dokumentet - tilføj klassen ui-bar-(a-z) til værktøjslinjen og klassen ui-body-(a-z) til indholdet:

Eksempel

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

Prøv det selv