Teme jQuery Mobile
jQuery Mobile oferă două teme diferite de stil, "a" și "b" - fiecare cu culori diferite pentru butoane, baruri, blocuri de conținut, și așa mai departe.
Pentru a personaliza aspectul cererii dumneavoastră, utilizați data-theme atributului, și atribuiți atributul cu o literă:
<div data-role="page" data-theme="a|b" >
| Valoare | Descriere | Exemplu |
|---|---|---|
| a | text negru pe un fundal gri deschis pentru conținutul paginii text negru pe un fundal gri pentru anteturilor și subsolurilor text negru pe un fundal gri deschis pentru butoane text alb pe un fundal albastru pentru butoanele active, Text albastru pe link-uri Text de culoare deschisă gri (placeholder) sau text negru (value) pe un fundal alb pentru câmpurile de introducere | Incearca-l |
| b | text alb pe un fundal gri închis pentru conținutul paginii text alb pe un fundal gri închis pentru anteturilor și subsolurilor text alb pe un fundal cărbune pentru butoane Text alb pe un "cyan" fundal albastru pentru butoanele active , "Cyan" Text albastru pe link - uri Textul gri (placeholder) sau text alb (value) pe un fundal negru pentru câmpurile de introducere | Incearca-l |
Pentru butoane cu class="ui-btn" , utilizați "ui-btn-a|b" clasă pentru a stiliza butonul fie gri (default) sau negru:
<a href="#" class="ui-btn ui-btn-a|b" >Button</a>
"a" tema este folosit pentru cele mai multe elemente, și elemente copil moștenește adesea tema mamă (or page) .
Theming antet și subsol
Exemplu
<div data-role="header" data-theme="b"></div>
<div data-role="footer"
data-theme="b"></div>
Încearcă - l singur » Theming antet și subsol în Dialogs
Exemplu
<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> Încearcă - l singur » Butoane theming
theming Icoane
Exemplu
<a href="#" class="ui-btn ui-btn-b ui-icon-search
ui-btn-icon-notext">Search</a>
Încearcă - l singur » theming popup-uri
Butoanele theming în antet și subsol
Exemplu
<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>
Încearcă - l singur » Theming de navigare Baruri
Exemplu
<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> Încearcă - l singur » Panouri theming
Theming Button pliabilă și conținut
Exemplu
<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> Încearcă - l singur » Liste de theming
Exemplu
<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> Încearcă - l singur » Butoane Theming Split,
Theming Liste pliabile
Exemplu
<div data-role="collapsible" data-theme="b"
data-content-theme="b">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div> Încearcă - l singur » Formulare theming
Exemplu
<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> Încearcă - l singur » Theming Formulare pliabile
Exemplu
<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend> Încearcă - l singur » Adăugați teme noi
jQuery Mobile, de asemenea, vă permite să adăugați noi teme pentru paginile mobile.
Adăugați sau editați noi teme prin editarea fișierului CSS (if you have download jQuery Mobile) . Trebuie doar să copiați un bloc de stiluri și de a redenumi clasele cu un nume de litere (cz) , și ajustați culorile și fonturile după cum doriți.
Puteți adăuga , de asemenea , noi stiluri prin folosirea claselor tematice în documentul HTML - adăugați clasa "ui-bar-(az) “ pentru bare de instrumente, "ui-body-(az) “ pentru conținutul și ui-page-theme-(az) "pentru pagina:
Exemplu
<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>
Încearcă - l singur » În versiunile anterioare de jQuery Mobile, JavaScript utilizat pentru a gestiona modul în care un element ar trebui să moștenească tema părintelui. Ca de 1.4, cadrul este axat pe îmbunătățirea performanței și de JavaScript a fost înlocuit cu CSS pur.
Echipa jQuery Mobile a creat un instrument, care vă ajută să creați propria temă personalizată: a ThemeRoller . Puteți utiliza acest instrument pentru a face upgrade teme mai vechi pentru a le face compatibile cu noua versiune.