Temi jQuery Mobile
jQuery Mobile offre due differenti temi di stile, "a" e "b" - ognuno con diversi colori per i pulsanti, barre, blocchi di contenuto, e così via.
Per personalizzare l'aspetto della vostra applicazione, utilizzare il data-theme attributi, e assegnare l'attributo con una lettera:
<div data-role="page" data-theme="a|b" >
| Valore | Descrizione | Esempio |
|---|---|---|
| a | testo nero su sfondo grigio chiaro per il contenuto della pagina testo nero su sfondo grigio per le intestazioni e piè di pagina testo nero su sfondo grigio chiaro per i pulsanti Il testo bianco su sfondo blu per i pulsanti attivi Testo blu sui link Luce testo grigio (segnaposto) o il testo nero (valore) su uno sfondo bianco per campi di input | Provalo |
| b | Il testo bianco su uno sfondo grigio scuro per il contenuto della pagina Il testo bianco su uno sfondo grigio scuro per le intestazioni e piè di pagina Il testo bianco su uno sfondo carbone per i pulsanti Testo bianco su un "cyan" sfondo blu per i pulsanti attivi "Cyan" testo blu su link testo Gray (segnaposto) o testo bianco (valore) su uno sfondo nero per i campi di input | Provalo |
Per i tasti con class="ui-btn" , usa la "ui-btn-a|b" di classe per lo stile pulsante o grigia (default) o nero:
<a href="#" class="ui-btn ui-btn-a|b" >Button</a>
La "a" tema viene utilizzato per la maggior parte degli elementi, e elementi figlio eredita spesso il tema del suo genitore (o la pagina).
Tematizzazione Intestazione e piè di
Esempio
<div data-role="header" data-theme="b"></div>
<div data-role="footer"
data-theme="b"></div>
Prova tu stesso " Tematizzazione Intestazione e piè nelle finestre di dialogo
Esempio
<div data-role="page" data-dialog="true" id="pagetwo">
<div
data-role="header" data-theme="b"></div>
<div
data-role="footer" data-theme="b"></div>
</div> Prova tu stesso " Pulsanti tematizzazione
tematizzazione Icone
Esempio
<a href="#" class="ui-btn ui-btn-b ui-icon-search
ui-btn-icon-notext">Search</a>
Prova tu stesso " tematizzazione popup
Pulsanti Theming in Intestazione e piè di
Esempio
<div data-role="header">
<a href="#" class="ui-btn
ui-btn-b">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn">Search/a>
</div>
<div data-role="footer">
<a href="#" class="ui-btn ui-btn-b">Add Me On Facebook</a>
<a href="#" class="ui-btn">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-btn-b">Add Me On Instagram</a>
</div>
Prova tu stesso " Bar tematizzazione di navigazione
Esempio
<div data-role="footer" data-theme="b">
<h1>Insert Footer Text
Here</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-theme="a">Button 1</a></li>
<li><a href="#" data-icon="arrow-r">Button 2</a></li>
<li><a href="#" data-icon="arrow-r">Button 3</a></li>
<li><a href="#" data-icon="search" data-theme="a">Button 4</a></li>
</ul>
</div>
</div> Prova tu stesso " Pannelli tematizzazione
Tematizzazione Pulsante pieghevole e contenuti
Esempio
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded
content.</p>
</div> Prova tu stesso " liste tematizzazione
Esempio
<ul data-role="listview" data-theme="b">
<li><a href="#">List
Item</a></li>
<li><a href="#">List
Item</a></li>
<li data-theme="a"><a href="#">List
Item</a></li>
<li><a href="#">List Item</a></li>
</ul> Prova tu stesso " Pulsanti tematizzazione Split
Tematizzazione elenchi comprimibili
Esempio
<div data-role="collapsible" data-theme="b"
data-content-theme="b">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div> Prova tu stesso " Forme di tematizzazione
Esempio
<label for="name">Full Name:</label>
<input type="text" name="text"
id="name" data-theme="b">
<label for="colors">Choose Favorite
Color:</label>
<select id="colors"
name="colors" data-theme="b">
<option value="red">Red</option>
<option value="green">Green</option>
<option
value="blue">Blue</option>
</select> Prova tu stesso " Tematizzazione Forme pieghevoli
Esempio
<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend> Prova tu stesso " Aggiungere nuovi temi
jQuery Mobile permette anche di aggiungere nuovi temi per le pagine mobili.
Aggiungere o modificare nuovi temi modificando il file CSS (se si dispone di scaricare jQuery Mobile). Basta copiare un blocco di stili e rinominare le classi con un nome di lettera (CZ), e regolare colori e caratteri come ti piace.
È inoltre possibile aggiungere nuovi stili utilizzando le classi a tema nel documento HTML - aggiungere la classe "ui-bar (az)" per le barre degli strumenti, "ui-corpo-(az)" per il contenuto e ui-page-tema-( az) "per la pagina:
Esempio
<style>
.ui-bar-f {
color: red;
background-color: yellow;
}
.ui-body-f {
font-weight: bold;
color: white;
background-color: purple;
}
.ui-page-theme-f {
font-weight: bold;
background-color: green;
}
</style>
Prova tu stesso " Nelle precedenti versioni di jQuery Mobile, JavaScript utilizzato per gestire come un elemento dovrebbe ereditare il tema del genitore. Come di 1,4, il quadro è focalizzata sulla prestazioni migliorate e JavaScript è stato sostituito da puro CSS.
Il team di jQuery Mobile ha creato uno strumento, che vi aiuta a creare il proprio tema personalizzato: Il ThemeRoller . È inoltre possibile utilizzare questo strumento per aggiornare i temi più anziani per renderli compatibili con la nuova versione.