peri hokiperihokiclarustologisticsrimashaop.compola taktis menang gates of olympus x1000 perihokipemain perihoki bongkar trik jepep starlight princess x1000perihoki beri panduan lengkap bermain mahjong ways 2 pgsofttips cara penghasil uang pgsoft mahjong ways 2 perihokimahjong wins 3 perihoki memberikan penggali terbesarfenomena gates of olympus buka peluang besar bagi duta76cara dapat pola emas rahasia di duta7 wild west goldtrik menang pgsoft mahjong ways 2 modal receh maxwin duta76duta76 main pgsoft mahjong ways 2 di sela istirahatscatter hitam mahjong wins 3 spin pasti jepe duta76perihoki spin mahjong ways 2 pgsoft scatter hitam maxwinsimbol mahjong wins 3 yang sering muncul di awal perihokitrik gampang menang mahjong winscuan mahjong wins 3 tanpa hentipola spin taruhan kecil mahjong winsstrategi kunci scatter hitam beruntungacor total mahjong wayskemenangan maksimal mahjong wayskemenangan pria pekanbaru mahjong waysmahjong wins3 fenomena baru sumatera baratmenangkan mahjong dengan lincahmenembus batas keberuntungan mahjong waysmenjajal keberuntungan di mahjong wayspola gratis mahjong ways1scatter hitam senjata rahasia mahjong winsteknik spinning menguntungkan untuk scatter hitamanalisis rtp tertinggi mahjong winsfenomena scatter hitam mahjong winsibu rumah tangga dan keberuntungan mahjongkeseruan main mahjong wins3menang mahjong pengguna baru di sosial mediamenghargai setiap momen di mahjong waysserunya main mahjong di warung internetspin slow motion mancing scatterstrategi jitu maxwin mahjong waysstrategi jitu menang mahjong modal kecil jackpot besaranak kampung papua menggemparkan mahjongkeajaiban scatter hitam mahjong wayskeberhasilan joni mahjong winskejaiban mahjong ways di ujung jalanketua mahjong wins3 kehadiran kemenangan dimulai dari balimahjong kehadiran yang menguntungkanmahjong menggila adat88panduan kilat raih 108 jutatips memenangkan mahjongbarista kopi menang 110 juta spin mahjongdakota76 scatter hitam mahjong wins 3gagal cpns menang mahjong wins 3 rp120 jutakisah karyawan minimarket dapat thr lebih awal mahjong winskisah pelajar sma kuasai mahjong wins 3 inspirasi sekolahkisah penjaga parkir tanah abang motor baru mahjong winskisah sukses ibu rumah tangga bandung mahjong winsmahasiswa kkn beli iphone15 mahjong wins3 dakotamantan anak band influencer mahjong scatter hitampola rtp senin gates of olympus guru matematikaidola scatter hitam gampang meledakidola sensasi jackpotidola pola scatter hitamidola hasilkan jackpot dalam waktu singkatidola mahjong wins 3 bocortukang cuci motor menemukan keberuntungan di mahjong

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 282

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: session_set_cookie_params(): Cannot change session cookie parameters when headers already sent

Filename: Session/Session.php

Line Number: 294

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 304

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 314

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 315

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 316

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 317

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 375

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: drivers/Session_files_driver.php

Line Number: 108

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: session_set_save_handler(): Cannot change save handler when headers already sent

Filename: Session/Session.php

Line Number: 110

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: session_start(): Cannot start session when headers already sent

Filename: Session/Session.php

Line Number: 143

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

Bài 10: jQuery Mobile - Panel - Freetuts
JQUERY MOBILE CĂN BẢN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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

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.

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:

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

<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