แถวประสานงาน jQuery Mobile

แถวประสานงาน jQuery Mobile

แถวนำทางประกอบด้วยลิงก์ที่จัดลำดับตามแนวนอน ซึ่งทั่วไปแล้วจะตั้งอยู่ในส่วนหัวหรือส่วนท้ายของหน้า

โดยมาตรฐาน ลิงก์ในแถวนำทางจะถูกเปลี่ยนเป็นปุ่ม (ไม่จำเป็นต้องมี data-role="button")

ใช้คุณสมบัติ data-role="navbar" ที่มีในการกำหนดแถวนำทาง:

ตัวอย่าง

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">หน้าแรก</a></li>
      <li><a href="#anylink">หน้าสอง</a></li>
      <li><a href="#anylink">ค้นหา</a></li>
    </ul>
  </div>
</div>

ลองด้วยตัวเอง

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

แบบตัวถอดที่มีการเคลื่อนไหว

เมื่อลิงก์ในแถวนำทางถูกกด จะได้รับรูปแบบที่ถูกเลือก (ถูกกด)

ถ้าคุณต้องการที่จะมีรูปแบบนี้โดยไม่ต้องกดลิงก์ ใช้คลาส "ui-btn-active":

ตัวอย่าง

<li><a href="#anylink" class="ui-btn-active">หน้าหลัก</a></li>

ลองด้วยตัวเอง

สำหรับหน้าเว็บหลายหน้า คุณอาจจะต้องการตั้งรูปแบบ "selected" สำหรับแบบตัวถอดเพื่อแสดงว่าผู้ใช้กำลังเลือกหน้านี้ ถ้าคุณต้องการทำตาม โปรดเพิ่มคลาส "ui-state-persist" และ "ui-btn-active" ในลิงก์:

ตัวอย่าง

<li><a href="#anylink" class="ui-btn-active ui-state-persist">หน้าหลัก</a></li>

ลองด้วยตัวเอง

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

แถวประสานงานในเนื้อหา
ยันทางที่จะใส่แถวประสานงานใน "data-role="content""
แถวประสานงานในส่วนท้ายของหน้า
ยันทางที่จะเพิ่มแถวประสานงานในส่วนท้ายของหน้า
ตำแหน่งไอคอนในแถวประสานงาน
ยันทางที่จะใส่ไอคอนด้วยรอบเท้าสูงด้านล่างของแถวประสานงาน
หลายกว่าห้าปุ่ม
แสดงทั้งหมดสิบปุ่มในแถวประสานงาน