jQuery Mobile Themes
jQuery Mobile menyediakan dua tema yang berbeda gaya, "a" dan "b" - masing-masing dengan warna yang berbeda untuk tombol, bar, blok konten, dan sebagainya.
Untuk menyesuaikan tampilan aplikasi Anda, gunakan data-theme atribut, dan menetapkan atribut dengan surat:
<div data-role="page" data-theme="a|b" >
| Nilai | Deskripsi | Contoh |
|---|---|---|
| a | teks hitam pada latar belakang abu-abu terang untuk konten halaman teks hitam pada latar belakang abu-abu untuk header dan footer teks hitam pada latar belakang abu-abu terang untuk tombol teks putih pada latar belakang biru untuk tombol aktif teks biru pada link Cahaya teks abu-abu (placeholder) atau teks hitam (nilai) pada latar belakang putih untuk field input | Cobalah |
| b | teks putih pada latar belakang abu-abu gelap untuk konten halaman teks putih pada latar belakang abu-abu gelap untuk header dan footer teks putih pada latar belakang arang untuk tombol Teks putih pada "cyan" latar belakang biru untuk tombol aktif "Cyan" teks biru pada link teks abu-abu (placeholder) atau teks putih (nilai) pada latar belakang hitam untuk field input | Cobalah |
Untuk tombol dengan class="ui-btn" , menggunakan "ui-btn-a|b" kelas untuk gaya tombol baik abu-abu (default) atau hitam:
<a href="#" class="ui-btn ui-btn-a|b" >Button</a>
The "a" tema digunakan untuk sebagian besar elemen, dan elemen anak sering mewarisi tema induknya (atau halaman).
Theming Header dan Footer
Contoh
<div data-role="header" data-theme="b"></div>
<div data-role="footer"
data-theme="b"></div>
Cobalah sendiri " Theming Header dan Footer di Dialog
Contoh
<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> Cobalah sendiri " Tombol theming
theming Ikon
Contoh
<a href="#" class="ui-btn ui-btn-b ui-icon-search
ui-btn-icon-notext">Search</a>
Cobalah sendiri " theming Popup
Tombol theming di Header dan Footer
Contoh
<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>
Cobalah sendiri " Bar theming Navigasi
Contoh
<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> Cobalah sendiri " theming Panel
Theming Tombol dilipat dan Konten
Contoh
<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> Cobalah sendiri " Daftar theming
Contoh
<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> Cobalah sendiri " Tombol theming Berpisah
Theming Daftar dilipat
Contoh
<div data-role="collapsible" data-theme="b"
data-content-theme="b">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div> Cobalah sendiri " Bentuk theming
Contoh
<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> Cobalah sendiri " Theming Bentuk dilipat
Contoh
<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend> Cobalah sendiri " Tambahkan Tema Baru
jQuery Mobile juga memungkinkan Anda menambahkan tema baru untuk laman seluler.
Menambah atau mengedit tema baru dengan mengedit file CSS (jika Anda telah men-download jQuery Mobile). Hanya menyalin blok gaya dan mengubah nama kelas dengan nama huruf (cz), dan menyesuaikan warna dan font yang Anda inginkan.
Anda juga dapat menambahkan gaya baru dengan menggunakan kelas tema dalam dokumen HTML - menambahkan kelas "ui-bar-(az)" untuk toolbar, "ui-tubuh-(az)" untuk konten dan ui-halaman-tema- ( az) "untuk halaman:
Contoh
<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>
Cobalah sendiri " Dalam versi sebelumnya dari jQuery Mobile, JavaScript digunakan untuk menangani bagaimana sebuah elemen harus mewarisi tema orangtua. Pada 1.4, kerangka difokuskan pada peningkatan kinerja dan JavaScript telah digantikan oleh CSS murni.
Tim jQuery Mobile telah menciptakan alat, yang membantu Anda untuk membuat sendiri tema kustom Anda: The ThemeRoller . Anda juga dapat menggunakan alat ini untuk meng-upgrade tema yang lebih tua untuk membuat mereka kompatibel dengan versi baru.