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 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 các icon và bạn có thể thêm tối đa là 5 buttons cho một Nav Bar. 

navigation bar jquery mobile png

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

Đương nhiên trong một layout bạn có thể thêm nhiều thanh Nav bar bằng cách khai báo chúng liền kề nhau và cái nào khai báo trước thì hiển thị trước. Bạn có thể đặt thanh Nav Bar tại bất kì vị trí nào bạn muốn.

Để khai báo một Nav Bar thì bạn chỉ cần bổ sung thuộc tinh data-role="navbar" vào thẻ div bất kì, sau đó khai báo một thẻ UL với tối đa là 5 thẻ LI.

Ví dụ: XEM DEMO

<div data-role="navbar">
    <ul>
        <li><a href="#anylink">Home</a></li>
        <li><a href="#anylink">Page Two</a></li>
        <li><a href="#anylink">Search</a></li>
    </ul>
</div>

Thêm icon vào button:

Ví dụ: XEM DEMO

<div data-role="navbar">
    <ul>
        <li><a href="#" data-icon="home">Home</a></li>
        <li><a href="#" data-icon="arrow-r">Page Two</a></li>
        <li><a href="#" data-icon="search">Search</a></li>
    </ul>
</div>

Tối đa 5 button:

Ví dụXEM DEMO

<div data-role="navbar">
    <ul>
        <li><a href="#anylink">Page 1</a></li>
        <li><a href="#anylink">Page 2</a></li>
        <li><a href="#anylink">Page 3</a></li>
        <li><a href="#anylink">Page 4</a></li>
        <li><a href="#anylink">Page 5</a></li>
    </ul>
</div>

Nhiều Nav Bar:

Ví dụ: XEM DEMO

<div data-role="navbar">
    <ul>
        <li><a href="#anylink">Page 1</a></li>
        <li><a href="#anylink">Page 2</a></li>
        <li><a href="#anylink">Page 3</a></li>
        <li><a href="#anylink">Page 4</a></li>
        <li><a href="#anylink">Page 5</a></li>
    </ul>
</div>
<div data-role="navbar">
    <ul>
        <li><a href="#anylink">Page 1</a></li>
        <li><a href="#anylink">Page 2</a></li>
        <li><a href="#anylink">Page 3</a></li>
        <li><a href="#anylink">Page 4</a></li>
        <li><a href="#anylink">Page 5</a></li>
    </ul>
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

2. Lời kết

Ngoài các Icon có sẵn trong jQuery Mobile thì bạn có thể tự tạo những Icon khác hoặc sử dụng icon của glyphish.com.

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

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