ตัวอย่างนี้แนะนำแอปพลิเคชันของการใช้แท็บ ปลั๊กอินนี้ค่อนข้างง่าย เนื้อหาเฉพาะมีดังนี้
ไฟล์ซอร์สโค้ด:
tab.js
หลักการดำเนินการ:
1. เมื่อคลิกองค์ประกอบก่อนอื่นให้ยกเลิกองค์ประกอบที่ไฮไลต์เดิม
2. จากนั้นเน้นองค์ประกอบที่คลิก
3. หากคลิกองค์ประกอบเป็นตัวเลือกในกล่องดรอปดาวน์ให้เลือกตัวเองและเลือกกล่องดรอปดาวน์
5. หากมีการกำหนดภาพเคลื่อนไหวให้ดำเนินการภาพเคลื่อนไหวก่อนแล้วจึงโทรกลับ
การวิเคราะห์ซอร์สโค้ด:
1. วิธีการแสดงจะถูกเรียกใช้เมื่อมีการคลิกองค์ประกอบซึ่งจะเรียกเหตุการณ์สี่เหตุการณ์ต่อไปนี้
1.1. hiden.bs.tab: ซ่อนองค์ประกอบก่อนหน้า
1.2. show.bs.tab: แสดงองค์ประกอบปัจจุบัน
1.3. hideen.bs.tab: เสร็จสิ้นโดยซ่อนองค์ประกอบก่อนหน้า
1.4. แสดง. bs.tab: แสดงองค์ประกอบปัจจุบันเสร็จสมบูรณ์
1.5. HIDEN/แสดงซอร์สโค้ดเหตุการณ์:
var $ previous = $ ul.find ('. active: สุดท้าย') var hideEvent = $ .EVENT ('hide.bs.tab', {เกี่ยวข้องกับเป้าหมาย: $ this [0]}) var showevent = $. event ('show.bs.tab'2. ใช้งาน: เปิดใช้งานวัตถุปัจจุบัน
2.1. เพิ่มแอตทริบิวต์ Aria ที่ขยายไปยังองค์ประกอบการนำทางเพื่อทำเครื่องหมายว่าองค์ประกอบนี้อยู่ในสถานะขยาย
2.2. การใช้กลไก Reflow ใช้แอตทริบิวต์ OffsetWidth เพื่อให้ได้การทาสีบางส่วน
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
บทเรียนชุดนี้ได้รวบรวมไว้ใน: Bootstrap พื้นฐานการสอนหัวข้อพิเศษยินดีต้อนรับสู่การคลิกเพื่อเรียนรู้
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript