Tema jQuery Mobile
jQuery Mobile menyediakan dua gaya tema yang berbeda, dari "a" untuk "b" - masing-masing tombol bertema, toolbar, dll blok warna konten tidak konsisten, efek visual tidak sama untuk setiap topik.
Dengan menetapkan atribut elemen data-tema dapat menyesuaikan tampilan aplikasi:
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
| nilai | deskripsi | contoh |
|---|---|---|
| sebuah | Halaman teks hitam pada kepala latar belakang abu-abu dan bawah adalah teks hitam pada latar belakang latar belakang abu-abu tombol hitam tombol aktivasi teks abu-abu dan link ke teks putih pada latar belakang biru Input nilai atribut kotak placeholder adalah abu-abu terang, nilai nilai hitam | mencoba |
| b | Halaman latar belakang hitam dengan teks putih di bagian bawah kepala adalah teks putih pada latar belakang hitam tombol teks putih diaktifkan tombol latar belakang arang dan link ke teks putih pada latar belakang biru Input nilai atribut kotak placeholder adalah abu-abu terang, nilai putih | mencoba |
Tombol Style Gunakan class = "ui-btn", menggunakan "ui-btn-a | b" tombol pengaturan kelas berwarna abu-abu (default) atau hitam:
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
 | tema "A" gaya untuk sebagian besar elemen, sub-elemen umumnya mewarisi gaya elemen induk. |
|---|
tops topik dan pantat
contoh
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
Coba »
Bagian bawah kotak dialog kepala tema
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>
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
</div>
Coba »
tombol topik
icons tema
topik pop
Tema tombol di bagian bawah kepala dan
contoh
<Div Data-role = "header">
<a href="#" class="ui-btn ui-btn-b"> Depan </a>
<H1> Selamat datang di halaman rumah saya </ h1>
<a href="#" class="ui-btn"> pencarian </a>
</ Div>
<Div Data-role = "footer">
<a href="#" class="ui-btn ui-btn-b"> Ikuti saya di Facebook </a>
<a href="#" class="ui-btn"> Ikuti saya di Twitter </a>
<a href="#" class="ui-btn ui-btn-b"> Ikuti saya di Instagram </a>
</ Div>
<a href="#" class="ui-btn ui-btn-b"> Depan </a>
<H1> Selamat datang di halaman rumah saya </ h1>
<a href="#" class="ui-btn"> pencarian </a>
</ Div>
<Div Data-role = "footer">
<a href="#" class="ui-btn ui-btn-b"> Ikuti saya di Facebook </a>
<a href="#" class="ui-btn"> Ikuti saya di Twitter </a>
<a href="#" class="ui-btn ui-btn-b"> Ikuti saya di Instagram </a>
</ Div>
Coba »
Topik Navigation Bar
contoh
<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>
Coba »
panel tema
tombol dilipat topik 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>
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
Coba »
topik Daftar
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>
<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>
Coba »
tombol perpecahan topik
Topik dilipat Daftar
contoh
<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>
Coba »
Form tema
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>
<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>
Coba »
bentuk dilipat topik
contoh
<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>
Coba »
Menambahkan topik baru
jQuery Mobile dapat menambahkan topik halaman mobile.
Dengan memodifikasi file CSS untuk menambah atau mengedit tema baru (jika Anda telah men-download jQuery Mobile). Anda hanya perlu menyalin modul gaya, dan kemudian kembali huruf nama kelas perintah (cz), dan menambahkan warna dan gaya font favorit Anda.
Anda juga dapat menambahkan dokumen HTML yang berkaitan dengan gaya baru, toolbar menambahkan kelas: ui-bar-(az), menambahkan kategori konten teks: ui-tubuh-(az), menambahkan kategori Halaman: ui-halaman-tema- ( az).
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>
.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>
Coba »
| Dalam versi sebelumnya dari jQuery Mobile, sebuah elemen menggunakan JavaScript untuk mewarisi gaya tema orangtua. Untuk versi 1.4, kerangka kerja yang lebih terfokus untuk perbaikan kinerja, tidak lagi digunakan JavaScript untuk mewarisi, tetapi menggunakan CSS murni. Tim jQuery Mobile untuk ini telah menciptakan alat untuk mengatasi para ThemeRoller . Anda dapat menggunakan alat ini untuk meng-upgrade tema lama, sehingga kompatibel dengan versi baru. |
|---|