รายการ jQuery Mobile

ภาพย่อรายการ jQuery Mobile

สำหรับภาพที่ใหญ่กว่า 16x16px ให้เพิ่มองค์ประกอบ <img> ในลิงก์

jQuery Mobile จะปรับขนาดภาพเองโดยอัตโนมัติเป็น 80x80px:

ตัวอย่าง

<ul data-role="listview">
  <li><a href="#"><img src="chrome.png"></a></li>
</ul>

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

ใช้ HTML มาตรฐานเพื่อกระจายข้อมูลในรายการที่มีข้อมูล:

ตัวอย่าง

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome เบราเซอร์ฟรีและเปิดเสรีของ web ตั้งแต่ปี 2008</p>
    </a>
  </li>
</ul>

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

ไอคอนรายการ jQuery Mobile

หากต้องการเพิ่มไอคอนขนาด 16x16px ในรายการของคุณ ให้เพิ่มค่า class="ui-li-icon" ให้กับองค์ประกอบ <img>

ตัวอย่าง

<li><a href="#"><img src="us.png" alt="สหรัฐอเมริกา" class="ui-li-icon">สหรัฐอเมริกา</a></li>

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

ปุ่มแบ่ง

หากต้องการสร้างรายการแบ่งทางตัดทางตั้งแต่ฝั่งขวาง ให้จัดเก็บสองลิงก์ในองค์ประกอบ <li>

jQuery Mobile จะเพิ่มสไตล์ตราแหลมสีฟ้าเองออกมาให้กับลิงก์ที่สอง ข้อความในลิงก์ (ถ้ามี) จะแสดงขึ้นเมื่อผู้ใช้เลื่อนเมาส์เหนือตราแหลม:

ตัวอย่าง

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">ข้อความบางอย่าง</a>
  </li>
</ul>

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

ด้วยการเพิ่มหน้าและดาวน์โหลดดาลิกษณ์ จะทำให้ลิงก์มีความหนาแน่นมากขึ้น:

ตัวอย่าง

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-rel="dialog">ดาวน์โหลดเบราเซอร์</a>
  </li>
</ul>

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

ความเรียบร้อยของจำนวน

ความเรียบร้อยของจำนวนใช้แสดงจำนวนที่เกี่ยวข้องกับรายการในรายการ ตัวอย่าง ข้อความในอีเมลล์ของอีเมล์:

หากต้องการเพิ่มความเรียบร้อยของจำนวน，ใช้องค์ประกอบอินไลน์ ตัวอย่าง <span> ตั้งค่าค่าทางหลัก class "ui-li-count" และเพิ่มตัวเลข：

ตัวอย่าง

<ul data-role="listview">
  <li><a href="#">จัดเก็บ<span class="ui-li-count">335</span></a></li>
  <li><a href="#">ส่ง<span class="ui-li-count">123</span></a></li>
  <li><a href="#">เศษ<span class="ui-li-count">7</span></a></li>
</ul>

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

หมายเหตุ：เพื่อที่จะแสดงเลขที่ถูกต้องในหลอดนับตัวเลข จำเป็นต้องปรับปรุงโปรแกรมมาตรฐาน จะมีการรายงานในบทต่อไป

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

เปลี่ยนไอคอนลิงก์รายการปกติ
แบบที่ตั้งไอคอนลิงก์ต่างกันให้กับรายการ ไอคอนฉากด้านขวาเป็นตัวอย่าง (ไอคอนฉากด้านขวาเป็นตัวอย่าง)
รายการโล่งเคลื่อนตัว
แบบที่ทำรายการซ่อนและแสดงเนื้อหา
รูปแบบเนื้อหาเพิ่มเติม
แบบที่ทำคลังปฏิทิน