Chủ đề jQuery Mobile

Chủ đề jQuery Mobile

jQuery Mobile cung cấp năm chủ đề giao diện khác nhau từ "a" đến "e" - mỗi chủ đề có các nút, thanh, khối nội dung với màu sắc khác nhau, v.v. Một chủ đề của jQuery Mobile được cấu thành từ nhiều hiệu ứng và màu sắc có thể nhìn thấy.

Để tùy chỉnh diện mạo của ứng dụng, hãy sử dụng thuộc tính data-theme và phân phối một ký tự cho thuộc tính này:

<div data-role="page" data-theme="a|b|c|d|e">
Giá trị Mô tả Ví dụ
a Mặc định. Text trắng trên nền đen. Kiểm tra
b Text trắng trên nền xanh / text đen trên nền xám Kiểm tra
c Text đen trên nền xám sáng Kiểm tra
d Text đen trên nền trắng Kiểm tra
e Text đen trên nền vàng Kiểm tra

Lưu ý:Trộn lẫn chủ đề bạn thích!

Mặc định, jQuery Mobile sử dụng chủ đề "a" cho tiêu đề và chân trang, và chủ đề "c" cho nội dung tiêu đề (xám sáng). Tuy nhiên, bạn có thể trộn lẫn chủ đề một cách tự do.

Trang, nội dung và chân trang chủ đề

mô hình

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

Thử ngay

Đối thoại chủ đề

mô hình

<a href="#pagetwo" data-rel="dialog">Đi tới trang đối thoại chủ đề</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>

Thử ngay

Nút chủ đề

mô hình

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

Thử ngay

Ícon chủ đề

mô hình

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

Thử ngay

Tiêu đề và chân trang với nút chủ đề

mô hình

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">Trang chủ</a>
  <h1>Chào mừng bạn đến trang chủ của tôi</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">Tìm kiếm</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">Nút 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">Nút 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">Nút 3</a>
</div>

Thử ngay

Thanh điều hướng chủ đề

mô hình

<div data-role="footer" data-theme="e">
  <h1>Chèn văn bản chân trang ở đây</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">Nút 1</a></li>
      <li><a href="#" data-icon="arrow-r">Nút 2</a></li>
      <li><a href="#" data-icon="arrow-r">Nút 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >Nút 4</a></li>
    </ul>
  </div> 
</div>

Thử ngay

Nút và nội dung cuộn chủ đề

mô hình

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>Nhấn tôi - Tôi có thể gấp lại!</h1>
  <p>Tôi là nội dung mở rộng.</p>
</div>

Thử ngay

Danh sách chủ đề

mô hình

<ul data-role="listview" data-theme="e">
  <li><a href="#">Mục danh sách</a></li>
  <li data-theme="a"><a href="#">Mục Liệt Kê</a></li>
  <li data-theme="b"><a href="#">Mục danh sách</a></li>
  <li><a href="#">Mục danh sách</a></li>
</ul>

Thử ngay

Nút phân chia với chủ đề

mô hình

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

Thử ngay

Danh sách có thể gấp lại với chủ đề

mô hình

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

Thử ngay

Bảng biểu với chủ đề

mô hình

<label for="name">Họ và tên:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">Chọn màu yêu thích:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">Đỏ</option>
  <option value="green">Xanh lục</option>
  <option value="blue">Xanh da trời</option>
</select>

Thử ngay

Bảng biểu có thể gấp lại với chủ đề

mô hình

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Click tôi - Tôi là có thể gấp lại!</legend>

Thử ngay

Thêm chủ đề mới

jQuery Mobile cũng cho phép bạn thêm chủ đề mới vào trang di động:

Hãy chỉnh sửa tệp CSS (ví dụ: đã tải jQuery Mobile) để thêm hoặc chỉnh sửa chủ đề mới. Chỉ cần sao chép một đoạn phong cách, đổi tên lớp bằng chữ cái (f-z), sau đó điều chỉnh để có màu sắc và font chữ bạn thích:

Bạn cũng có thể thêm phong cách mới bằng cách sử dụng lớp chủ đề trong tài liệu HTML - thêm lớp ui-bar-(a-z) cho thanh công cụ và lớp ui-body-(a-z) cho nội dung:

mô hình

<style>
.ui-bar-f
{
màu:green;
màu nền:yellow;
}
.ui-body-f
{
công thức:bold;
màu:đen biếm;
}
</style>

Thử ngay