jQuery Mobileสามารถพับเก็บได้

บล็อก Content พับ

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

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

ตัวอย่าง

<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>

ลองตัวเอง»

โดยค่าเริ่มต้นเนื้อหาถูกปิด เพื่อขยายเนื้อหาเมื่อโหลดหน้าเว็บให้ใช้ data-collapsed="false" :

ตัวอย่าง

<div data-role="collapsible" data-collapsed="false" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm now expanded by default.</p>
</div>

ลองตัวเอง»

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

บล็อกเนื้อหาพับสามารถซ้อนกัน (พับภายในพับ):

ตัวอย่าง

<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
<div data-role="collapsible" >
<h1>Click me - I'm a nested collapsible block!</h1>
<p>I'm the expanded content in the nested collapsible block.</p>
</div>
</div>

ลองตัวเอง»

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

ชุดพับ

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

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

ตัวอย่าง

<div data-role="collapsibleset" >
<div data-role="collapsible">
    <h1>Click me - I'm collapsible!</h1>
    <p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
    <h1>Click me - I'm collapsible!</h1>
    <p>I'm the expanded content.</p>
</div>
</div>

ลองตัวเอง»