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.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

navigation bar jquery mobile png

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.

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

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>