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 08: jQuery Mobile - Toolbar Header và Footer

Toolbar là thanh công cụ hiển thị ở đầu trang (header) và cuối trang (footer).

Thông thường trên thanh toolbar sẽ là menu hoặc các button điều hướng trang web như nút back, go home, ...

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.

toolbar png

1. Header bars

Header là phần nằm phía trên cùng của website, nó thường chứa tiêu đề của trang web hoặc các button điều hướng hoặc là menu. Ta có thể thêm các button vào Header bars tại các vị trí giữa, trái và phải đều được.

Tiêu đề thường được hiển thị trong thẻ H1, tuy nhiên bạn có thể sử dụng các thẻ từ H1 - H6 bất kì để thay thế.

Header là một thẻ div nằm bên trong thành phần Page và bắt buộc phải có thuộc tính data-role="header".

<div data-role="header">
    <h1>Page Title</h1>
</div>

Bạn có thể thêm các button trên thanh Header bar này.

Ví dụ: XEM DEMO

<div data-role="page">
    <div data-role="header" id="position-header">
         <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
        <h1>Header bar</h1>
        <a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
    </div>
    <div role="main" class="ui-content">
        <p>
            Phần nội dung chính
        </p>
    </div>
</div>

Bạn chú ý class ui-btn-left dùng để hiển thị bên trái và ui-btn-right dùng để hiển thị bên phải.

2. Footer bars

Footer là phần nằm phía dưới cùng của website và nó hoạt động linh hoạt hơn header, nghĩa là bạn có thể thêm nhiều module trên nó giúp người dùng thao tác dễ dàng hơn.

Để khai báo footer bạn phải bổ sung thuộc tính data-role="footer" và bắt buộc nó phải nằm trong Page.

<div data-role="footer">
    <h4>Powered by jQuery Mobile</h4>
</div>

Bạn hoàn toàn có thể thêm bất kì đối tượng nào bên trong Footer như Button, Menu, ...

Ví dụ: XEM DEMO

<div data-role="page">
    <div data-role="header" id="position-header">
        <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
        <h1>Header bar</h1>
        <a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
    </div>
    <div role="main" class="ui-content">
        <p>
            Phần nội dung chính
        </p>
    </div>
    <div data-role="footer">
        <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
        <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
        <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
    </div>
</div>

Như vậy thành phần cơ bản của một trang web viết bằng jQuery Mobile là Header, Main và Footer.

3. Position Header và Footer

Bạn có thể  tùy chỉnh cách hiển thị của Header và Footer thông qua hai thuộc tính data-position và data-fullscreen.

Thuộc tính data-position có các giá trị sau:

  • inline: đây là dạng mặc định, header và footer sẽ hiển thị dạng inline so với header và footer.
  • fixed: header và footer sẽ đứng im khi bạn kéo (scroll) trang web.

Thuộc tính data-fullscreen có giá trị TRUE/FALSE:

  • true: cho phép ẩn Toolbar khi không có thao tác trên webiste.
  • false: hiển thị bình thường theo mặc định

INLINE:

Ví dụ: XEM DEMO

<div data-role="header" data-position="inline" id="position-header">
    <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
    <h1>Header bar</h1>
    <a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div>

FIXED:

Ví dụ: XEM DEMO

<div data-role="header" data-position="fixed" id="position-header">
    <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
    <h1>Header bar</h1>
    <a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div>

FULLSCREEN:

Ví dụ: XEM DEMO

<div data-role="header" data-position="fixed" data-fullscreen="true" id="position-header">
    <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
    <h1>Header bar</h1>
    <a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div>

4. Lời kết

Ngoài ra bạn có thể sử dụng các class có sẵn trong jQuery Mobile để xây dựng giao diện cho Header và Footer. Ví dụ bạn có thể sử dụng Group Button để gom nhóm các button, sử dụng class ui-content để tạo khoảng cách padding, sử dụng CSS riêng để thay đổi giao diện của Button, ...

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

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 10: jQuery Mobile - Panel

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…

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