บทความนี้แนะนำการใช้โมดูลดรอปดาวน์ Bootstrap สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
1. การวิเคราะห์ซอร์สโค้ด:
dropdowns.scss: โมดูลกล่องดรอปดาวน์
JavaScripts/bootstrap/dropdown.js: ใช้การตอบกลับกล่องแบบเลื่อนลง
2. ฟังก์ชั่นและหลักการ:
ดึงแท็บฟังก์ชันการแสดงรายการที่เลือกไม่สามารถรับรู้ได้โดยค่าเริ่มต้น
หลักการ:
1. ใช้คลาสดรอปดาวน์เป็นจุดยึดแล้วปล่อยให้รายชื่อเด็กดรอปดาวน์เมนูวางตำแหน่งอย่างแน่นอน คุณต้องเพิ่มจุดคลิกเป็นการตั้งค่า data-toggle = "ดรอปดาวน์" เพื่อสร้างความสัมพันธ์
2. ต้องการการสนับสนุนจากปลั๊กอิน JS
3. การวิเคราะห์รหัสต้นฉบับ:
1. Caret: ใช้สามเหลี่ยมลงโดยใช้พรมแดนเพื่อใช้งาน
1.1. สีเส้นขอบคือสีตัวอักษรตามค่าเริ่มต้น
1.2. การใช้สามเหลี่ยม: เส้นขอบจะต้องมีความกว้างและจากนั้นด้านที่อยู่ติดกันจะต้องมีความกว้าง แต่สีมีความโปร่งใส ในที่สุดองค์ประกอบจะต้องเป็นองค์ประกอบบล็อกในแถวเพื่อสร้างความสูงและความกว้าง 0
1.3. รหัสมีดังนี้
การคัดลอกรหัสมีดังนี้: <span style = "ชายแดนซ้าย: 4px solid; border-top: 4px transparent ของแข็ง; ขอบล่าง: 4px transparent ของแข็ง; ความสูง: 0px; ความกว้าง: 0px; จุดสูง: ปกติ; แสดง: inline-block;"
2. ประเภทการฟังของเหตุการณ์การคลิกถูกผูกไว้กับเอกสารและประเภทการฟังคือ data-toggle = "ดรอปดาวน์"
3. ฟังก์ชั่นปลั๊กอินที่เขียนโดยปลั๊กอิน JS และตัวสร้างคลาสจะใช้เรียกปลั๊กอินโดยใช้วิธี JS
4. โหมด data-* เรียกปลั๊กอินซึ่งใช้ในการฉีดเหตุการณ์ลงในเอกสารรหัสมีดังนี้:
$ (เอกสาร) .on ('click.bs.dropdown.data-api', Clearmenus) .on ('click.bs.dropdown.data-api', '. แบบฟอร์ม Dropdown', ฟังก์ชั่น (e) {e.stoppropagation ()}) dropdown.prototype.toggle) .on ('keydown.bs.dropdown.data-api', สลับ, dropdown.prototype.keydown) .on ('keydown.bs.dropdown.data-api'รหัสเรียกวิธีการที่กำหนดโดยดรอปดาวน์โดยตรง การออกแบบที่ยอดเยี่ยมที่นี่อยู่ในเฟรมเวิร์กปลั๊กอินการโทรของโหมด data-* และการโทรของโหมดปลั๊กอิน JS ในขณะที่โหมดการโทรทั้งสองนี้ใช้รหัสเดียวกัน
5. ถ้าคุณเรียกมันด้วยปลั๊กอิน JS คุณต้องโทรหาวิธีพื้นฐานด้วยตัวเอง เฉพาะเหตุการณ์สลับเท่านั้นที่จะถูกผูกไว้เมื่อสร้างอินสแตนซ์
var dropdown = function (องค์ประกอบ) {$ (องค์ประกอบ) .on ('click.bs.dropdown', this.toggle)}6. ClearMenu: มีเพียงองค์ประกอบของ data-toggle = "dropdown"
7. Dropdown-BackDrop: ใช้เพื่อย้ายการประมวลผลของไม่มีการคลิกเหตุการณ์
8. Keydown: เมื่อปุ่มดรอปดาวน์ได้รับโฟกัสให้กดปุ่มเพื่อขยายและกดปุ่มบนเพื่อหดตัว
9. Data-Target และ HERF = "#ID": เพื่อให้ได้การคลิกขยายรายการดรอปดาวน์ที่ระบุ ค่าเริ่มต้นคือการขยายโหนดพี่น้องที่อยู่ด้านหลังปุ่ม:
<ul> <li> <a> ดัชนี </a> </li> <li> <a> Zhenglu </a> </li> <li> <a data-toggle = "dropdown" href = "#name"> เครื่องมือผู้ใช้ </a> </li>
10. ใช้เมนูย่อยป๊อปอัพและใช้ด้านล่าง: 100% (การวางตำแหน่งของเมนูย่อยป๊อปอัพด้านล่าง) เพื่อนำไปใช้งาน
11. ตัวอย่างแอปพลิเคชัน
<div id = "dropdown"> <a id = "dropdown-btn" data-target = "#dropdown"> number </a> <ul> <li> <a> 3343 </a> </li> <li> <a> 555 </a> </li>
หากคุณยังต้องการเรียนรู้อย่างลึก
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript