Tema jQuery Mobile

Tema jQuery Mobile

jQuery Mobile menyediakan lima jenis tema gaya yang berbeza, daripada 'a' hingga 'e' - setiap tema disertai dengan butang, palang, blok konten berwarna yang berbeza, dll. Salah satu tema jQuery Mobile terdiri daripada berbagai kesan dan warna yang dapat dilihat.

Untuk menyesuaikan penampilan aplikasi, gunakan atribut data-theme, dan asingkan nilai huruf bagi atribut ini:}}

<div data-role="page" data-theme="a|b|c|d|e">
Nilai Penerangan Contoh
a Lalai. 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 cerah Pengujian
d Teks hitam di latar belakang putih Pengujian
e Teks hitam di latar belakang kuning Pengujian

Petikan:Campur tema yang anda sukai!

Secara lalai, jQuery Mobile menggunakan tema "a" untuk tajuk dan kaki halaman, dan tema "c" untuk kandungan tajuk (abu abu cerah). Walau bagaimanapun, anda boleh campur tema dengan bebas.

Halaman, kandungan 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

Halaman 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

Butang 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

Bilah tajuk dan kaki halaman dengan butang tema

contoh

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">Rumah</a>
  <h1>Selamat Datang ke Laman Utama 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

Baris Navigasi Ditema

contoh

<div data-role="footer" data-theme="e">
  <h1>Sisipkan Teks Footer Disini</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 yang Ditema yang Dapat Ditarik Balik

contoh

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>Klik Saya - Saya boleh ditarik balik!</h1>
  <p>Saya adalah konten yang diperluas.</p>
</div>

Coba Sendiri

Senarai Ditema

contoh

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

Coba Sendiri

Tombol berfungsi memotong

contoh

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

Coba Sendiri

Daftar berfungsi menutup

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

Borang berfungsi menutup

contoh

<label for="name">Nama Penuh:</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

Borang berfungsi menutup

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 pindah:

Tambah atau edit tema baru melalui fail CSS (seperti yang telah diunduh jQuery Mobile). Hanya salin satu rangkaian gaya, dan gunakan nama huruf (f-z) untuk merubah nama kelas, lalu atur warna dan font yang anda sukai:

Anda juga boleh menambahkan gaya baru dengan menggunakan 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:kerangka emas;
}
.ui-body-f
{
tebal:tebal;
warna:merah jambu;
}
</style>

Coba Sendiri