แถบนำทางมือถือ jQuery

แถบนำทางคือชุดของการเชื่อมโยงการจัดองค์ประกอบในแนวนอนที่มีอยู่ตามปกติภายในหัวหรือหาง

โดยค่าเริ่มต้นการเชื่อมโยงในแถบนำทางโดยอัตโนมัติจะกลายเป็นปุ่ม (ไม่มีข้อมูลบทบาท = "ปุ่ม")

โดยใช้ข้อมูลบทบาท = "navbar" แอตทริบิวต์การกำหนดแถบนำทาง:

	โดยค่าเริ่มต้นความกว้างของปุ่มและเนื้อหาเดียวกัน ใช้รายการเรียงลำดับที่เท่ากันแบ่งความกว้างของปุ่ม: ปุ่มเดียวถึง 100% ของความกว้างของสองปุ่มแต่ละคิดเป็น 50% ของความกว้างของสามปุ่มแต่ละคิด 33,3% ของความกว้างและอื่น ๆ แต่ถ้าคุณระบุมากกว่าห้าปุ่มในแถบนำทางจะถูกแบ่งออกเป็นหลายบรรทัด (ดู "ตัวอย่างเพิ่มเติม")

นำร่องปุ่มไอคอน

เราสามารถใช้แอตทริบิวต์ข้อมูลที่ไอคอนเพื่อเพิ่มไอคอนสำหรับปุ่มลูกศร:

แอตทริบิวต์ข้อมูลไอคอนที่มีส่วนคลาส CSS ของไอคอนใช้ค่าเดียวกัน คลาส CSS ที่จะใช้ class = "ค่า UI-ไอคอน" ข้อมูลไอคอน แสดงที่มาของการใช้ข้อมูลไอคอน = "ค่า"

สำหรับคู่มืออ้างอิงที่สมบูรณ์แบบสำหรับทุกไอคอนปุ่มมือถือ jQuery เยี่ยมชมของเรา คู่มือการใช้งานมือถือ jQuery ไอคอนอ้างอิง

ไอคอนตำแหน่ง

เช่นเดียวกับตำแหน่ง "UI-btn-ไอคอน" หมวดหมู่เดียวกัน (มาตราไอคอนอธิบายไว้ในรายละเอียด) คุณสามารถตั้งค่าสถานที่ตั้งของไอคอนแสดง: TOP (หัว) ขวา (ด้านขวา) ด้านล่าง (ล่าง) หรือซ้าย (ทางด้านซ้าย )

ไอคอนสถานที่ภาชนะบรรจุแถบนำทางที่มีให้ใช้ข้อมูล iconpos แอตทริบิวต์การระบุสถานที่:

	โดยค่าเริ่มต้นไอคอนจะอยู่เหนือปุ่มนำทางข้อความ (ข้อมูล iconpos = "top")

ปุ่มเปิดใช้งาน

เมื่อมีการเชื่อมโยงบนแถบนำทางมีการคลิกก็จะได้รับการเลือก (กด) ลักษณะ

หากคุณต้องการที่จะได้รับลักษณะนี้ไม่คลิกลิงก์ใช้ class = "UI-btn ใช้งาน":

สำหรับหลาย ๆ หน้าคุณอาจต้องการตรวจสอบลักษณะของแต่ละปุ่มในนามของหน้าปัจจุบันผู้ใช้อยู่ การทำเช่นนี้เพิ่ม "UI-รัฐยังคงมีอยู่" และเชื่อมโยง "UI-btn-งาน" ในชั้นเรียน:

ตัวอย่างเพิ่มเติม

แถบนำทางเนื้อหา
คุณจะทำอย่างไรเพิ่มแถบนำทางภายในข้อมูลบทบาท = "เนื้อหา"

แถบนำทางหาง
คุณจะทำอย่างไรเพิ่มแถบนำทางที่ด้านหลัง

ไอคอนเป้าหมายในแถบนำทาง
วิธีการค้นหาที่ไอคอนแถบนำทางในหาง

กว่าห้าปุ่ม
ปุ่ม 10 สาธิตในแถบนำทาง