tutorial pengembangan web terbaru
 

jQuery Mobile tema


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

Contoh

<a href="#" class="ui-btn ui-btn-b">Black Button</a>
Cobalah sendiri "

theming Ikon

Contoh

<a href="#" class="ui-btn ui-btn-b ui-icon-search ui-btn-icon-notext">Search</a>
Cobalah sendiri "

theming Popup

Contoh

<div data-role="popup" id="myPopup" data-theme="b">
Cobalah sendiri "

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

Contoh

<div data-role="panel" id="myPanel" data-theme="b">
Cobalah sendiri "

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

Contoh

<ul data-role="listview" data-split-theme="b">
Cobalah sendiri "

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.