มาดูการใช้ jquery ในการ toggle เนื้อหากัน หรือ การเปิดเนื้อหาที่ซ่อนอยู่ และ สามารถกดปิดมันได้ ขำขำ ตัวอย่างตามนี้นะ
http://canewmedia.com/j/toogle.html
ต่อไปเป็นวิธีการทำ
1. สร้าง div มาก่อน 2 อัน ตามนี้ ตั่ง ID ให้กับมันด้วย ตัวแรก ผมตั่งID ว่า content นะ อีกตัว ID ชื่อ contenttoggle
2. ผมก็มาสร้าง CSS เพื่อควบคุมกล่อง DIV ที่สร้างมาตะกี้นะ โค็ต ตามด้านล่าง โค็ตของ CSS ใส่ไว้ที่ HEAD ละกันนะ
ที่ใส่ CSS ไปก็ไม่มีไรมาก ก้แค่ควบคุม ตำแหน่ง และ ขนาด ของกล่อง div แล้วก็ใส่สีให้กับมัน
3.อันดับต่อไปก็ใส่ โค็ตเรียก Jquery เข้าใช้งาน
อันนี้ก็เรียกผ่านจาก server ของ google เอานะ ใส่ไปใน ส่วน HEAD นะ
4. ใส่ ชุดคำสั่งไปก็เสร็จละ ใส่ในส่วน head เหมือนกัน
แค่นี้ก็ได้ แบบแหล่มๆๆ แล้ว ขออธิบายนิสหน่อย
#content คือการเรียก ID content มานะใช้ แต่ มัน .hide แต่เริ่มต้น คือ content จะถูกซ่อน อยู่ เมื่อเริ่มต้น
หลังจาก คลิกที่ id contenttoggle แล้วมันจะ slide ออกมาเมื่อกดอีกทีก็จะปิด หรือที่ใช้ .slideToggle นั้นเองนะ
ลองดูขำขำ หนุกๆๆ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น