Bootstrap Basic tut 4: Vấn đề về JavaScript

By DragonKnightMT Last updated Th11 11, 2021

(https://getbootstrap.com/docs/5.0/getting-started/javascript/)

JavaScript

Mang Bootstrap vào cuộc sống với các plugin JavaScript tùy chọn của chúng tôi. Tìm hiểu về từng plugin, dữ liệu và các tùy chọn API có lập trình của chúng tôi, v.v.Ưu đãi trong thời gian có hạn: Nhận 10 hình ảnh Adobe Stock miễn phí.quảng cáo qua CarbonTrên trang này

Cá nhân hoặc tổng hợp

Các plugin có thể được bao gồm riêng lẻ (sử dụng Bootstrap riêng lẻ js/dist/*.js), hoặc sử dụng tất cả cùng một lúc bootstrap.jshoặc được rút gọn bootstrap.min.js(không bao gồm cả hai).

Nếu bạn sử dụng một gói (Webpack, Rollup…), bạn có thể sử dụng /js/dist/*.jscác tệp đã sẵn sàng cho UMD.

Sử dụng Bootstrap làm mô-đun

Chúng tôi cung cấp phiên bản Bootstrap được xây dựng dưới dạng ESM( bootstrap.esm.jsvà bootstrap.esm.min.js) cho phép bạn sử dụng Bootstrap làm mô-đun trong trình duyệt của mình, nếu các trình duyệt được nhắm mục tiêu của bạn hỗ trợ nó .Sao chép

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

Các plugin không tương thích

Do các giới hạn của trình duyệt, một số plugin của chúng tôi, cụ thể là các plugin Dropdown, Tooltip và Popover, không thể được sử dụng trong <script>thẻ có moduleloại vì chúng phụ thuộc vào Popper. Để biết thêm thông tin về vấn đề xem tại đây .

Sự phụ thuộc

Một số plugin và thành phần CSS phụ thuộc vào các plugin khác. Nếu bạn bao gồm các plugin riêng lẻ, hãy đảm bảo kiểm tra các phần phụ thuộc này trong tài liệu.

Trình đơn thả xuống, cửa sổ bật lên và chú giải công cụ của chúng tôi cũng phụ thuộc vào Popper .

Bạn vẫn muốn sử dụng jQuery? Nó có thể!

Bootstrap 5 được thiết kế để sử dụng mà không cần jQuery, nhưng vẫn có thể sử dụng các thành phần của chúng tôi với jQuery. Nếu Bootstrap phát hiện jQuerytrong windowđối tượng, nó sẽ thêm tất cả các thành phần của chúng ta vào hệ thống plugin của jQuery; điều này có nghĩa là bạn sẽ có thể làm $('[data-bs-toggle="tooltip"]').tooltip()để bật chú giải công cụ. Tương tự với các thành phần khác của chúng ta.

Thuộc tính dữ liệu

Gần như tất cả các plugin Bootstrap đều có thể được kích hoạt và định cấu hình chỉ thông qua HTML với các thuộc tính dữ liệu (cách ưa thích của chúng tôi khi sử dụng chức năng JavaScript). Đảm bảo chỉ sử dụng một tập hợp các thuộc tính dữ liệu trên một phần tử (ví dụ: bạn không thể kích hoạt chú giải công cụ và phương thức từ cùng một nút.)

Bộ chọn

Hiện tại để truy vấn các phần tử DOM, chúng tôi sử dụng các phương pháp gốc querySelectorvà querySelectorAllvì lý do hiệu suất, vì vậy bạn phải sử dụng các bộ chọn hợp lệ . Ví dụ: nếu bạn sử dụng các bộ chọn đặc biệt: collapse:Examplehãy đảm bảo thoát khỏi chúng.

Sự kiện

Bootstrap cung cấp các sự kiện tùy chỉnh cho hầu hết các hành động độc đáo của plugin. Nói chung, chúng có dạng phân từ nguyên thể và quá khứ – trong đó nguyên thể (ví dụ show) được kích hoạt khi bắt đầu một sự kiện và dạng phân từ trong quá khứ của nó (ví dụ shown) được kích hoạt khi hoàn thành một hành động.

Tất cả các sự kiện vô tận đều cung cấp preventDefault()chức năng. Điều này cung cấp khả năng dừng thực hiện một hành động trước khi nó bắt đầu. Trả về false từ trình xử lý sự kiện cũng sẽ tự động gọi preventDefault().Sao chép

var myModal = document.getElementById('myModal')

myModal.addEventListener('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

sự kiện jQuery

Bootstrap sẽ phát hiện jQuery nếu jQuerycó trong windowđối tượng và không có data-bs-no-jquerythuộc tính nào được đặt trên <body>. Nếu jQuery được tìm thấy, Bootstrap sẽ phát ra các sự kiện nhờ hệ thống sự kiện của jQuery. Vì vậy, nếu bạn muốn nghe các sự kiện của Bootstrap, bạn sẽ phải sử dụng các phương thức jQuery ( .on, .one) thay vì addEventListener.Sao chép

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

API có lập trình

Tất cả các hàm tạo đều chấp nhận một đối tượng tùy chọn tùy chọn hoặc không có gì (khởi tạo một plugin với hành vi mặc định của nó):Sao chép

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

Nếu bạn muốn nhận một phiên bản plugin cụ thể, mỗi plugin sẽ hiển thị một getInstancephương pháp. Để lấy trực tiếp từ một phần tử, làm như sau: bootstrap.Popover.getInstance(myPopoverEl).

Bộ chọn CSS trong trình tạo

Bạn cũng có thể sử dụng bộ chọn CSS làm đối số đầu tiên thay vì phần tử DOM để khởi tạo plugin. Hiện tại, phần tử của plugin được tìm thấy bằng querySelectorphương pháp này vì các plugin của chúng tôi chỉ hỗ trợ một phần tử duy nhất.Sao chép

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

Các chức năng và chuyển tiếp không đồng bộ

Tất cả các phương thức API có lập trình là không đồng bộ và trở lại trình gọi khi quá trình chuyển đổi được bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc .

Để thực hiện một hành động sau khi quá trình chuyển đổi hoàn tất, bạn có thể lắng nghe sự kiện tương ứng.Sao chép

var myCollapseEl = document.getElementById('myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

Ngoài ra, một lệnh gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua .Sao chép

var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', function (event) {
  carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

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

Thiết lập mặc định

Bạn có thể thay đổi cài đặt mặc định cho plugin bằng cách sửa đổi Constructor.Defaultđối tượng của plugin :Sao chép

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

Không có xung đột (chỉ khi bạn sử dụng jQuery)

Đôi khi cần sử dụng các plugin Bootstrap với các khung giao diện người dùng khác. Trong những trường hợp này, đôi khi có thể xảy ra xung đột không gian tên. Nếu điều này xảy ra, bạn có thể gọi .noConflictplugin mà bạn muốn hoàn nguyên giá trị.Sao chép

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

Số phiên bản

Phiên bản của mỗi plugin Bootstrap có thể được truy cập thông qua thuộc VERSIONtính của hàm tạo của plugin. Ví dụ: đối với plugin chú giải công cụ:Sao chép

bootstrap.Tooltip.VERSION // => "5.0.2"

Không có dự phòng đặc biệt khi JavaScript bị tắt

Các plugin của Bootstrap không hoạt động trở lại một cách đặc biệt duyên dáng khi JavaScript bị tắt. Nếu bạn quan tâm đến trải nghiệm người dùng trong trường hợp này, hãy sử dụng <noscript>để giải thích tình huống (và cách bật lại JavaScript) cho người dùng của bạn và / hoặc thêm các dự phòng tùy chỉnh của riêng bạn.

Thư viện bên thứ ba

Bootstrap không chính thức hỗ trợ các thư viện JavaScript của bên thứ ba như Prototype hoặc jQuery UI. Bất chấp .noConflictvà các sự kiện không gian tên, có thể có các vấn đề tương thích mà bạn cần tự khắc phục.

Chất tẩy rửa

Chú giải công cụ và Cửa sổ bật lên sử dụng trình khử trùng tích hợp của chúng tôi để khử trùng các tùy chọn chấp nhận HTML.

allowListGiá trị mặc định như sau:Sao chép

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultAllowlist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'srcset', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Nếu bạn muốn thêm các giá trị mới vào mặc định này, allowListbạn có thể làm như sau:Sao chép

var myDefaultAllowList = bootstrap.Tooltip.Default.allowList

// To allow table elements
myDefaultAllowList.table = []

// To allow td elements and data-bs-option attributes on td elements
myDefaultAllowList.td = ['data-bs-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)

Nếu bạn muốn bỏ qua trình khử trùng của chúng tôi vì bạn thích sử dụng một thư viện chuyên dụng, chẳng hạn như DOMPurify , bạn nên làm như sau:Sao chép

var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})