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. 

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.

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.