Trần Ngọc Minh Notes

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:

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

   <h1>Sub Page</h1>

</div>

<div data-role="footer">

<h1>My Footer</h1>

</div>

<div data-role="footer">

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

   <h1>My Footer</h1>

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

</div>

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

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

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