JQUERY MOBILE CĂN BẢN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Bài 02: jQuery Mobile - Tìm hiểu Page

Page là một thành phần chính dùng để gom nhóm các nội dung liên quan tạo thành một khuôn và hiển thị lên trình duyệt, hay nói cách khác nó là một thành phần chính trong jQuery Mobile giúp tương tác với người dùng. Trong một trang HTML có thể có một Page duy nhất và chúng ta sử dụng Ajax để load nội dung theo yêu cầu của người dùng. Tuy nhiên cũng có những trường hợp một trang HTML có nhiều Page giúp cho việc chuyển trang nhanh hơn, trường hợp này thường dùng cho những trang ở dạng HTML tĩnh và không có thao tác với dữ liệu từ Server.

1. Cấu trúc HTML trong jQuery Mobile

Bạn cần hiểu cấu trúc HTML của một trang web và Page trong jQuery Mobile là hoàn toàn khác nhau, một trang HTML có thể có nhiều Page trong jQuery Mobile.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Như bài giới thiệu jQuery Mobile la gì mình có nói nó hoạt động trên HTML5 và CSS3 nên băt buộc phải có phần khai báo <!DOCTYPE html>.

<!DOCTYPE html>

Đừng quên đặt thẻ meta viewport trong thẻ head để khai báo độ zoom và kích thước của trang. Nếu bạn không đặt thẻ này thì một số trình duyệt của Mobile sẽ hiển thị ở dạng dạng giống phiên bản Desktop, nghĩa là bạn sẽ phải zoom nó to lên mới có thể nhìn thấy rõ nội dung.

<meta name="viewport" content="width=device-width, initial-scale=1">

Để sử dụng được những module trong jQuery Mobile thì ta phải import nó vào trang web. Chúng ta có hai phần đó là import file Javascript (jQuery và jQuery Mobile) và Import file CSS.

<link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" />
<script src="http://code.jquery.com/jquery-[version].min.js"></script>
<script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>

Ở đây mình sử dụng đường dẫn từ CDN của jQuery Mobile.

Và đây chính là cấu trúc chuẩn của một trang HTML của jQuery Mobile.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Page Title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="http://code.jquery.com/jquery-[version].min.js"></script>
        <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" />
    </head>
    <body>
        ... nội dung
    </body>
</html>      

2. Page trong jQuery Mobile

Bên trong thẻ body bạn có thể định nghĩa nhiều thẻ HTML. Như ở trên mình nói ta có thể tạo nhiều Page, vậy vấn đề làm thế nào để phân vùng cho từng Page? Bạn sẽ sử dụng cú pháp của jQuery Mobile như sau:

<div data-role="page">
        ...
</div>

Tức là khai báo một thẻ div và cho thuộc tính data-role="page" là được. Như vậy để định nghĩa 2 Pages thì ta chỉ việc làm như sau:

<div data-role="page" id="page1">
        ...
</div>
<div data-role="page" id="page2">
        ...
</div>

Để phân biệt từng page thì mình đặt ID cho mỗi Page khác nhau.

Câu hỏi đặt ra bây giờ là cấu trúc HTML của một page như thế nào? Thông thường một trang web chúng ta có các phần như header, footer, sidebar, ... Nhưng với phiên bản mobile thì chúng ta chỉ có ba thành phần chính đó là header, mainfooter. Để khai báo ba thành phần này thì ta sử dụng cú pháp sau:

<div data-role="page">
    <div data-role="header">...</div>
    <div role="main" class="ui-content">...</div>
    <div data-role="footer">...</div>
</div>

Tạo Page đầu tiên:

Chúng ta sẽ tạo một Page với nội dung là hiển thị tiêu đề, câu chào đơn giản.

Ví dụ: XEM DEMO

<div data-role="page">
    <div data-role="header">
        <h1>Freetuts.net</h1>
    </div>
    <div role="main" class="ui-content">
        <p>Chào mừng bạn đến với freetuts.net</p>
    </div>
    <div data-role="footer">
        <h2>Author: thehalfheart</h2>
    </div>
</div>

Chuyển hướng trang:

Để chuyển hướng sang một Page nằm trong trang HTML hiện tại thì ta chỉ việc bổ sung ID của Page đó vào thuộc tính href của thẻ a.

Ví dụ: XEM DEMO

<div data-role="page" id="init">
    <div data-role="header">
        <h1>Freetuts.net</h1>
    </div>
    <div role="main" class="ui-content">
        <p>Chào mừng bạn đến với freetuts.net</p>
        <p>
            <a href="#intro">Lời giới thiệu</a>
        </p>
    </div>
    <div data-role="footer">
        <h2>Author: thehalfheart</h2>
    </div>
</div>

<div data-role="page" id="intro">
    <div data-role="header">
        <h1>Lời giới thiệu</h1>
    </div>
    <div role="main" class="ui-content">
        <p>
            freetuts.net là một website chuyên về lĩnh vực học lập trình 
            online miễn phí hoàn toàn, website hoạt động chủ yêu tập trung 
            vào các chủ đề như học php, học javascript, học bootstrap, 
            học angularjs, học mysql, học codeigniter, học Phalcon
        </p>
        <p>
            <a href="#init">Trở về</a>
        </p>
    </div>
    <div data-role="footer">
        <h2>Author: thehalfheart</h2>
    </div>
</div>

Hãy xem demo và cảm nhận nhé.

Nếu ban muốn page mới hiển thị ở dạng Popup thì bổ sung thuộc tính data-dialog="true" vào trong page.

Ví dụ: XEM DEMO

<div data-role="page">
    <div data-role="header">
        <h1>Freetuts.net</h1>
    </div>
    <div role="main" class="ui-content">
        <p>Chào mừng bạn đến với freetuts.net</p>
        <p>
            <a href="#intro">Lời giới thiệu</a>
        </p>
    </div>
    <div data-role="footer">
        <h2>Author: thehalfheart</h2>
    </div>
</div>

<div data-role="page" data-dialog="true" id="intro">
    <div data-role="header">
        <h1>Lời giới thiệu</h1>
    </div>
    <div role="main" class="ui-content">
        <p>
            freetuts.net là một website chuyên về lĩnh vực học lập trình 
            online miễn phí hoàn toàn, website hoạt động chủ yêu tập trung 
            vào các chủ đề như học php, học javascript, học bootstrap, 
            học angularjs, học mysql, học codeigniter, học Phalcon
        </p>
    </div>
    <div data-role="footer">
        <h2>Author: thehalfheart</h2>
    </div>
</div>

3. Lời kết

Như vậy Page là thành phần quan trọng nhất trong một trang web được viết bằng jQuery Mobile. Và ban phải phân biệt được cấu trúc HTML của một trang web khác với định nghĩa Page trong jQuery Mobile nhé.

Bạn có thể tạo nhiều pages trong một trang HTML trong trường hợp dữ liệu tĩnh để giúp việc chuyển tiêp giữa các trang được nhanh hơn, đồng thời giảm tải request lên server.

Cùng chuyên mục:

Bài 12: jQuery Mobile - Tables

Bài 12: jQuery Mobile - Tables

Đối với Table rất khó có thể xây dựng responsive bởi vì nó không hiển…

Bài 11: jQuery Mobile - Collapsibles

Bài 11: jQuery Mobile - Collapsibles

Collapsible là hiệu ứng khi bạn click vào dấu cộng thì nó sẽ mở rộng…

Bài 10: jQuery Mobile - Panel

Bài 10: jQuery Mobile - Panel

jQuery Mobile Panel là thành phần trượt ra từ bên phải hoặc bên trái khi…

Bài 09: jQuery Mobile - Navigation Bars

Bài 09: jQuery Mobile - Navigation Bars

Navigations Bar là phần nằm phía dưới header dùng để hiển thị các button kèm…

Bài 08: jQuery Mobile - Toolbar Header và Footer

Bài 08: jQuery Mobile - Toolbar Header và Footer

Toolbar là thanh công cụ hiển thị ở đầu trang (header) và cuối trang (footer).…

Bài 07: jQuery Mobile - Data Position To

Bài 07: jQuery Mobile - Data Position To

Trong bài này chúng ta sẽ tìm hiểu thuộc tính data-position-to trong jQuery Mobile, đây…

Bài 06: jQuery Mobile - Popup - Tooltip - Lightbox

Bài 06: jQuery Mobile - Popup - Tooltip - Lightbox

Popup là một thành phần không thể thiếu trong các ứng dụng Mobile được, vì…

Bài 05: jQuery Mobile - Icons

Bài 05: jQuery Mobile - Icons

jQuery Mobile hỗ trợ một nhóm các icon sử dụng cho buttons, collapsibles, listview buttons…

Bài 04: jQuery Mobile - Buttons

Bài 04: jQuery Mobile - Buttons

jQuery Mobile hỗ trợ một số style button căn bản để tạo giao diện website,…

Bài 03: jQuery Mobile - Transitions

Bài 03: jQuery Mobile - Transitions

jQuery Mobile Framework cho phép bạn chuyển trang với nhiều hiệu ứng khác nhau dựa…

Bài 01: jQuery Mobile là gì?

Bài 01: jQuery Mobile là gì?

jQuery Mobile là một Framework được phát triển tương tự như thư viện jQuery nhưng…

Top