jQuery Mobile

3.4 Content Formatting

d. Collapsible set

1 Collapsible set Basics

การกำหนด Collapsible เริ่มด้วยมาร์กอัปคล้ายๆกับ individual collapsibles โดยเพิ่มattribute : data-role="collapsible-set"ซึ่ง framework จะทำให้ดูเหมือนเป็นการจับกลุ่ม และทำให้มีประพฤติเหมือนหีบเพลง สามารถดู attribute ที่เพิ่มลงใน Collapsible set ได้เพิ่มเติมใน data- attribute reference
โดยเริ่มต้น ทุกส่วนจะถูกยุบ แต่สามารถตั้งค่าให้เปิดเมื่อเพจมีการโหลดด้วยการเพิ่ม attribute: data-collapsed="false" ลงในส่วนที่ต้องการให้ขยาย

CD ไฟล์: Collapsible set.html

Section 1

I'm the collapsible set content for section 1.

Section 2

I'm the collapsible set content for section 2.

Non-inset collapsible sets

สามารถกำหนดให้มีขนาดเต็มหน้าจอและไม่มีขอบมุมได้โดยเพิ่ม attribute: data-inset="false"

CD ไฟล์: Non-inset collapsible sets.html

I'm a header

I'm the collapsible content.

I'm a header

I'm the collapsible content.

I'm a header

I'm the collapsible content.

Custom icons

สามารถแทนที่ด้วย attributes: data-collapsed-icon และ data-expanded-icon ทั้งในลำดับของ collapsible-set หรือบนพื้นฐานของแต่ละ collapsible

CD ไฟล์: Custom icons-collapsible sets.html

Section 1

Collapsible content

Section 2

Collapsible content

Section 3

Collapsible content

Icon positioning

ตำแหน่งเริ่มต้นของไอคอน สามารถแทนที่ด้วย attributes: data-iconpos ทั้งในลำดับของ collapsible-set หรือบนพื้นฐานของแต่ละ collapsible

CD ไฟล์: Icon positioning-collapsible sets.html

Section 1

Section 2

data-iconpos="left"

Section 3

data-iconpos="bottom"

Section 4

data-iconpos="top"

Theming collapsible content

สีมาตราฐาน data-theme สามารถกำหนดสีของแต่ละ collapsible ได้ โดยจะจัดกลุ่มเนื้อหาด้วย headers(H1-H6) และเพิ่ม attribute :data-content-theme ซึ่งจะเป็นการเพิ่มสีพื้นหลังและ borderของเนื้อหาลงใน collapsible หลัก

CD ไฟล์: Theming collapsible content-collapsible sets.html