3.2 Toolbars
d. Navbar
Simple navbar
jQuery Mobile มีเครื่องมือ navbarเป็นองค์ประกอบพื้นฐาน และ มักจะใช้ใน header หรือ footer นอกจากนี้ยังมีการเปลี่ยนแปลงแบบ persistent navbarที่ทำงานได้มากกว่า tab bar
Navbar คือ โค้ดที่ครอบ links list ด้วย attribute ที่ชื่อว่า data-role="navbar" โดย Navbar จะกำหนดพื้นที่เพื่อแสดง item ต่างๆโดยอัตโนมัติ
CD ไฟล์: Two-button navbar.html
เมื่อ link ใน navbar ถูกคลิกจะมีสถานะเป็น active
การกำหนด item ให้มีสถานะเป็น active สามารถทำได้โดยเพิ่ม class="ui-btn-active" และ
เพิ่ม class: ui-state-persist navbar with item "One" set to active และ แต่ละปุ่มจะกว้าง ½ ของหน้าต่างเบราว์เซอร์
CD ไฟล์ : Navbar set to active.html
เพิ่ม 3 item โดยแต่ละปุ่มจะกว้าง1/3 ของหน้าต่างเบราว์เซอร์โดยอัตโนมัติ
CD ไฟล์: Navbar adding third item.html
เพิ่ม 4 item โดยแต่ละปุ่มจะกว้าง1/4 ของหน้าต่างเบราว์เซอร์โดยอัตโนมัติ
ตัวอย่างหน้าจอ
navbar กำหนดได้สูงสุด 5 item โดยแต่ละปุ่มจะกว้าง1/5 ของหน้าต่างเบราว์เซอร์โดยอัตโนมัติ
ตัวอย่างหน้าจอ
ถ้าเพิ่มมากกว่า 5 item จะเป็นหลายๆบรรทัด
ตัวอย่างหน้าจอ
Navbars in headers
สามารถเพิ่ม navbar ลงในต่อจากโค้ดของ title และ buttons
Navbars in footers
สามารถเพิ่ม navbar ลงในส่วนล่างสุดของเพจ โดยเพิ่ม data-role="navbar"ลงส่วนของ footer
CD ไฟล์: Navbars in footers.html
Icons in navbars
Navbar สามารถเพิ่มไอคอนได้โดยเพิ่ม attribute data-icon และระบุตำแหน่งของไอคอนได้จาก
data-iconpos
1 กำหนดให้ไอคอนแสดงอยู่ด้านบนตัวอักษร data-iconpos="top"
CD ไฟล์: Icons-top in navbars.html
2 กำหนดให้ไอคอนแสดงอยู่ด้านใต้ตัวอักษร data-iconpos="bottom"
ตัวอย่างหน้าจอ
3 กำหนดให้ไอคอนแสดงอยู่ด้านซ้ายของตัวอักษร data-iconpos="left"
ตัวอย่างหน้าจอ
4 กำหนดให้ไอคอนแสดงอยู่ด้านขวาของตัวอักษร data-iconpos="right"
ตัวอย่างหน้าจอ
Using 3rd party icon sets
สามารถเพิ่มไอคอนคล้ายๆกับที่ใช้ใน iOS โดยดาวน์โหลดจากเว็บไซต์ http://www.glyphish.com/ และคลิกที่ Free 200 icon หลังจากนั้น เรียกใส่ไอคอนและเลือกตำแหน่งได้ใน navbar ได้เลย
ตัวอย่างหน้าจอ
Theming navbars
หากเพิ่มNavbarsลงใน header หรือ footer Navbar จะสืบทอดธีมโดยอัตโนมัติ
การใส่ธีมให้กับ navbar คือเพิ่ม class ที่ชื่อว่า ui-body เช่น ใช้ ui-body-a แทนที่ attribute data-theme
เกร็ดน่ารู้ :
- <div class="ui-body-a ui-body"> และ <body></body> มีการทำงานที่เหมือนกัน
- ไม่สามารถใส่ธีมลง<div data-role="navbar"> ได้เนื่องจาก navbar ไม่สนับสนุน