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 người dùng tác động đến, đây là thành phần hay sử dụng trong Menu ở các giao diện chạy trên thiết bị di động.

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. Panel trong jQuery Mobile

Như ta biết cấu trúc HTML của một Page trong jQuery Mobile như sau:

<div data-role="page">
    <div data-role="header" id="position-header">

    </div>
    <div role="main" class="ui-content">

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

Chúng ta chia làm ba phần chính Header, Main, Footer. Nhưng thực tế chúng ta còn nhiều phần cùng cấp với ba phần đó, và Panel là một trong những thành phần đó.

Như vậy cấu trúc HTML của Page có Panel như sau:

<div data-role="page">
    <div data-role="header">

    </div>
    <div data-role="panel" id="myPanel">

    </div>
    <div role="main" class="ui-content">

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

    </div>
</div>

Nhìn vào cấu trúc ta thấy để khai báo thẻ div Panel ở đâu thì ta chỉ cần bổ sung thuộc tính data-role="panel" vào thẻ div đó.

Ví dụ: XEM DEMO

<div data-role="page">
    <div data-role="header" id="position-header">
        <h1>Panel</h1>
    </div>
    <div data-role="panel" id="myPanel">
        <h2>Panel Header..</h2>
        <p>Some text..</p>
    </div>
    <div role="main" class="ui-content">
        <a href="#myPanel" class="ui-btn ui-btn-inline">Open Menu</a>
    </div>
    <div data-role="footer">
        <h4>Author: thehalfheart</h4>
    </div>
</div>

Trong Panel bạn có thể thêm bất kì widget hay component nào. Ví dụ tôi thêm danh sách các button như sau:

Ví dụ: XEM DEMO

<div data-role="page">
    <div data-role="header" id="position-header">
        <h1>Panel</h1>
    </div>
    <div data-role="panel" id="myPanel">
        <div data-role="controlgroup">
            <a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Trang chủ</a>
            <a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Sản phẩm</a>
            <a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Tin Tức</a>
            <a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Tuyển dụng</a>
            <a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Liên hệ</a>
        </div>
    </div>
    <div role="main" class="ui-content">
        <a href="#myPanel" class="ui-btn ui-btn-inline">Open Menu</a>
    </div>
    <div data-role="footer">
        <h4>Author: thehalfheart</h4>
    </div>
</div>

2. Xử lý tắt Panel trong jQuery Mobile

Thông thường khi bạn click bên ngoài Panel hoặc bạn nhấn phím ESC thì nó sẽ ẩn đi, nhưng nếu bạn làm một chức năng nào bắt buộc hủy bỏ hai tính năng đó thì hãy sử dụng thuộc tính data-dismissible và data-swipe-close.

data-dismissible: có giá trị là TRUE / FALSE chỉ định tính năng click bên ngoài tắt hoặc không.
data-swipe-close: có giá trị TRUE / FALSE chỉ định tính năng quẹt (trượt) để tắt hoặc không.

Trường hợp bạn sử dụng data-dismissible="true" thì hãy thêm một button có thuộc tính data-rel="close" để người dùng tắt Panel.

Vi dụ: XEM DEMO

<div data-role="page">
    <div data-role="header">
        <h1>Panel</h1>
    </div>
    <div data-role="panel" id="data-dismissible" data-dismissible="false">
        <p>Nhấn ESC hoặc CLick vào Button để thoát</p>
        <a href="#" data-rel="close" class="ui-btn ui-btn-inline">CLOSE</a>
    </div>
    <div data-role="panel" id="data-swipe-close" data-swipe-close="false">
        <p>Trượt hoặc nhấn ESC hoặc click chuột bên ngoài để tắt</p>
        <a href="#" data-rel="close" class="ui-btn ui-btn-inline">CLOSE</a>
    </div>
    <div role="main" class="ui-content">
        <a href="#data-dismissible" class="ui-btn ui-btn-inline">Data Dismissible</a>
        <a href="#data-swipe-close" class="ui-btn ui-btn-inline">Data Swipe Close</a>
    </div>
    <div data-role="footer">
        <h4>Author: thehalfheart</h4>
    </div>
</div>

3. Data Display trong Panel

Thuộc tính data-display giúp thiết lập cách xuất hiện Panel, nó có ba giá trị như sau:

overlay: xuất hiện ghi đè nội dung chính
push: xuất hiện đẩy nội dung chính và nội dung Panel có hiệu ứng chạy theo
reveal: giá trị mặc định, xuất hiện đẩy nội dung chính và nội dung Panel có hiệu ứng đứng im

Ví dụ: XEM DEMO

<div data-role="page">
    <div data-role="header">
        <h1>Panel</h1>
    </div>
    <div data-role="panel" id="overlay" data-display="overlay">
        <p>overlay</p>
    </div>
    <div data-role="panel" id="push" data-display="push">
        <p>push</p>
    </div>
    <div data-role="panel" id="reveal" data-display="reveal">
        <p>reveal</p>
    </div>
    <div role="main" class="ui-content">
        <a href="#overlay" class="ui-btn ui-btn-inline">Panel</a>
        <a href="#push" class="ui-btn ui-btn-inline">push</a>
        <a href="#reveal" class="ui-btn ui-btn-inline">reveal</a>
    </div>
    <div data-role="footer">
        <h4>Author: thehalfheart</h4>
    </div>
</div>

4. Xác định vị trí Panel

Theo mặc định Panel sẽ xuất hiện bên trái màn hình. Nhưng bạn hoàn toàn có thể thay đổi sang bên phải bằng cách thêm thuộc tính data-position="right".

Như nếu vậy giá trị của data-position là:

left: thì sẽ xuất hiện bên trái
right: thì sẽ xuất hiện bên phải

Ví dụ: XEM DEMO

<div data-role="page">
    <div data-role="header">
        <h1>Panel</h1>
    </div>
    <div data-role="panel" id="position_left" data-position="left">
        <p>Xuất hiện bên trái</p>
    </div>
    <div data-role="panel" id="position_right" data-position="right">
        <p>Xuất hiện bên phải</p>
    </div>
    <div role="main" class="ui-content">
        <a href="#position_left" class="ui-btn ui-btn-inline">LEFT</a>
        <a href="#position_right" class="ui-btn ui-btn-inline">RIGHT</a>
    </div>
    <div data-role="footer">
        <h4>Author: thehalfheart</h4>
    </div>
</div>

Ngoài ra Panel còn có hiệu ứng hiển thị dạng Fixed, nghĩa là nếu ta kéo scroll xuống thì Panel vẫn giữ nguyên vị trí. Để làm được điều này thì ta bổ sung thuộc tính data-position-fixed="true".

Ví dụ: XEM DEMO

<div data-role="page">
    <div data-role="header">
        <h1>Panel</h1>
    </div>
    <div data-role="panel" id="position_fixed" data-position="right" data-position-fixed="true">
        <p>Xuất hiện bên trái</p>
    </div>
    <div role="main" class="ui-content">
        <a href="#position_fixed" class="ui-btn ui-btn-inline">FIXED</a>
        <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, ... 
            và nhiều ngôn ngữ lập trình khác. Website cũng mới ra đời nên rât 
            mong nhận được sự ủng hộ của các bạn để freetuts.net ngày càng có 
            nhiều bài viết học lập trình hay hơn nữa. Xin cám ơn.
        </p>
        <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, ... 
            và nhiều ngôn ngữ lập trình khác. Website cũng mới ra đời nên rât 
            mong nhận được sự ủng hộ của các bạn để freetuts.net ngày càng có 
            nhiều bài viết học lập trình hay hơn nữa. Xin cám ơn.
        </p>
        <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, ... 
            và nhiều ngôn ngữ lập trình khác. Website cũng mới ra đời nên rât 
            mong nhận được sự ủng hộ của các bạn để freetuts.net ngày càng có 
            nhiều bài viết học lập trình hay hơn nữa. Xin cám ơn.
        </p>
    </div>
    <div data-role="footer">
        <h4>Author: thehalfheart</h4>
    </div>
</div>