Tema jQuery Mobile

Tema jQuery Mobile

jQuery Mobile menyediakan lima tema gaya yang berbeda, dari "a" hingga "e" - setiap tema disertai dengan tombol, bari, blok konten berwarna yang berbeda, dll. Salah satu tema jQuery Mobile terdiri dari berbagai efek dan warna yang dapat dilihat.

Untuk menyesuaikan penampilan aplikasi, gunakan atribut data-theme dan asosiasikan properti ini dengan sebuah huruf:}}

<div data-role="page" data-theme="a|b|c|d|e">
Nilai Deskripsi Contoh
a Default. Teks putih di latar belakang hitam. Pengujian
b Teks putih di latar belakang biru / Teks hitam di latar belakang abu-abu Pengujian
c Teks hitam di latar belakang abu-abu terang Pengujian
d Teks hitam di latar belakang putih Pengujian
e Teks hitam di latar belakang kuning Pengujian

Petunjuk:Campur tema yang Anda sukai!

Secara default, jQuery Mobile menggunakan tema "a" untuk judul halaman dan kaki halaman, dan tema "c" untuk konten judul (abu-abu terang). Namun, Anda dapat campur tema dengan mudah.

Halaman, konten, dan kaki halaman tema

Contoh

<div data-role="header" data-theme="b"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>

Coba Sendiri

Dialog tema

Contoh

<a href="#pagetwo" data-rel="dialog">Pergi ke Halaman Dialog Tema</a>
<div data-role="page" id="pagetwo" data-overlay-theme="e">
  <div data-role="header" data-theme="b"></div>
  <div data-role="content" data-theme="a"></div>
  <div data-role="footer" data-theme="c"></div>
</div>

Coba Sendiri

Tombol tema

Contoh

<a href="#" data-role="button" data-theme="a">Button</a>
<a href="#" data-role="button" data-theme="b">Button</a>
<a href="#" data-role="button" data-theme="c">Button</a>

Coba Sendiri

Ikon tema

Contoh

<a href="#" data-role="button" data-icon="plus" data-theme="e">Plus</a>

Coba Sendiri

Tombol tema di judul halaman dan kaki halaman

Contoh

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">Beranda</a>
  <h1>Selamat Datang Di Beranda Saya</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">Cari</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">Tombol 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">Tombol 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">Tombol 3</a>
</div>

Coba Sendiri

Berbahasa yang Tertheme

Contoh

<div data-role="footer" data-theme="e">
  <h1>Sisipkan Teks Footer Di Sini</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">Tombol 1</a></li>
      <li><a href="#" data-icon="arrow-r">Tombol 2</a></li>
      <li><a href="#" data-icon="arrow-r">Tombol 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >Tombol 4</a></li>
    </ul>
  </div> 
</div>

Coba Sendiri

Tombol dan konten dapat dikunci yang tertheme

Contoh

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>Klik Saya - Saya dapat dikunci!</h1>
  <p>Saya konten yang diperluas.</p>
</div>

Coba Sendiri

Daftar Tertheme

Contoh

<ul data-role="listview" data-theme="e">
  <li><a href="#">Item Daftar</a></li>
  <li data-theme="a"><a href="#">Daftar Item</a></li>
  <li data-theme="b"><a href="#">Item Daftar</a></li>
  <li><a href="#">Item Daftar</a></li>
</ul>

Coba Sendiri

Tombol Difragmentasi Tertheme

Contoh

<ul data-role="listview" data-split-theme="e">

Coba Sendiri

Daftar Tertheme

Contoh

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <ul data-role="listview">
    <li><a href="#">Agnes</a></li>
  </ul>
</div>

Coba Sendiri

Form Tertheme

Contoh

<label for="name">Nama Lengkap:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">Pilih Warna Favorit:</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 Sendiri

Form Tampilan Tertheme

Contoh

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Click me - I'm collapsible!</legend>

Coba Sendiri

Tambahkan Tema Baru

jQuery Mobile juga memungkinkan Anda menambahkan tema baru ke halaman ponsel:

Tambahkan atau edit tema baru melalui pengedit berkas CSS (seperti yang sudah diunduh jQuery Mobile). Hanya salin bagian gaya, dan renamkan kelas dengan huruf (f-z), kemudian atur warna dan font yang Anda sukai:

Anda juga dapat menambahkan gaya baru melalui penggunaan kelas tema di dokumen HTML - tambahkan kelas ui-bar-(a-z) untuk toolbar dan kelas ui-body-(a-z) untuk konten:

Contoh

<style>
.ui-bar-f
{
warna: hijau;
warna-latar: kuning;
}
.ui-body-f
{
tebal:tebal;
warna:merah jambu;
}
</style>

Coba Sendiri