JavaScript

Mu Bootstrap wa si igbesi aye pẹlu awọn afikun JavaScript iyan wa ti a ṣe lori jQuery. Kọ ẹkọ nipa itanna kọọkan, data wa ati awọn aṣayan API ti eto, ati diẹ sii.

Olukuluku tabi akopọ

Awọn afikun le wa ni ẹyọkan (lilo Bootstrap's olukuluku js/dist/*.js), tabi gbogbo wọn ni ẹẹkan lilo bootstrap.jstabi miniified bootstrap.min.js(ko pẹlu mejeeji).

Ti o ba lo lapapo kan (Pack Web, Rollup…), o le lo /js/dist/*.jsawọn faili ti o ti ṣetan UMD.

Awọn igbẹkẹle

Diẹ ninu awọn afikun ati awọn paati CSS dale lori awọn afikun miiran. Ti o ba pẹlu awọn afikun ni ẹyọkan, rii daju lati ṣayẹwo fun awọn igbẹkẹle wọnyi ninu awọn docs. Tun ṣe akiyesi pe gbogbo awọn afikun da lori jQuery (eyi tumọ si jQuery gbọdọ wa pẹlu awọn faili itanna). Kan si wapackage.json lati rii iru awọn ẹya ti jQuery ni atilẹyin.

Awọn ifilọlẹ wa, popovers ati awọn imọran irinṣẹ tun dale lori Popper.js .

Awọn eroja data

O fẹrẹ to gbogbo awọn afikun Bootstrap ni a le mu ṣiṣẹ ati tunto nipasẹ HTML nikan pẹlu awọn abuda data (ọna ti o fẹ wa ti lilo iṣẹ ṣiṣe JavaScript). Rii daju pe o lo eto kan ti awọn abuda data lori ẹyọkan (fun apẹẹrẹ, o ko le ṣe okunfa ohun elo irinṣẹ ati modal lati bọtini kanna.)

Sibẹsibẹ, ni diẹ ninu awọn ipo o le jẹ wuni lati mu iṣẹ-ṣiṣe yii ṣiṣẹ. Lati mu awọn abuda data API kuro, yọọ gbogbo awọn iṣẹlẹ lori orukọ iwe-ipamọ pẹlu data-apibii bẹ:

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

Ni omiiran, lati fojusi ohun itanna kan pato, kan ṣafikun orukọ ohun itanna bi aaye orukọ kan pẹlu aaye orukọ data-api bii eyi:

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

Awọn iṣẹlẹ

Bootstrap n pese awọn iṣẹlẹ aṣa fun ọpọlọpọ awọn iṣe alailẹgbẹ awọn afikun. Ni gbogbogbo, iwọnyi wa ni fọọmu ailopin ati ti o ti kọja - nibiti ailopin (fun apẹẹrẹ show) ti jẹ okunfa ni ibẹrẹ iṣẹlẹ kan, ati fọọmu apakan apakan ti o kọja (fun apẹẹrẹ shown) jẹ okunfa lori ipari iṣẹ kan.

Gbogbo awọn iṣẹlẹ ailopin pese preventDefault()iṣẹ ṣiṣe. Eyi n pese agbara lati da ipaniyan ti iṣe ṣaaju ki o to bẹrẹ. Pada eke pada lati ọdọ oluṣakoso iṣẹlẹ yoo tun pe laifọwọyi preventDefault().

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

API ètò

A tun gbagbọ pe o yẹ ki o ni anfani lati lo gbogbo awọn afikun Bootstrap nikan nipasẹ JavaScript API. Gbogbo API ti gbogbo eniyan jẹ ẹyọkan, awọn ọna ẹwọn, ati da ikojọpọ ti a ṣiṣẹ lori pada.

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

Gbogbo awọn ọna yẹ ki o gba ohun aṣayan aṣayan, okun ti o fojusi ọna kan pato, tabi ohunkohun (eyiti o bẹrẹ ohun itanna kan pẹlu ihuwasi aiyipada):

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

Ohun itanna kọọkan tun ṣafihan olupilẹṣẹ aise lori ohun Constructor-ini kan $.fn.popover.Constructor:. Ti o ba fẹ lati gba apẹẹrẹ itanna kan pato, gba pada taara lati ẹya: $('[rel="popover"]').data('popover').

Awọn iṣẹ asynchronous ati awọn iyipada

Gbogbo awọn ọna API ti eto jẹ asynchronous ati pada si olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari .

Lati le ṣe iṣe ni kete ti iyipada ba ti pari, o le tẹtisi iṣẹlẹ ti o baamu.

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

Ni afikun ipe ọna kan lori paati iyipada yoo jẹ kọbikita .

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#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 !!

Awọn eto aiyipada

O le yi awọn eto aiyipada pada fun ohun itanna kan nipa yiyipada ohun itanna Constructor.Defaultnaa:

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

Ko si ija

Nigba miiran o jẹ dandan lati lo awọn afikun Bootstrap pẹlu awọn ilana UI miiran. Ni awọn ipo wọnyi, awọn ikọlu aaye orukọ le waye lẹẹkọọkan. Ti eyi ba ṣẹlẹ, o le pe .noConflictohun itanna ti o fẹ lati yi iye pada.

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

Awọn nọmba ẹya

Ẹya ti ọkọọkan awọn afikun jQuery Bootstrap ni a le wọle nipasẹ VERSIONohun-ini ti olupilẹṣẹ ohun itanna naa. Fun apẹẹrẹ, fun ohun itanna ọpa:

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

Ko si awọn ipadasẹhin pataki nigbati JavaScript jẹ alaabo

Awọn afikun Bootstrap ko ṣubu sẹhin paapaa ni oore-ọfẹ nigbati JavaScript jẹ alaabo. Ti o ba bikita nipa iriri olumulo ninu ọran yii, lo <noscript>lati ṣalaye ipo naa (ati bi o ṣe le tun JavaScript ṣiṣẹ) si awọn olumulo rẹ, ati/tabi ṣafikun awọn isubu aṣa tirẹ.

Lilo

Gbogbo awọn faili JavaScript Bootstrap da lori util.jsati pe o ni lati wa pẹlu awọn faili JavaScript miiran. Ti o ba nlo akopọ (tabi miniified) bootstrap.js, ko si iwulo lati ṣafikun eyi — o ti wa tẹlẹ.

util.jspẹlu awọn iṣẹ iwUlO ati oluranlọwọ ipilẹ fun transitionEndawọn iṣẹlẹ bii emulator iyipada CSS kan. O jẹ lilo nipasẹ awọn afikun miiran lati ṣayẹwo fun atilẹyin iyipada CSS ati lati yẹ awọn iyipada ikele.

Sanitizer

Awọn imọran irinṣẹ ati Awọn agbejade lo imototo ti a ṣe sinu rẹ lati sọ awọn aṣayan di mimọ ti o gba HTML.

Iye aiyipada whiteListni atẹle yii:

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', 'srcset', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Ti o ba fẹ ṣafikun awọn iye tuntun si aiyipada yii whiteListo le ṣe atẹle naa:

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)

Ti o ba fẹ lati fori imototo wa nitori pe o fẹ lati lo ile-ikawe iyasọtọ, fun apẹẹrẹ DOMPurify , o yẹ ki o ṣe atẹle naa:

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