Temi jQuery Mobile
jQuery Mobile fornisce due diversi stili del tema, da "A" a "B" - ogni tema pulsanti, barre degli strumenti, ecc colori bloccare contenuti sono incoerenti, l'effetto visivo non è lo stesso per ogni argomento.
Impostando l'attributo dato-tema può personalizzare l'aspetto dell'applicazione:
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
| valore | descrizione | Esempi |
|---|---|---|
| un | Pagina testo nero su sfondo grigio testa e fondo sono testo nero su sfondo grigio sfondo grigio pulsanti di attivazione di testo pulsante nero e collegamenti a testo bianco su sfondo blu Ingresso scatola segnaposto valore di attributo è un grigio chiaro, il valore è di colore nero | provare |
| B | Pagina sfondo nero con testo bianco nella parte inferiore della testa sono testo bianco su sfondo nero un pulsante di testo bianco attivato pulsanti sfondo carbone e link per il testo bianco su sfondo blu Ingresso scatola segnaposto valore di attributo è un grigio chiaro, il valore è bianca | provare |
Pulsante stile Usa class = "ui-BTN", usando "ui-btn-A | B" pulsante Impostazioni di classe è disattivato (default) o nero:
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
 | tema style "A" per la maggior parte degli elementi, sottoelementi generalmente eredita lo stile dell'elemento genitore. |
|---|
cime Topic e fondi
Esempi
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
Prova »
La parte inferiore della testa tema finestra di dialogo
Esempi
<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>
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
</div>
Prova »
pulsante argomenti
icone a tema
Discussione pop
pulsante Temi nella parte inferiore della testa e
Esempi
<Div data-role = "header">
<a href="#" class="ui-btn ui-btn-b"> casa </a>
<H1> Benvenuti alla mia home page </ h1>
<a href="#" class="ui-btn"> ricerca </a>
</ Div>
<Div data-role = "footer">
<a href="#" class="ui-btn ui-btn-b"> Seguimi su Facebook </a>
<a href="#" class="ui-btn"> Seguimi su Twitter </a>
<a href="#" class="ui-btn ui-btn-b"> Seguimi su Instagram </a>
</ Div>
<a href="#" class="ui-btn ui-btn-b"> casa </a>
<H1> Benvenuti alla mia home page </ h1>
<a href="#" class="ui-btn"> ricerca </a>
</ Div>
<Div data-role = "footer">
<a href="#" class="ui-btn ui-btn-b"> Seguimi su Facebook </a>
<a href="#" class="ui-btn"> Seguimi su Twitter </a>
<a href="#" class="ui-btn ui-btn-b"> Seguimi su Instagram </a>
</ Div>
Prova »
Discussione barra di navigazione
Esempi
<div data-role="footer" data-theme="b">
<h1>文本头部</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>
<h1>文本头部</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 »
pannello a tema
Argomento pulsanti pieghevoli e contenuti
Esempi
<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>
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
Prova »
Elenco degli argomenti
Esempi
<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>
<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 »
SPLIT argomento
Elenco degli argomenti pieghevole
Esempi
<div data-role="collapsible" data-theme="b"
data-content-theme="b">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div>
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div>
Prova »
Temi Form
Esempi
<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>
<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 »
modulo pieghevole argomento
Esempi
<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend>
<legend>Click me - I'm collapsible!</legend>
Prova »
Aggiungere un nuovo argomento
jQuery Mobile può aggiungere nuovi argomenti nella pagina mobile.
Modificando il file CSS per aggiungere o modificare un nuovo tema (se avete scaricato il jQuery Mobile). Hai solo bisogno di copiare il modulo stile, e poi ri-lettera nome della classe di comando (CZ), e aggiungere il colore e font stile preferito.
È inoltre possibile aggiungere documento HTML relativo al nuovo stile, la barra degli strumenti aggiungere classe: ui-bar (az), aggiungere categorie di contenuti di testo: ui-corpo-(az), aggiungere categorie di pagina: ui-page-tema-( az).
Esempi
<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>
.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 »
| Nelle precedenti versioni di jQuery Mobile, un elemento utilizzando JavaScript per ereditare genitore stili del tema. Per la versione 1.4, quadro più mirato per il miglioramento delle prestazioni, non è più utilizzato JavaScript per ereditare, ma usando CSS puro. squadra jQuery Mobile per questo hanno creato uno strumento per affrontare la ThemeRoller . È possibile utilizzare questo strumento per aggiornare un vecchio tema, che lo rende compatibile con la nuova versione. |
|---|