JavaScript

ทำให้ Bootstrap มีชีวิตชีวาด้วยปลั๊กอิน JavaScript เสริมของเราที่สร้างขึ้นบน jQuery เรียนรู้เกี่ยวกับปลั๊กอินแต่ละตัว ข้อมูลและตัวเลือก API แบบเป็นโปรแกรมของเรา และอื่นๆ

บุคคลหรือรวบรวม

ปลั๊กอินสามารถรวมเป็นรายบุคคลได้ (โดยใช้บุคคลของ Bootstrap js/dist/*.js) หรือรวมเข้าด้วยกันโดยใช้bootstrap.jsหรือย่อขนาดbootstrap.min.js(ไม่รวมทั้งสองอย่าง)

หากคุณใช้บันเดิล (Webpack, Rollup…) คุณสามารถใช้/js/dist/*.jsไฟล์ที่พร้อม UMD ได้

การพึ่งพา

ปลั๊กอินและส่วนประกอบ CSS บางตัวขึ้นอยู่กับปลั๊กอินอื่นๆ หากคุณรวมปลั๊กอินแต่ละรายการ ตรวจสอบให้แน่ใจว่าได้ตรวจสอบการขึ้นต่อกันเหล่านี้ในเอกสาร โปรดทราบว่าปลั๊กอินทั้งหมดขึ้นอยู่กับ jQuery (ซึ่งหมายความว่าจะต้องรวม jQuery ก่อนไฟล์ปลั๊กอิน) ปรึกษาเราpackage.jsonเพื่อดูว่ารองรับ jQuery เวอร์ชันใด

ดรอปดาวน์ ป๊อปโอเวอร์ และคำแนะนำเครื่องมือของเรายังขึ้นอยู่กับPopper.js

แอตทริบิวต์ข้อมูล

ปลั๊กอิน Bootstrap เกือบทั้งหมดสามารถเปิดใช้งานและกำหนดค่าผ่าน HTML เพียงอย่างเดียวด้วยแอตทริบิวต์ข้อมูล (วิธีที่เราต้องการในการใช้ฟังก์ชัน JavaScript) ตรวจสอบให้แน่ใจว่าใช้แอตทริบิวต์ข้อมูลเพียงชุดเดียวในองค์ประกอบเดียว (เช่น คุณไม่สามารถเรียกใช้คำแนะนำเครื่องมือและโมดอลจากปุ่มเดียวกันได้)

อย่างไรก็ตาม ในบางสถานการณ์อาจต้องการปิดใช้งานฟังก์ชันนี้ หากต้องการปิดใช้งาน API แอตทริบิวต์ข้อมูล ให้ยกเลิกการเชื่อมโยงเหตุการณ์ทั้งหมดในเอกสารเนมสเปซdata-apiดังนี้:

$(document).off('.data-api')

อีกวิธีหนึ่งในการกำหนดเป้าหมายปลั๊กอินเฉพาะ ให้รวมชื่อของปลั๊กอินเป็นเนมสเปซพร้อมกับเนมสเปซ data-api ดังนี้:

$(document).off('.alert.data-api')

เหตุการณ์

Bootstrap จัดเตรียมเหตุการณ์ที่กำหนดเองสำหรับการกระทำเฉพาะของปลั๊กอินส่วนใหญ่ โดยทั่วไป สิ่งเหล่านี้มาในรูปแบบกริยาแบบ infinitive และ past participle โดยที่ infinitive (เช่นshow) จะถูกทริกเกอร์เมื่อเริ่มต้นเหตุการณ์ และรูปแบบกริยาที่ผ่านมา (ex. shown) จะถูกทริกเกอร์เมื่อการดำเนินการเสร็จสิ้น

เหตุการณ์ infinitive ทั้งหมดมีpreventDefault()ฟังก์ชันการทำงาน สิ่งนี้ทำให้สามารถหยุดการดำเนินการก่อนที่จะเริ่ม การคืน ค่าเท็จจากตัวจัดการเหตุการณ์จะเรียกโดยอัตโนมัติpreventDefault()ด้วย

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

API แบบเป็นโปรแกรม

เรายังเชื่อว่าคุณควรจะสามารถใช้ปลั๊กอิน Bootstrap ทั้งหมดผ่าน JavaScript API ได้อย่างหมดจด API สาธารณะทั้งหมดเป็นเมธอดเดียวที่เชื่อมต่อได้ และส่งคืนคอลเล็กชันที่ดำเนินการ

$('.btn.danger').button('toggle').addClass('fat')

เมธอดทั้งหมดควรยอมรับอ็อบเจ็กต์ตัวเลือกที่เป็นตัวเลือก สตริงที่กำหนดเป้าหมายเมธอดเฉพาะ หรือไม่มีเลย (ซึ่งเริ่มต้นปลั๊กอินด้วยการทำงานเริ่มต้น):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

ปลั๊กอินแต่ละตัวยังเปิดเผยคอนสตรัคเตอร์ดิบใน พร็อพเพ อร์Constructorตี้: $.fn.popover.Constructorหากคุณต้องการรับอินสแตนซ์ของปลั๊กอินบางตัว ให้ดึงข้อมูลโดยตรงจากองค์ประกอบ$('[rel="popover"]').data('popover'):

ฟังก์ชันและการเปลี่ยนแบบอะซิงโครนัส

เมธอด API แบบเป็นโปรแกรมทั้งหมดเป็นแบบอะซิงโครนัสและกลับไปยังผู้เรียกเมื่อการเปลี่ยนแปลงเริ่มต้น แต่ ก่อน ที่จะสิ้นสุด

ในการดำเนินการเมื่อการเปลี่ยนแปลงเสร็จสิ้น คุณสามารถฟังเหตุการณ์ที่เกี่ยวข้องได้

$('#myCollapse').on('shown.bs.collapse', function (e) {
  // Action to execute once the collapsible area is expanded
})

นอกจากนี้ การเรียกเมธอดในองค์ประกอบการเปลี่ยนจะถูกละเว้น

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

การตั้งค่าเริ่มต้น

คุณสามารถเปลี่ยนการตั้งค่าเริ่มต้นสำหรับปลั๊กอินโดยแก้ไขConstructor.Defaultวัตถุของปลั๊กอิน:

$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to false

ไม่มีความขัดแย้ง

บางครั้ง จำเป็นต้องใช้ปลั๊กอิน Bootstrap กับเฟรมเวิร์ก UI อื่นๆ ในสถานการณ์เหล่านี้ การชนกันของเนมสเปซอาจเกิดขึ้นในบางครั้ง หากเกิดเหตุการณ์นี้ขึ้น คุณสามารถเรียก.noConflictใช้ปลั๊กอินที่คุณต้องการคืนค่า

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

หมายเลขเวอร์ชัน

เวอร์ชันของปลั๊กอิน jQuery ของ Bootstrap แต่ละเวอร์ชันสามารถเข้าถึงได้ผ่านVERSIONคุณสมบัติของตัวสร้างของปลั๊กอิน ตัวอย่างเช่น สำหรับปลั๊กอินคำแนะนำเครื่องมือ:

$.fn.tooltip.Constructor.VERSION // => "4.2.1"

ไม่มีทางเลือกพิเศษเมื่อปิดใช้งาน JavaScript

Bootstrap’s plugins don’t fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use <noscript> to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.

Util

All Bootstrap’s JavaScript files depend on util.js and it has to be included alongside the other JavaScript files. If you’re using the compiled (or minified) bootstrap.js, there is no need to include this—it’s already there.

util.jsรวมถึงฟังก์ชันยูทิลิตี้และตัวช่วยพื้นฐานสำหรับtransitionEndเหตุการณ์เช่นเดียวกับโปรแกรมจำลองการเปลี่ยน CSS ปลั๊กอินนี้ใช้โดยปลั๊กอินอื่นๆ เพื่อตรวจสอบการสนับสนุนการเปลี่ยน CSS และเพื่อตรวจจับการเปลี่ยนผ่านที่ค้างอยู่