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.

test php

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

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.

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>

Bài viết này được đăng tại [free tuts .net]

Đừ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, main và footer. Để 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.

Bài trước Bài tiếp