บาร์มือถือ jQuery นำร่อง
แถบนำทางประกอบด้วยกลุ่มของการเชื่อมโยงที่สอดคล้องแนวนอนปกติภายในหัวหรือท้ายกระดาษ A:
บาร์เป็นรหัสเป็นรายการเรียงลำดับของการเชื่อมโยงภายในห่อ <div> องค์ประกอบที่มี data-role="navbar" แอตทริบิวต์:
ตัวอย่าง
<div data-role="header">
<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>
</div>
ลองตัวเอง» โดยค่าเริ่มต้นการเชื่อมโยงภายในแถบนำทางโดยอัตโนมัติจะกลายเป็นปุ่ม (ไม่จำเป็นสำหรับ class="ui-btn" หรือ data-role="button" )
ปุ่มมีโดยค่าเริ่มต้นให้กว้างที่สุดเท่าเนื้อหา ใช้รายการเรียงลำดับการแบ่งปุ่มเท่าเทียมกัน: 1 ปุ่มใช้เวลา 100% ของความกว้าง 2 ปุ่มหุ้น 50% ในแต่ละ, 3 ปุ่ม 33.3% เป็นต้น แต่ถ้าคุณระบุมากกว่า 5 ปุ่มในแถบนำทางก็จะตัดไป หลายบรรทัด (ดู "ตัวอย่างเพิ่มเติม" ด้านล่าง)
ไอคอนในปุ่มนำทาง
หากต้องการเพิ่มไอคอนปุ่มนำทางของคุณใช้แอตทริบิวต์ข้อมูลไอคอน:
แอตทริบิวต์ข้อมูลไอคอนใช้ค่าเช่นเดียวกับคลาส CSS ที่ระบุไว้ใน "ไอคอน" บทที่ ความแตกต่างเพียงอย่างเดียวคือแทนที่จะระบุ class="ui-icon- value " คุณระบุแอตทริบิวต์ของ data-icon=" value "
| ค่าแอตทริบิวต์ | ลักษณะ | ไอคอน |
|---|---|---|
| data-icon="home" | บ้าน | |
| data-icon="arrow-r" | ลูกศรขวา | |
| data-icon="search" | ค้นหา |
สำหรับการอ้างอิงที่สมบูรณ์ของทุกปุ่มมือถือ jQuery ไอคอน, โปรดไปที่เรา มือถือ jQuery ไอคอนอ้างอิง
ไอคอนการวางตำแหน่ง
เช่นเดียวกับ "ui-btn-icon- position " ชั้น (ระบุไว้ใน "ไอคอน" บทที่) คุณสามารถเลือกที่ไอคอนที่ควรจะอยู่ในตำแหน่งปุ่มลูกศร: top, right, bottom หรือ left
ตำแหน่งไอคอนตั้งอยู่บนภาชนะ Navbar - มันเป็นไปไม่ได้ที่จะวางตำแหน่งการเชื่อมโยงแต่ละปุ่มของแต่ละบุคคล ใช้ data-iconpos แอตทริบิวต์เพื่อระบุตำแหน่ง:
| ค่าแอตทริบิวต์ | ลักษณะ | ตัวอย่าง |
|---|---|---|
| data-iconpos="top" | การจัดเรียงไอคอนด้านบน | ลองมัน |
| data-iconpos="right" | การจัดเรียงไอคอนด้านขวา | ลองมัน |
| data-iconpos="bottom" | การจัดเรียงไอคอนด้านล่าง | ลองมัน |
| data-iconpos="left" | การจัดเรียงไอคอนด้านซ้ายมือ | ลองมัน |
โดยค่าเริ่มต้นไอคอนในปุ่มนำทางจะถูกวางไว้ข้างต้นข้อความ (data-iconpos="top")
ปุ่มที่ใช้งานอยู่
เมื่อมีการเชื่อมโยงในแถบนำทางจะเคาะ / คลิกจะได้รับเลือก (กดลง) ดู
เพื่อให้ได้ลักษณะนี้ได้โดยไม่ต้องแตะเชื่อมโยงใช้ class="ui-btn-active" :
สำหรับหลาย ๆ หน้าคุณอาจต้องการ "เลือก" มองหาปุ่มแต่ละปุ่มที่แสดงถึงหน้าผู้ใช้อยู่ใน โดยให้ทำเพิ่ม "ui-state-persist" ชั้นเรียนเพื่อการเชื่อมโยงของคุณเช่นเดียวกับ "ui-btn-active" ระดับ:
ตัวอย่างเพิ่มเติม
Navbars ในเนื้อหา
วิธีการเพิ่มแถบนำทางภายใน data-role="content"
Navbars ในส่วนท้าย
วิธีการเพิ่มแถบนำทางภายในส่วนท้าย
มากกว่า 5 ปุ่ม
การสาธิต 10 ปุ่มในแถบนำทาง