Tema jQuery Mobile

Tema jQuery Mobile

jQuery Mobile offre cinque diversi temi di stile, da "a" a "e" - ciascun tema è dotato di pulsanti, barre, blocchi di contenuto e altro con colori diversi. Un tema di jQuery Mobile è composto da vari effetti visivi e colori.

Per personalizzare l'aspetto dell'applicazione, utilizzare l'attributo data-theme e assegnargli una lettera: }}

<div data-role="page" data-theme="a|b|c|d|e">
Valore Descrizione Esempio
a Predefinito. Testo bianco su sfondo nero. Test
b Testo bianco su sfondo blu / testo nero su sfondo grigio Test
c Testo nero su sfondo grigio chiaro Test
d Testo nero su sfondo bianco Test
e Testo nero su sfondo arancione Test

Suggerimento:Mescola i temi che ti piacciono!

Per impostazione predefinita, jQuery Mobile utilizza il tema "a" per le intestazioni e i piè di pagina, e il tema "c" per il contenuto dell'intestazione (grigio chiaro). Tuttavia, puoi mescolare i temi a tuo piacimento.

Pagine, contenuti e piè di pagina tematici

Esempio

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

Prova personalmente

Finestre di dialogo tematiche

Esempio

<a href="#pagetwo" data-rel="dialog">Vai alla pagina di dialogo tematica</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>

Prova personalmente

Pulsanti tematici

Esempio

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

Prova personalmente

Icone tematiche

Esempio

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

Prova personalmente

I pulsanti tematici nelle intestazioni e piè di pagina

Esempio

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">Casa</a>
  <h1Benvenuti sulla mia homepage</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">Cerca</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">Pulsante 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">Pulsante 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">Pulsante 3</a>
</div>

Prova personalmente

Barra di navigazione tematica

Esempio

<div data-role="footer" data-theme="e">
  <h1>Inserisci il testo del piè di pagina qui</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">Pulsante 1</a></li>
      <li><a href="#" data-icon="arrow-r">Pulsante 2</a></li>
      <li><a href="#" data-icon="arrow-r">Pulsante 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >Pulsante 4</a></li>
    </ul>
  </div> 
</div>

Prova personalmente

Pulsanti e contenuti tematici expandibili

Esempio

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>Cliccami - Sono expandibile!</h1>
  <pSono il contenuto espanso.</p>
</div>

Prova personalmente

Elenco tematico

Esempio

<ul data-role="listview" data-theme="e">
  <li><a href="#">Elemento della lista</a></li>
  <li data-theme="a"><a href="#">Elemento elenco</a></li>
  <li data-theme="b"><a href="#">Elemento della lista</a></li>
  <li><a href="#">Elemento della lista</a></li>
</ul>

Prova personalmente

Pulsanti divisi tematici

Esempio

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

Prova personalmente

Liste pieghevoli tematiche

Esempio

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

Prova personalmente

Formulari tematici

Esempio

<label for="name">Nome completo:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">Scegli il colore preferito:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">Rosso</option>
  <option value="green">Verde</option>
  <option value="blue">Blu</option>
</select>

Prova personalmente

Formulari pieghevoli tematici

Esempio

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Clicca su di me - sono collapsible!</legend>

Prova personalmente

Aggiungi un nuovo tema

jQuery Mobile ti permette anche di aggiungere nuovi temi alle pagine mobili.

Aggiungi o modifica un nuovo tema editando il file CSS (ad esempio, se hai scaricato jQuery Mobile). Basta copiare un segmento di stile, rinominare le classi con lettere (f-z) e regolare i colori e i font a tuo piacimento.

Puoi anche aggiungere nuovi stili utilizzando le classi dei temi in un documento HTML - aggiungi la classe ui-bar-(a-z) alla barra degli strumenti e la classe ui-body-(a-z) al contenuto:

Esempio

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

Prova personalmente