jQuery Mobile Thema

jQuery Mobile Thema

jQuery Mobile biedt vijf verschillende stijlthema's, van "a" tot "e" - elk thema heeft verschillende kleurige knoppen, balken, inhoudsblokken, enz. Een thema van jQuery Mobile bestaat uit meerdere zichtbare effecten en kleuren.

Om het uiterlijk van de applicatie aan te passen, gebruik dan de data-theme eigenschap en assigneer een letter aan deze eigenschap:

<div data-role="page" data-theme="a|b|c|d|e">
Waarde Beschrijving Voorbeeld
a Standaard. Wit tekst op zwarte achtergrond. Test
b Wit tekst op blauwe achtergrond / zwart tekst op grijze achtergrond Test
c Zwart tekst op lichte grijze achtergrond Test
d Zwart tekst op witte achtergrond Test
e Zwart tekst op oranje achtergrond Test

Tip:Combineer je favoriete thema's!

Standaard gebruikt jQuery Mobile het thema "a" voor kop- en voettekst, en het thema "c" voor de inhoud van de kop (lichtgrijs). Toch kun je de thema's gemakkelijk combineren.

Themaatiseerde pagina's, inhoud en voettekst

voorbeeld

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

Probeer het zelf

Themaatiseerde dialoogvensters

voorbeeld

<a href="#pagetwo" data-rel="dialog">Ga naar de thema-gebruikte dialoogpagina</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>

Probeer het zelf

Themaatiseerde knoppen

voorbeeld

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

Probeer het zelf

Themaatiseerde iconen

voorbeeld

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

Probeer het zelf

Themaatiseerde knoppen in kop- en voettekst

voorbeeld

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">Thuis</a>
  <h1 Welkom op mijn homepage</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">Zoek</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">Knop 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">Knop 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">Knop 3</a>
</div>

Probeer het zelf

Themaïzeerde navigatiebalk

voorbeeld

<div data-role="footer" data-theme="e">
  <h1 Voeg hier voettekst in</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">Knop 1</a></li>
      <li><a href="#" data-icon="arrow-r">Knop 2</a></li>
      <li><a href="#" data-icon="arrow-r">Knop 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >Knop 4</a></li>
    </ul>
  </div> 
</div>

Probeer het zelf

Themaïzeerde vouwbare knoppen en inhoud

voorbeeld

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1 Klik me - ik ben vouwbaar!</h1>
  <p Ik ben de uitgebreide inhoud.</p>
</div>

Probeer het zelf

Themaïzeerde lijst

voorbeeld

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

Probeer het zelf

Themaatige knoppen met scheidingsstijl

voorbeeld

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

Probeer het zelf

Themaatige vouwbare lijsten

voorbeeld

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

Probeer het zelf

Themaatige formulieren

voorbeeld

<label for="name">Volledige naam:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">Kies uw favoriete kleur:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">Rood</option>
  <option value="green">Groen</option>
  <option value="blue">Blauw</option>
</select>

Probeer het zelf

Themaatige vouwbare formulieren

voorbeeld

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Click me - I'm collapsible!</legend>

Probeer het zelf

Nieuw thema toevoegen

jQuery Mobile staat u ook toe om nieuwe thema's toe te voegen aan mobiele pagina's.

Voeg of wijzig nieuwe thema's door het CSS-bestand te bewerken (zoals gedownload jQuery Mobile). Kopieer een stukje stijl, hernoem de klasse met een letter (f-z) en pas aan naar de kleur en lettertype naar keuze:

U kunt ook nieuwe stijlen toevoegen door themaklassen in HTML-documenten te gebruiken - voeg aan de toolbar de klasse ui-bar-(a-z) toe, en aan de inhoud de klasse ui-body-(a-z):

voorbeeld

<style>
.ui-bar-f
{
kleur: groen;
achtergrondkleur: geel;
}
.ui-body-f
{
vet: bold;
kleur: purper;
}
</style>

Probeer het zelf