JavaScript

Bawa Bootstrap pikeun hirup kalawan plugins JavaScript pilihan urang diwangun dina jQuery. Diajar ngeunaan unggal plugin, data kami sareng pilihan API programmatic, sareng seueur deui.

Individu atawa disusun

Plugins tiasa dilebetkeun masing-masing (nganggo individu Bootstrap js/dist/*.js), atanapi sadayana sakaligus nganggo bootstrap.jsatanapi anu diminified bootstrap.min.js(henteu kalebet duanana).

Upami anjeun nganggo bundler (Webpack, Rollup…), anjeun tiasa nganggo /js/dist/*.jsfile anu siap UMD.

Depéndensi

Sababaraha plugins sareng komponén CSS gumantung kana plugins séjén. Upami anjeun ngalebetkeun plugin masing-masing, pastikeun pikeun pariksa katergantungan ieu dina dokumén. Catet ogé yén sadaya plugins gumantung kana jQuery (ieu hartosna jQuery kedah kalebet sateuacan file plugin). Taroskeun kamipackage.json pikeun ningali versi jQuery mana anu dirojong.

dropdowns kami, popovers na tooltips ogé gumantung kana Popper.js .

Atribut data

Ampir kabéh plugins Bootstrap bisa diaktipkeun jeung ngonpigurasi ngaliwatan HTML nyalira kalayan atribut data (cara pikaresep urang ngagunakeun fungsionalitas JavaScript). Pastikeun ngan ukur nganggo hiji set atribut data dina hiji unsur (contona, anjeun moal tiasa memicu tooltip sareng modal tina tombol anu sami.)

Sanajan kitu, dina sababaraha kaayaan bisa jadi desirable pikeun nganonaktipkeun pungsi ieu. Pikeun nganonaktipkeun API atribut data, unbind sadaya kajadian dina dokumen namespaced data-apikawas kitu:

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

Alternatipna, pikeun nargétkeun hiji plugin husus, ngan kaasup ngaran plugin urang salaku ngaranspasi babarengan jeung data-api ngaranspasi kawas kieu:

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

Kajadian

Bootstrap nyayogikeun acara khusus pikeun kalolobaan tindakan unik plugins. Sacara umum, ieu datangna dina bentuk participle infinitive jeung kaliwat - dimana infinitive (ex. show) dipicu dina mimiti hiji acara, sarta formulir participle kaliwat na (ex. shown) dipicu nalika parantosan hiji aksi.

Kabéh acara infinitive nyadiakeun preventDefault()fungsionalitas. Ieu nyadiakeun kamampuhan pikeun ngeureunkeun palaksanaan hiji aksi saméméh dimimitian. Balik palsu ti pawang acara ogé bakal otomatis nelepon preventDefault().

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

Programmatic API

Kami ogé yakin yén anjeun kedah tiasa nganggo sadayana plugins Bootstrap murni ngalangkungan API JavaScript. Kabéh API umum anu tunggal, métode chainable, sarta balik kempelan acted kana.

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

Sadaya metode kedah nampi pilihan obyék pilihan, senar anu nargétkeun metodeu khusus, atanapi henteu nanaon (anu ngamimitian plugin kalayan paripolah standar):

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

Unggal plugin ogé ngungkabkeun konstruktor atah na dina Constructorharta $.fn.popover.Constructor:. Upami anjeun hoyong kéngingkeun conto plugin khusus, cokot deui langsung tina unsur: $('[rel="popover"]').data('popover').

Fungsi Asynchronous jeung transisi

Sadaya metodeu API programmatic henteu sinkron sareng uih deui ka panelepon saatos transisi dimimitian tapi sateuacan réngsé .

Pikeun ngaéksekusi tindakan saatos transisi parantos réngsé, anjeun tiasa ngadangukeun acara anu saluyu.

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

Sajaba ti éta, panggero metoda dina komponén transisi bakal dipaliré .

$('#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 !!

Setélan standar

Anjeun tiasa ngarobih setélan standar pikeun plugin ku ngarobih Constructor.Defaultobyék plugin:

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

Taya konflik

Kadang-kadang perlu ngagunakeun plugins Bootstrap sareng kerangka UI anu sanés. Dina kaayaan ieu, tabrakan ngaranspasi kadang bisa lumangsung. Upami ieu kajantenan, anjeun tiasa nelepon .noConflictkana plugin anu anjeun hoyong balikkeun nilaina.

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

angka Vérsi

Versi masing-masing plugins jQuery Bootstrap tiasa diaksés via VERSIONhak milik konstruktor plugin. Contona, pikeun plugin tooltip:

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

Taya fallbacks husus nalika JavaScript ditumpurkeun

Plugin Bootstrap henteu mundur sacara khusus nalika JavaScript ditumpurkeun. Upami anjeun paduli kana pangalaman pangguna dina hal ieu, paké <noscript>pikeun ngajelaskeun kaayaan (sareng kumaha cara ngaktipkeun deui JavaScript) ka pangguna anjeun, sareng / atanapi tambahkeun fallbacks adat anjeun sorangan.

Util

Sadaya file JavaScript Bootstrap gumantung util.jssareng éta kedah kalebet sareng file JavaScript anu sanés. Upami anjeun nganggo kompilasi (atanapi minified) bootstrap.js, teu kedah kalebet ieu-éta parantos aya.

util.jsngawengku fungsi utiliti sarta asisten dasar pikeun transitionEndacara ogé émulator transisi CSS. Éta dianggo ku plugins anu sanés pikeun mariksa dukungan transisi CSS sareng nangkep transisi gantung.

Sanitizer

Tooltips sareng Popovers nganggo sanitizer anu diwangun pikeun ngabersihan pilihan anu nampi HTML.

Nilai standar whiteListnyaéta kieu:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // 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', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Upami anjeun hoyong nambihan nilai anyar kana standar ieu whiteListanjeun tiasa ngalakukeun ieu:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

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

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-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-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Upami anjeun hoyong ngalangkungan sanitizer kami sabab anjeun langkung resep ngagunakeun perpustakaan khusus, contona DOMPurify , anjeun kedah ngalakukeun ieu:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})