3.4 Content Formatting
c. Collapsible content
1 Collapsible Basics
การสร้าง collapsible block ของเนื้อหาทำได้โดยสร้างพื้นที่ และเพิ่ม attribute ที่ชื่อว่า data-role="collapsible" และสร้างธีมโดยใช้ attribute : data-content-theme สามารถดู attribute ที่เพิ่มลงใน collapsibles ได้เพิ่มเติมใน data- attribute reference
ภายในพื้นที่นั้น สามารถเพิ่ม headerต่างๆ (H1-H6) หรือ legend element ได้ โดยสไตล์ของ header จะทำให้ปุ่มดูเหมือนว่าสามารถคลิกได้ และเพิ่มไอคอน "+" ในด้านซ้ายเพื่อเป็นการบ่งชี้และการเพิ่มมาร์กอัป HTML ที่ต้องการให้พับได้ต่อจากheader โดย frameworkจะครอบพื้นที่มาร์กอัป
นั้นให้สามารถซ่อนหรือแสดง เมื่อถูกคลิกได้
I'm a header
I'm the collapsible content. By default I'm closed, but you can click the header to open me.
Expanding collapsibles on load
เพิ่มเนื้อหาเมื่อมีการโหลดเพจ โดยการเพิ่ม attribute : data-collapsed="false"
CD ไฟล์: Expanding collapsibles on load.htmlI'm a header
I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.
Non-inset collapsibles
ค่าเริ่มต้นของ collapsible จะทำให้ข้อมูลมีความกว้างเต็มหน้าจอโดยเพิ่ม attribute: data-inset="false"
CD ไฟล์: Non-inset collapsible.htmlI'm a header
I'm the collapsible content.
Mini collapsibles
สำหรับรุ่นที่มีขนาดกะทัดรัดมากขึ้นจะเป็นประโยชน์ใน toolbars และ tight spaces โดยเพิ่ม attribute: data-mini="true"
CD ไฟล์: Mini collapsibles.htmlI'm a mini header
I'm the collapsible content.
Custom icons
ไอคอนเริ่มต้นของ collapsible headingsสามารถแทนที่โดยใช้ attributes ที่ชื่อว่า data-collapsed-icon และ data-expanded-icon เช่นกำหนด data-collapsed-icon="arrow-r" และ data-expanded-icon="arrow-d"
CD ไฟล์: Custom icons.htmlI have custom icons
data-collapsed-icon="arrow-r"
and data-expanded-icon="arrow-d"
Icon positioning
ตำแหน่งค่าเริ่มต้นของไอคอนสามารถแทนที่โดยใช้ attribute : data-iconpos
CD ไฟล์: Icon positioning.htmlI'm a header
data-iconpos="right"
Theming collapsible content
หากต้องการเชื่อมต่อระหว่าง header กับเนื้อหา โดยเพิ่ม attribute: data-content-theme และระบุตัวอักษรแถบธีม ซึ่งวิธีนี้เป็นการใช้ border และ flat background colorที่ไม่มี gradient ภายใน block ของเนื้อหา โดยย้ายมุมโค้งของปุ่มใน header และไปครอบblockของเนื้อหาเพื่อจัดกลุ่มข้อมูล
CD ไฟล์: Theming collapsible content.htmlHeader
I'm the collapsible content with a themed content block set to "c".
Theming collapsible headers
การกำหนดธีมให้กับปุ่ม collapsible ในheader สามารถทำได้โดยเพิ่ม attributeที่ชื่อว่า data-theme และระบุตัวอักษรแถบธีม
CD ไฟล์: Theming collapsible headers.htmlHeader swatch A
I'm the collapsible content with a themed content block set to "a".
Header swatch B
I'm the collapsible content with a themed content block set to "d".
Nested Collapsibles
Collapsibles สามารถซ่อนอยู่ภายในของแต่ละระดับได้
CD ไฟล์: Nested Collapsibles.htmlI'm a header
I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.
I'm a nested collapsible with a child collapsible
I'm a child collapsible.
Nested inside again.
Three levels deep now.
Section 3: Form elements
Collapsible sets (accordions)
มีความเป็นไปได้ที่จะรวมหลาย collapsibles จัดกลุ่มเข้าไว้ด้วยกันเป็นชุด โดย่ทำหน้าที่เหมือนaccordion widget.