jQuery ไอคอนมือถือ
ไอคอนเริ่มต้นสำหรับรายการแต่ละรายการมีการเชื่อมโยงเป็น "carat-r" (ลูกศรขวา) การเปลี่ยนนี้ไปที่ไอคอนอื่นใช้ data-icon แอตทริบิวต์บนรายการที่คุณต้องการที่จะปรับเปลี่ยน:
ตัวอย่าง
<ul data-role="listview">
<li><a href="#">Default is right
arrow</a></li>
<li data-icon="plus"><a href="#">data-icon="plus"</a></li>
<li data-icon="minus"><a href="#">data-icon="minus"</a></li>
<li
data-icon="delete"><a href="#">data-icon="delete"</a></li>
<li
data-icon="location"><a href="#">data-icon="location"</a></li>
<li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>
ลองตัวเอง» data-icon="false" จะลบไอคอน
สำหรับการอ้างอิงที่สมบูรณ์ของทุกปุ่มมือถือ jQuery ไอคอน, โปรดไปที่เรา มือถือ jQuery ไอคอนอ้างอิง
ไอคอน 16x16
เพิ่มไอคอน 16x16px มาตรฐานในรายการของคุณเพิ่ม <img> องค์ประกอบภายในเชื่อมโยงกับการเรียนของ "UI-Li-ไอคอน" A:
ตัวอย่าง
<ul data-role="listview">
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon" >USA</a></li>
</ul>
ลองตัวเอง» jQuery มือถือรูปขนาดย่อ
สำหรับภาพที่มีขนาดใหญ่กว่า 16x16px เพิ่ม <img> องค์ประกอบภายในรายการเป็นองค์ประกอบลูกคนแรก (ที่มีชื่อชั้นไม่ได้)
มือถือ jQuery จะปรับขนาดภาพอัตโนมัติไปยัง 80x80px :
ใช้มาตรฐาน HTML เพื่อกรอกรายการที่มีข้อมูล:
ตัวอย่าง
<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free,
open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>
ลองตัวเอง» ปุ่มสปลิต
เพื่อสร้างรายการแยกที่มีบาร์กั้นแนวตั้งวางสองเชื่อมโยงภายใน <li> องค์ประกอบ
มือถือ jQuery โดยอัตโนมัติจะวางการเชื่อมโยงสองทางด้านขวาของรายการด้วยขวา arrow-icon และข้อความที่อยู่ในการเชื่อมโยง (ถ้ามี) จะแสดงเมื่อผู้ใช้เลื่อนเมาส์ไปวางเหนือไอคอน:
ตัวอย่าง
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some
Text</a>
</li>
</ul>
ลองตัวเอง» ช่วยเพิ่มหน้าบางและกล่องโต้ตอบที่จะทำให้การเชื่อมโยงการทำงานมากขึ้น:
ตัวอย่าง
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download"
data-transition="pop" data-icon="gear">Download Browser</a>
</li>
</ul>
<div data-role="page" id="download" data-dialog="true">
ลองตัวเอง» นับฟอง
ฟองอากาศจำนวนที่ใช้ในการแสดงตัวเลขที่เกี่ยวข้องกับรายการเช่นข้อความในกล่องจดหมาย:
ในการเพิ่มฟองอากาศนับใช้องค์ประกอบแบบอินไลน์เช่น <span> มีระดับ "ui-li-count" และเพิ่มจำนวน:
ตัวอย่าง
<ul data-role="listview">
<li><a href="#">Inbox<span class="ui-li-count" >25</span></a></li>
<li><a href="#">Sent<span class="ui-li-count" >432</span></a></li>
<li><a href="#">Trash<span class="ui-li-count" >7</span></a></li>
</ul>
ลองตัวเอง» หมายเหตุ: ในการแสดงจำนวนที่ถูกต้องในการนับฟองนั้นจะต้องได้รับการปรับปรุงโปรแกรม นี้จะอธิบายในบทต่อมา
ตัวอย่างเพิ่มเติม
รายชื่อป๊อปอัพ
วิธีการสร้างรายการป๊อปอัพ
รายการพับ
วิธีการสร้างรายการที่ซ่อนและแสดงเนื้อหา
รายชื่อป๊อปอัพพับ
วิธีการสร้างรายการป๊อปอัพพับ
ความกว้างเต็มรายการพับ
โดยใช้ data-inset="false" แอตทริบิวต์ใน "collapsibles/collapsible set" เพื่อให้ ListView เต็มความกว้าง
การจัดรูปแบบเนื้อหาเพิ่มเติม
วิธีการทำปฏิทิน