บทช่วยสอน รายการเนื้อหามือถือ jQuery ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ไอคอน jQuery มือถือ,ตัวอย่าง,ไอคอน 16x16,ตัวอย่าง,มือถือ jQuery รายการภาพย่อ,ตัวอย่าง,ตัวอย่าง,ไอคอน jQuery มือถือ,ตัวอย่าง,ปุ่มสปลิต,ตัวอย่าง,ตัวอย่าง,บับเบิ้ลดิจิตอล,ตัวอย่าง,ตัวอย่างเพิ่มเติม,

รายการเนื้อหามือถือ jQuery


ไอคอน jQuery มือถือ

โดยค่าเริ่มต้นรายการแต่ละรายการจะมีไอคอนลูกศร "กะรัต-R" (ลูกศรขวา) หากคุณต้องการที่จะเปลี่ยนไอคอนนี้สามารถใช้แอตทริบิวต์ข้อมูลไอคอน:

ตัวอย่าง

<ul ข้อมูลบทบาท = "ListView">
<li> <a href="#"> เริ่มต้นคือลูกศรขวา </a> </ li>
<li ข้อมูลไอคอน = "บวก"> <a href="#"> ข้อมูลไอคอน = "บวก" </a> </ li>
<li ข้อมูลไอคอน = "ลบ"> <a href="#"> ข้อมูลไอคอน = "ลบ" </a> </ li>
<li ข้อมูลไอคอน = "ลบ"> <a href="#"> ข้อมูลไอคอน = "ลบ" </a> </ li>
<li ข้อมูลไอคอน = "สถานที่"> <a href="#"> ข้อมูลไอคอน = "สถานที่" </a> </ li>
<li ข้อมูลไอคอน = "false"> <a href="#"> ข้อมูลไอคอน = "false" </a> </ li>
</ ul>

ลอง»
หมายเหตุ ข้อมูลไอคอน = "false" จะลบไอคอน

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


ไอคอน 16x16

หากคุณต้องการที่จะเพิ่มรายชื่อของไอคอนเกณฑ์ 16x16px คุณสามารถเพิ่ม <img> องค์ประกอบในรายการและใช้หมวดหมู่ "UI-Li-ไอคอน":

ตัวอย่าง

<ul ข้อมูลบทบาท = "ListView">
<li> <a href="#"> <img src = "us.png" alt = "สหรัฐอเมริกา" class = "UI-Li-ไอคอน"> สหรัฐอเมริกา </a> </ li>
</ ul>

ลอง»

มือถือ jQuery รายการภาพย่อ

ภาพที่มีขนาดใหญ่กว่า 16x16px เพิ่ม <img> องค์ประกอบในการเชื่อมโยง

มือถือ jQuery โดยอัตโนมัติจะชั่งภาพเพื่อ 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 มือถือ

ในรายการ <img> องค์ประกอบใช้ class = "UI-Li-ไอคอน" เพิ่ม 16x16px ไอคอน:

ตัวอย่าง

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon" >USA</a></li>

ลอง»


ปุ่มสปลิต

JQuery มือถือในรายการบางครั้งก็เป็นสิ่งจำเป็นที่จะทำให้ทั้งสองตัวเลือกที่แตกต่างกันสำหรับเนื้อหาของการดำเนินการนั้นจำเป็นที่จะต้องเชื่อมโยงตัวเลือกการแบ่งส่วนปุ่ม วิธีการของการแบ่งส่วนคือเพื่อให้บรรลุ <li> องค์ประกอบเพื่อเพิ่มองค์ประกอบ <a> ก็สามารถบรรลุผลของการแบ่งหน้า

มือถือ jQuery โดยอัตโนมัติจะตั้งค่าการเชื่อมโยงสองไอคอน blue arrow ไอคอนจะปรากฏขึ้นเมื่อการเชื่อมโยงข้อความ (ถ้ามี) ในผู้ใช้เลื่อนเมาส์ไปที่ไอคอน:

ตัวอย่าง

<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-rel="dialog">下载浏览器</a>
</li>
</ul>

ลอง»


บับเบิ้ลดิจิตอล

หมายเลขฟองจะใช้ในการแสดงจำนวนรายการที่เกี่ยวข้องเช่นกล่องจดหมาย:

ในการเพิ่มหมายเลขฟองใช้องค์ประกอบแบบอินไลน์เช่น <span> ตั้งค่าแอตทริบิวต์คลาส "UI-li-Count" และเพิ่มตัวเลขที่:

ตัวอย่าง

<ul data-role="listview">
<li><a href="#">收件箱<span class="ui-li-count" >25</span></a></li>
<li><a href="#">发件箱<span class="ui-li-count" >432</span></a></li>
<li><a href="#">垃圾箱<span class="ui-li-count" >7</span></a></li>
</ul>

ลอง»

หมายเหตุ: การแสดงผลที่ถูกต้องของฟองดิจิตอลที่คุณต้องแก้ไขการเขียนโปรแกรม นี้จะอธิบายในบทต่อ


ตัวอย่าง

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

รายการป๊อป
วิธีการสร้างรายชื่อของป๊อป

เปลี่ยนรายการไอคอนลิงค์เริ่มต้น
วิธีการตั้งค่ารายการไอคอนลิงค์เริ่มต้น (เริ่มต้นลูกศรขวา)

รายการป๊อปพับ
วิธีการสร้างรายการพับของป๊อป

รายการสามารถพับเก็บได้
วิธีการสร้างการแสดง / ซ่อนรายชื่อ

รูปแบบมากขึ้น
วิธีการสร้างปฏิทิน

รายการเนื้อหามือถือ jQuery
10/30