Header

Trong các bài viết trước về jQuery Mobile, chúng ta có thể dễ dàng thêm header của trang dùng thuộc tính data-role trong thẻ div như sau:

<div data-role="header">My Header</div>

Kết quả

Chúng ta có thể làm cho header đẹp hơn bằng cách đặt nội dung My Header trong cặp <h1>

<div data-role="header">
  <h1>My Header</h1>
</div>

Xem điều kỳ diệu sẽ xảy ra:

Lúc này nội dung My Header sẽ chuyển sang giữa vùng header, kích cỡ vùng header được mở rộng, và đặc biệt nội dung My Header sẽ thay thế nội dung thẻ title. Đây là cơ chế tự động trong jQuery Mobile. Nếu muốn giữ nguyên nội dung của thẻ title, một giải pháp được tìm thấy tại https://stackoverflow.com/questions/6887442/preventing-jquery-mobile-from-setting-document-title/7109235  là thêm đoạn mã jQuery sau:


<script>

$(document).bind("pageinit", function(){

// Patch to prevent overwriting <title></title>

$(":jqmData(role='page')").attr("data-title", document.title);

});

</script>

Lưu ý rằng đoạn mã trên được thêm dưới các đoạn mã chèn thư viện jQuery Mobile trong thẻ header. Thực thi lại trang lúc này:

Bây giờ giả sử chúng ta thêm hai liên kết, tức hai thẻ a, vào trong cặp div như sau:

<div data-role="header">
    <a href="index.html">Home</a>
    <h1>My Header</h1>
    <a href="contact.html">Contact</a>
</div>

Kết quả

Các liên kết sẽ xuất hiện dưới dạng các nút và chúng sẽ được thêm từ bên trái nhưng vì nội dung My Header xuất hiện ở giữa nên liên kết thứ hai sẽ xuất hiện bên phải. Nếu chúng ta xóa đi liên kết thứ nhất:


<div data-role="header">

   <h1>My Header</h1>

    <a href="contact.html">Contact</a>

</div>

Kết quả:

Giả sử chúng ta muốn nút Contact xuất hiện bên phải, có thể thêm lớp ui-btn-right (tương ứng là lớp ui-btn-left) như sau:


<a href="contact.html" class="ui-btn-right">Contact</a>

Kết quả:

Một điều thú vị khác là chúng ta có thể thêm các biểu tượng chức năng cho các liên kết bằng cách sử dụng thuộc tính data-icon. Danh sách các giá trị cho data-icon có thể tham khảo tại https://demos.jquerymobile.com/1.4.5/icons/. Xem ví dụ:


<div data-role="header">

    <a href="index.html" data-icon="home">Home</a>

    <h1>My Header</h1>

    <a href="contact.html" data-icon="info">Contact</a>

</div>

Kết quả:

Chúng ta cũng có thể thêm một nút Back trong vùng Header để trở lại trang trước bằng cách dùng thuộc tính data-add-back-btn. Chú ý, khi thực thi trang trên các thiết bị di động, nút Back thực thi tốt với hệ điều hành Android nhưng với các hệ điều hành di động khác, như iOS, nút Back sẽ không có ứng xử như mong đợi. Xem đoạn mã sau:

<div data-role="page">

  <div data-role="header">

    <h1>My Header</h1>

  </div>
 
  <div data-role="content">

    <a href="#subpage">Go to the sub page...</a>

  </div>

</div>

<div data-role="page" id="subpage">

  <div data-role="header" data-add-back-btn="true">

    <h1>Sub Page</h1>

  </div>

  <div data-role="content">

     <a href="" data-rel="back">Go back...</a>

  </div>

</div>

Đối với jQuery Mobile phiên bản từ 1.4 trở về sau (chúng ta đang dùng 1.4.5), thuộc tính data-add-back-btn được đặt trong vùng header; các phiên bản trước thường được đặt trong vùng page. Đề ý dòng liên kết Go back… của trang subpage chứa thuộc tính data-rel = “back” dùng để tự động trở lại trang trước đó. Thực thi trang:

Nhấn chuột vào liên kết Go to the sub page…, kết quả:

Nhấn nút Back hay liên kết Go back sẽ trở lại trang chính.

Nếu chúng ta không muốn từ Back mà thay bằng một từ khác, ví dụ Return, có thể kết hợp thêm thuộc tính data-back-btn-text như sau:


<div data-role="header" data-add-back-btn= "true" data-back-btn-text = "Return">

   <h1>Sub Page</h1>

</div>

Xem kết quả:

Footer

Tương tự thêm vùng header, chúng ta cũng có thể dễ dàng thêm vùng footer đến trang như sau:


<div data-role="footer">

<h1>My Footer</h1>

</div>

Kết quả:

Chúng ta cũng có thể thêm các liên kết dưới dạng các nút trong vùng footer nhưng sẽ có ứng xử khác so với vùng header. Xét đoạn mã sau:


<div data-role="footer">

   <a href="credits.html">Credits</a>

   <h1>My Footer</h1>

   <a href="contact.html">Contact</a>

</div>

Kết quả:

Không giống trong header, các nút trong footer sẽ không tự động điều chỉnh vị trí sang trái và phải so với nội dung văn bản My Footer và vùng Footer sẽ được mở rộng như trên. Bây giờ chúng ta bỏ thẻ h1, kết quả:

Nếu chúng ta muốn hai nút trong vùng footer xuất hiện đẹp hơn, với nhiều không gian hơn, có thể sử dụng lớp ui-bar như sau:


<div data-role="footer" class="ui-bar">

Kết quả:

Cố định vùng header và footer

Khi người dùng xem nội dung trên các thiết bị mobile, khi dùng thanh cuộn vùng header và footer có thể biến mất khỏi màn hình. Một giải pháp là sử dụng thuộc tính data-position=”fixed” cho các vùng header và footer như sau:


<div data-role="header" data-position="fixed">

<div data-role="footer" class="ui-bar" data-position="fixed">

Kết quả hai vùng header và footer sẽ cố định khi người dùng điều chỉnh thanh cuộn. Đoạn mã hoàn chỉnh cho các minh họa trên như sau:

Xem bài trước: jQuery Mobile: các thuộc tính data-title, data-prefetch và data-transition