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 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.

1. Panel trong jQuery Mobile

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

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.

<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>

5. Lời kết

Panel khá hay đúng không các bạn, chúng ta hay sử dụng nó để hiển thị danh sách menu của trang web.

Bài tiếp theo chúng ta sẽ tìm hiểu jQuery Mobile Collapsibles.

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 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 02: jQuery Mobile - Tìm hiểu Page

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…

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