Trang jQuery Mobile

Bắt đầu với jQuery Mobile

Lưu ý:Mặc dù jQuery Mobile phù hợp với tất cả các thiết bị di động, nó vẫn có thể có vấn đề tương thích trên máy tính để bàn (do hỗ trợ CSS3 hạn chế).

Do đó trong hướng dẫn này, chúng tôi khuyên bạn nên sử dụng trình duyệt Google Chrome để có trải nghiệm đọc tốt nhất.

thực tế

<body>
<div data-role="page">
  <div data-role="header">
    <h1>Chào mừng bạn đến với trang chủ của tôi</h1>
  </div>
  <div data-role="content">
    <p>Tôi là một nhà phát triển di động!</p>
  </div>
  <div data-role="footer">
    <h1>Text chân trang</h1>
  </div>
</div>
</body>

Thử ngay

Giải thích ví dụ:

  • data-role="page" là trang hiển thị trong trình duyệt
  • data-role="header" tạo thanh công cụ ở trên cùng của trang (thường được sử dụng cho tiêu đề và nút tìm kiếm)
  • data-role="content" xác định nội dung của trang, chẳng hạn như văn bản, hình ảnh, biểu mẫu và nút, v.v.
  • data-role="footer" tạo thanh công cụ ở dưới cùng của trang

Trong các khối này, bạn có thể thêm bất kỳ phần tử HTML nào - đoạn văn, hình ảnh, tiêu đề, danh sách, v.v.

Lưu ý:Thuộc tính data-* của HTML5 được sử dụng để tạo giao diện tương tác "dễ chạm" cho thiết bị di động bằng jQuery Mobile.

Thêm trang trong jQuery Mobile

Trong jQuery Mobile, bạn có thể tạo nhiều trang trong một tệp HTML duy nhất.

Hãy phân biệt mỗi trang bằng một id duy nhất và sử dụng thuộc tính href để kết nối chúng:

thực tế

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">Chuyển đến trang hai</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Chuyển đến trang một</a>
  </div>
</div>

Thử ngay

Ghi chú:Các ứng dụng web có nhiều nội dung có thể ảnh hưởng đến thời gian tải (ví dụ: văn bản, liên kết, hình ảnh và script, v.v.). Nếu bạn không muốn sử dụng tệp nội bộ trong trang liên kết, hãy sử dụng tệp ngoài:

<a href="externalfile.html">Chuyển đến trang ngoài

Sử dụng trang làm hộp thoại

Hộp thoại là một loại cửa sổ hiển thị thông tin hoặc yêu cầu nhập liệu.

Nếu bạn muốn tạo một hộp thoại khi người dùng nhấp vào (chạm vào) liên kết, hãy thêm data-rel="dialog" vào liên kết đó:

thực tế

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">Chuyển đến trang hai</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Chuyển đến trang một</a>
  </div>
</div>

Thử ngay