Spry Tabbed Panel

แสดงผลข้อมูลแบบ Tab เป็นการแสดงผลข้อมูลที่มีประสิทธิภาพมากวิธีหนึ่ง ผู้ใช้งานสามารถเลือกหัวข้อด้านบน เนื้อหาจะถูกแสดงผลด้านล่างของหัวข้อทันที

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

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

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



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


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

4. การเลือก Tab ที่ 2 ให้นำเมาส์ไปวางเหนือ Tab ที่ 2 จะเห็นรูปตาปรากฏขึ้นมา ให้คลิกที่รูปตานั้น ก็จะสามารถแก้ Tab ที่ 2 ได้


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



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

1. ช่องซ้ายบน ใส่ชื่ออ้างอิงให้กับ Tabbed Panel

2. Panels เลือกเพิ่มหรือลบ Tab โดยคลิกที่เครื่องหมาย + และ -

3. Default Panel เลือก Tab ที่ต้องการให้แสดงผลก่อน

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



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



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

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