navbar เมนู หรือ รายการ link จะเป็นส่วนของ link ที่ใช้เชื่อมโยงไปหน้าต่างๆ
จัดอยู่ในตำแหน่ง ได้ทั้งในส่วนของ header และ footer
โค้ด navbar ของเรา ที่จะใช้งาน ในการทำความเข้าใจในครั้งนี้
1 2 3 4 5 6 7 8 9 | <div data-role= "navbar" > <ul> <li><a href= "#" class = "ui-btn-active" data-icon= "heart" >เมนู 1</a></li> <li><a href= "#" data-icon= "calendar" >เมนู 2</a></li> <li><a href= "#" data-icon= "audio" >เมนู 3</a></li> <li><a href= "#" data-icon= "alert" >เมนู 4</a></li> <li><a href= "#" data-icon= "gear" >เมนู 5</a></li> </ul> </div><!-- /navbar --> |
data-icon คือ ตัวสำหรับ กำหนด icon เรากำหนดชื่อ ตามที่ jQuery Mobile มีมาให้
class="ui-btn-active" ตัวนี้ ถ้าเราใส่ ไว้ใน link ตัวไหน link ตัวนั้น ก็จะแสดงลักษณะ กำลัง
active หรือ link นั้นถูกคลิก
navbar ใส่ได้สูงสุด 5 เมนู สำหรับแถวเดียว
หากใส่มากกว่า 5 เมนู จะถูก แบ่งเป็น 2 คอลัมน์ และแสดงเป็นแถวลงมา จนเมนูแสดงหมด
ตัวอย่าง
โค้ต
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <!DOCTYPE html> <html> <head> <title>ใส่ไตเติล ตามใจชอบ</title> <meta charset= "UTF-8" /> <meta name= "viewport" content= "width=device-width, initial-scale=1" > <link rel= "stylesheet" href= "js/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src= "js/jquery-1.9.1.min.js" ></script> <script src= "js/mobile/1.4.2/jquery.mobile-1.4.2.min.js" ></script> </head> <body> <!-- Start of page HOME --> <div data-role= "page" id= "page_home" > <div data-role= "header" > <a href= "#left_panel" class = "ui-btn ui-shadow ui-corner-all ui-icon-bars ui-btn-icon-notext" >Bars</a> <h1>Home</h1> <div data-role= "navbar" > <ul> <li><a href= "#" class = "ui-btn-active" data-icon= "heart" >เมนู 1</a></li> <li><a href= "#" data-icon= "calendar" >เมนู 2</a></li> <li><a href= "#" data-icon= "audio" >เมนู 3</a></li> <li><a href= "#" data-icon= "alert" >เมนู 4</a></li> <li><a href= "#" data-icon= "gear" >เมนู 5</a></li> </ul> </div><!-- /navbar --> </div><!-- /header --> <div data-role= "content" > </div><!-- /content --> <div data-role= "panel" id= "left_panel" data-display= "push" > <ul data-role= "listview" data-icon= "false" data-divider-theme= "a" > <li data-role= "list-divider" >หัวข้อแบ่ง</li> <li><a href= "#" >เมนูที่ 1</a></li> <li><a href= "#" >เมนูที่ 2</a></li> <li><a href= "#" >เมนูที่ 3</a></li> <li><a href= "#" >เมนูที่ 4</a></li> <li data-role= "list-divider" >หัวข้อแบ่ง</li> <li><a href= "#" >เมนูที่ 6</a></li> <li><a href= "#" >เมนูที่ 7</a></li> </ul> </div><!-- /panel --> <div data-role= "footer" data-position= "fixed" > <h4>ส่วน footer ใส่ตามใจชอบ</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html> |
หากต้องการแสดง navbar ตรง footer ก็ให้นำ navbar ไปไว้ใน
<div data-role="footer" data-position="fixed"> แทน
ตอนนี้เรากำลังประกอบ หน้าตาเพจ ของ ด้วย jQuery Mobile ขึ้นมาทีเล็กละน้อย
ค่อยมีรูปร่างหน้าตาม เป็นระบบ และซับซ้อนมากขึ้น
ยังไม่ต้องนใจถึงรายละเอียด ค่อยๆ ศึกษาไปพร้อมกัน