CSMJU 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

Section 1

Collapsible content

Section 2

Collapsible content

Section 3

Collapsible content

Theming individual sections

   สามารถจัดกลุ่มให้มีความแตกต่างกันได้โดยเพิ่ม attributes data-theme และ data-content-theme ลงใน collapsibles เฉพาะที่ต้องการ

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

Section header, swatch B

Collapsible content, swatch "b"

Section header, swatch A

Collapsible content, swatch "a"

Section header, swatch E

Collapsible content, swatch "d"