มือถือ jQuery พับบล็อก คืออะไร และใช้งานอย่างไร?

jQuery Mobile หลักสูตร
jQuery Mobile รายการ
jQuery Mobile ฟอร์ม
jQuery Mobile กระทู้
- jQuery Mobile กระทู้
jQuery Mobile เหตุการณ์

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

มือถือ jQuery พับบล็อก

ก่อนหน้านี้: แถบนำทางมือถือ jQuery

ถัดไป: jQuery กริดมือถือ

บล็อกเนื้อหาพับ

บล็อกพับช่วยให้คุณสามารถซ่อนหรือแสดงเนื้อหา - สำหรับการจัดเก็บส่วนหนึ่งของข้อมูลที่มีประโยชน์

ในการสร้างบล็อกเนื้อหาพับคุณจะต้องเพิ่มที่เก็บข้อมูลบทบาท = แอตทริบิวต์ "พับ" ในภาชนะ (div) ภายในเพิ่มองค์ประกอบส่วนหัว (H1-H6) ตามด้วยส่วนขยายที่คุณต้องการที่จะทำให้แท็ก:

ตัวอย่าง

<div data-role="collapsible" >
<h1>点击我 - 我可以折叠!</h1>
<p>我是可折叠的内容。</p>
</div>

ลอง»

โดยค่าเริ่มต้นเนื้อหาจะถูกพับ เพื่อขยายเนื้อหาเมื่อโหลดหน้าเว็บให้ใช้ข้อมูลทรุด = "false":

ตัวอย่าง

<div data-role="collapsible" data-collapsed="false" >
<h1>点击我 - 我可以折叠!</h1>
<p>I'm 现在我默认是展开的。</p>
</div>

ลอง»

บล็อกพับซ้อนกัน

บล็อกเนื้อหาพับสามารถซ้อนกันกับแต่ละอื่น ๆ :

ตัวอย่าง

<div data-role="collapsible" >
<h1>点击我 - 我可以折叠!</h1>
<p>我是被展开的内容。</p>
<div data-role="collapsible" >
<h1>点击我 - 我是嵌套的可折叠块！</h1>
<p>我是嵌套的可折叠块中被展开的内容。</p>
</div>
</div>

ลอง»

	บล็อกเนื้อหาพับสามารถซ้อนกันหลาย ๆ ครั้งตามความต้องการของคุณ

คอลเลกชันพับ

พับชุดบล็อกพับเป็นกลุ่มเข้าด้วยกัน (เหมือนหีบเพลง) เมื่อบล็อกใหม่จะถูกนำไปใช้ทุกบล็อกอื่น ๆ จะถูกพับ

สร้างหลายบล็อกเนื้อหาพับแล้วเนื้อหาของบล็อกล้อมรอบด้วยภาชนะพับที่มีข้อมูลบทบาทใหม่ = "พับชุด" ของ:

ตัวอย่าง

<div data-role="collapsible-set" >
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是被展开的内容。</p>
</div>
<div data-role="collapsible">
<h1>点击我 - 我可以折叠!</h1>
<p>我是被展开的内容。</p>
</div>
</div>

ลอง»