Spry Collapsible Panel

ในกรณีที่เรามีข้อมูลมากๆที่จำเป็นจะต้องแสดงในหน้าเดียว การใช้ Spry Collapsible ก็เป็นทางเลือกที่น่าสนใจแบ่งการแสดงข้อมูลเป็นหัวข้อ

ขั้นตอนการใช้งาน Collapsible Panel

1. เปิดเว็บเพจที่ต้องการแทรก Collapsible ขึ้นมา จากนั้นทำการ save ให้เรียบร้อย

2. คลิกตำแหน่งที่ต้องการวาง Collapsible Panel จากนั้นคลิกที่ Spry Collapsible Panelดังรูป



3. เมื่อคลิกแล้วจะแสดงผลดังรูป


เราสามารถแก้ไขข้อความได้โดยตรงจากหน้าที่แสดงผลได้ทันที

4. เราสามารถเลือกแสดงหรือ ไม่แสดงเนื้อหาโดยการวามเมาส์เหนือหัวข้อ จะมีสัญลักษณ์รูปตาปรากฏขึ้นมา ให้เราคลิกได้



5. Property inspector เมื่อเราทำการแก้ไข Collapsible Panel จะเป็นดังรูป



มีรายละเอียดดังนี้

1. ช่องซ้ายมือบนสุด ใส่ชื่ออ้างอิง Collapsible Panel

2. Display สั่งให้แสดงหรือไม่แสดงเนื้อหา

3. Default Stat สั่งให้แสดงผลเนื้อหาเมื่อโหลดหน้าเว็บเพจเสร็จ หรือไม่แสดงเนื้อหา

4. Enable animation เมื่อเลือกช่องนี้การแสดงผลปิดเปิดเนื้อหาจะทำได้นุ่มนวลขึ้น

6.เราสามารถกำหนดรูปแบบที่ใช้แสดงผลของ navigation ได้โดยไปที่ CSS panel ทางขวามือ จะมีรายการแสดงดังรูป



7.เมื่อแสดงผลผ่าน Browser จะเป็นดังภาพ

author
นันทวัฒน์ ไชยรัตน์

สวัสดีครับผมเป็นโปรแกรมเมอร์ที่ทำงานมาหลายที่ เปลี่ยนมาหลายสายงานครับเลยพอจะมีประสพการณ์มาเขียนบทความหลายๆเรื่องครับ ผมชอบลองทำอะไรใหม่ๆครับบางครั้งลองไปก็ลืมเลยต้องหาที่จดครับ เลยมาขอจดไว้ที่เว็บนี้ครับ