Bài 10: jQuery Mobile - Panel - jQuery Mobile căn bản
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: ...
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:
<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>
Zaidap.com.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 để Zaidap.com.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>
Zaidap.com.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 để Zaidap.com.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>
Zaidap.com.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 để Zaidap.com.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.
