Trần Ngọc Minh Notes

Thuộc tính data-title

Sao chép các đoạn mã từ tập tin test.htm trong bài liên kết và hiệu ứng Ajax và lưu thành tập tin jQueryMobileDemo.html, sử dụng lại tập tin contact.html. Thực thi tập tin jQueryMobileDemo.html vừa tạo trong Chrome:

Bây giờ chúng ta nhấn liên kết learn more, kết quả:

Để ý rằng tiêu đề trang vẫn là First Mobile Example như khi chúng ta mở trang jQueryMobileDemo.html. Nhấn return để trở lại trang chủ và nhấn liên kết Click here, kết quả:

Để ý tiêu đề trang lúc này là Contact me chứ không phải là First Mobile Example. Nguyên nhân của sự khác biệt này là do trang contact được tạo ra trong một tập tin riêng (contact.html), trong khi đó, trang about và trang home được tạo trong cùng một tập tin (jQueryMobileDemo.html) nên sẽ sử dụng tiêu đề chung của trang được tạo bởi phần tử title.

jQuery Mobile cung cấp thuộc tính data-title giúp tạo tiêu đề các trang được tạo trong cùng một tập tin. Tìm đến trang about trong tập tin jQueryMobileDemo.html và thêm thuộc tính data-title như sau:

<div data-role="page" id="aboutPage" data-title="About Me">

…

</div>

Lưu và thực thi tập tin jQueryMobileDemo.html và nhấn lại learn more:

Thuộc tính data-prefetch

Một website sẽ chứa nhiều trang và người dùng sẽ điều hướng qua lại giữa các trang thông qua các liên kết, ví dụ learn more, click here hay return. Các trang được tạo trong một tập tin sẽ tải nhanh hơn so với các trang được tạo trong các tập tin khác nhau. Tuy nhiên, việc tạo các trang trong cùng một tập tin không phải là giải pháp tốt vì nó dẫn đến cồng kềnh và khó quản lý các đoạn mã.

jQuery Mobile cung cấp thuộc tính data-prefetch giúp tăng nhanh tốc độ tải trang dùng cho các trang được tạo trong tập tin riêng, ví dụ trang contact.html. Áp dụng thuộc tính data-prefetch cho trang contact.html như sau:

<p>

<a href="contact.html"

   data-ajax="false"

   data-prefetch> Click here</a> to contact me.

</p>

Nếu thực thi lại trang jQueryMobileDemo.html và nhấn liên kết Click here bạn vẫn chưa thấy sự khác biệt về tốc độ vì các tập tin chúng ta có nội dung đơn giản và thực thi trên máy tính cá nhân. Mọi chuyện sẽ khác nếu trang có nội dung hay dữ liệu lớn và được đặt trên server.

Thuộc tính data-transition

jQuery Mobile cung cấp các hiệu ứng khác nhau khi chuyển trang thông qua thuộc tính data-transition. Các giá trị của data-transition gồm pop, slide, slideup, slidedown, fade và flip.  Áp dụng hiệu ứng chuyển trang khi chuyển sang trang contact như sau:

<p>

<a href="contact.html"

   data-ajax="false"

   data-prefetch

   data-transition="slide">Click here</a> to contact me.

</p>

Mặc định, với hiệu ứng slide, hiệu ứng sẽ chuyển từ phải sáng trái. Chúng ta có thể đảo ngược hướng của hiệu ứng chuyển trang (từ trái qua phải) bằng cách dùng thuộc tính data-direction với giá trị là reverse:

<p>

    <a href="contact.html"

       data-ajax="false"

       data-prefetch

       data-transition="slide"

       data-direction="reverse">Click here</a> to contact me.

</p>

Đoạn mã hoàn chỉnh của tập tin jQueryMobileDemo.html: