JavaScript
ทำให้ Bootstrap มีชีวิตชีวาด้วยปลั๊กอิน JavaScript เสริมของเราที่สร้างขึ้นบน jQuery เรียนรู้เกี่ยวกับปลั๊กอินแต่ละตัว ข้อมูลและตัวเลือก API แบบเป็นโปรแกรมของเรา และอื่นๆ
สามารถรวมปลั๊กอินแยกกันได้ (โดยใช้ไฟล์แต่ละ*.js
ไฟล์ของ Bootstrap) หรือรวมเข้าด้วยกันโดยใช้bootstrap.js
หรือย่อขนาดbootstrap.min.js
(ไม่รวมทั้งสองอย่าง)
ปลั๊กอินและส่วนประกอบ CSS บางตัวขึ้นอยู่กับปลั๊กอินอื่นๆ หากคุณรวมปลั๊กอินแต่ละรายการ ตรวจสอบให้แน่ใจว่าได้ตรวจสอบการขึ้นต่อกันเหล่านี้ในเอกสาร โปรดทราบว่าปลั๊กอินทั้งหมดขึ้นอยู่กับ jQuery (ซึ่งหมายความว่าจะต้องรวม jQuery ก่อนไฟล์ปลั๊กอิน) ปรึกษาเราpackage.json
เพื่อดูว่ารองรับ jQuery เวอร์ชันใด
ดรอปดาวน์ ป๊อปโอเวอร์ และคำแนะนำเครื่องมือของเรายังขึ้นอยู่กับPopper.js
ปลั๊กอิน Bootstrap เกือบทั้งหมดสามารถเปิดใช้งานและกำหนดค่าผ่าน HTML เพียงอย่างเดียวด้วยแอตทริบิวต์ข้อมูล (วิธีที่เราต้องการในการใช้ฟังก์ชัน JavaScript) ตรวจสอบให้แน่ใจว่าใช้แอตทริบิวต์ข้อมูลเพียงชุดเดียวในองค์ประกอบเดียว (เช่น คุณไม่สามารถเรียกใช้คำแนะนำเครื่องมือและโมดอลจากปุ่มเดียวกันได้)
อย่างไรก็ตาม ในบางสถานการณ์อาจต้องการปิดใช้งานฟังก์ชันนี้ หากต้องการปิดใช้งาน API แอตทริบิวต์ข้อมูล ให้ยกเลิกการเชื่อมโยงเหตุการณ์ทั้งหมดในเอกสารเนมสเปซdata-api
ดังนี้:
อีกวิธีหนึ่งในการกำหนดเป้าหมายปลั๊กอินเฉพาะ ให้รวมชื่อของปลั๊กอินเป็นเนมสเปซพร้อมกับเนมสเปซ data-api ดังนี้:
Bootstrap จัดเตรียมเหตุการณ์ที่กำหนดเองสำหรับการกระทำเฉพาะของปลั๊กอินส่วนใหญ่ โดยทั่วไป สิ่งเหล่านี้มาในรูปแบบกริยาแบบ infinitive และ past participle โดยที่ infinitive (เช่นshow
) จะถูกทริกเกอร์เมื่อเริ่มต้นเหตุการณ์ และรูปแบบกริยาที่ผ่านมา (ex. shown
) จะถูกทริกเกอร์เมื่อการดำเนินการเสร็จสิ้น
เหตุการณ์ infinitive ทั้งหมดมีpreventDefault()
ฟังก์ชันการทำงาน สิ่งนี้ทำให้สามารถหยุดการดำเนินการก่อนที่จะเริ่ม การคืน ค่าเท็จจากตัวจัดการเหตุการณ์จะเรียกโดยอัตโนมัติpreventDefault()
ด้วย
เรายังเชื่อว่าคุณควรจะสามารถใช้ปลั๊กอิน Bootstrap ทั้งหมดผ่าน JavaScript API ได้อย่างหมดจด API สาธารณะทั้งหมดเป็นเมธอดเดียวที่เชื่อมต่อได้ และส่งคืนคอลเล็กชันที่ดำเนินการ
เมธอดทั้งหมดควรยอมรับอ็อบเจกต์ตัวเลือกเสริม สตริงที่กำหนดเป้าหมายเมธอดเฉพาะ หรือไม่มีเลย (ซึ่งเริ่มต้นปลั๊กอินด้วยการทำงานเริ่มต้น):
ปลั๊กอินแต่ละตัวยังเปิดเผยคอนสตรัคเตอร์ดิบใน พร็อพเพ อร์Constructor
ตี้: $.fn.popover.Constructor
หากคุณต้องการรับอินสแตนซ์ปลั๊กอินบางตัว ให้ดึงข้อมูลโดยตรงจากองค์ประกอบ$('[rel="popover"]').data('popover')
:
เมธอด API แบบเป็นโปรแกรมทั้งหมดเป็นแบบอะซิงโครนัสและจะกลับไปยังผู้เรียกเมื่อการเปลี่ยนแปลงเริ่มต้น แต่ ก่อน ที่จะสิ้นสุด
ในการดำเนินการเมื่อการเปลี่ยนแปลงเสร็จสิ้น คุณสามารถฟังเหตุการณ์ที่เกี่ยวข้องได้
นอกจากนี้ การเรียกเมธอดในองค์ประกอบการเปลี่ยนจะถูกละเว้น
คุณสามารถเปลี่ยนการตั้งค่าเริ่มต้นสำหรับปลั๊กอินโดยแก้ไขConstructor.Default
วัตถุของปลั๊กอิน:
บางครั้ง จำเป็นต้องใช้ปลั๊กอิน Bootstrap กับเฟรมเวิร์ก UI อื่นๆ ในสถานการณ์เหล่านี้ การชนกันของเนมสเปซอาจเกิดขึ้นในบางครั้ง หากเกิดเหตุการณ์นี้ขึ้น คุณสามารถเรียก.noConflict
ใช้ปลั๊กอินที่คุณต้องการคืนค่า
เวอร์ชันของปลั๊กอิน jQuery ของ Bootstrap แต่ละเวอร์ชันสามารถเข้าถึงได้ผ่านVERSION
คุณสมบัติของตัวสร้างของปลั๊กอิน ตัวอย่างเช่น สำหรับปลั๊กอินคำแนะนำเครื่องมือ:
ปลั๊กอินของ Bootstrap จะไม่ถอยกลับโดยเฉพาะอย่างยิ่งเมื่อปิดการใช้งาน JavaScript หากคุณสนใจเกี่ยวกับประสบการณ์ของผู้ใช้ในกรณีนี้ ใช้<noscript>
เพื่ออธิบายสถานการณ์ (และวิธีเปิดใช้งาน JavaScript อีกครั้ง) ให้กับผู้ใช้ของคุณ และ/หรือเพิ่มทางเลือกที่คุณกำหนดเอง
ห้องสมุดบุคคลที่สาม
Bootstrap ไม่รองรับไลบรารี JavaScript ของบุคคลที่สามเช่น Prototype หรือ jQuery UI อย่างเป็นทางการ แม้ว่า.noConflict
เหตุการณ์เนมสเปซและเนมสเปซอาจมีปัญหาความเข้ากันได้ซึ่งคุณต้องแก้ไขด้วยตัวเอง
ไฟล์ JavaScript ของ Bootstrap ทั้งหมดขึ้นอยู่กับutil.js
และจะต้องรวมไว้กับไฟล์ JavaScript อื่นๆ หากคุณกำลังใช้คอมไพล์ (หรือย่อเล็กสุด) bootstrap.js
คุณไม่จำเป็นต้องรวมสิ่งนี้—มีอยู่แล้ว
util.js
รวมถึงฟังก์ชันยูทิลิตี้และตัวช่วยพื้นฐานสำหรับtransitionEnd
เหตุการณ์เช่นเดียวกับโปรแกรมจำลองการเปลี่ยน CSS ปลั๊กอินนี้ใช้โดยปลั๊กอินอื่นๆ เพื่อตรวจสอบการสนับสนุนการเปลี่ยน CSS และเพื่อตรวจจับการเปลี่ยนภาพค้าง