JavaScript

Leeta Bootstrap mu bulamu ne JavaScript plugins zaffe ez'okwesalirawo ezizimbibwa ku jQuery. Manya ebikwata ku buli plugin, data yaffe ne programmatic API options, n'ebirala.

Kinoomu oba ekikuŋŋaanyiziddwa

Plugins zisobola okuteekebwamu kinnoomu (nga okozesa Bootstrap's individual js/dist/*.js), oba zonna omulundi gumu nga okozesa bootstrap.jsoba ezikendeezeddwa bootstrap.min.js(tossaamu byombi).

Bw’oba ​​okozesa bundler (Webpack, Rollup...), osobola okukozesa /js/dist/*.jsfayiro eziri nga zeetegefu UMD.

Ebisinziirwako

Plugins ezimu n'ebitundu bya CSS byesigamye ku plugins endala. Bw'oba ossaamu plugins kinnoomu, kakasa nti okebera bino ebisinziirako mu docs. Era weetegereze nti plugins zonna zeesigamye ku jQuery (kino kitegeeza nti jQuery erina okuteekebwamu nga fayiro za plugin tezinnabaawo). Weebuuze ku yaffepackage.json olabe enkyusa ki eza jQuery eziwagirwa.

Ebitundu byaffe ebigwa, popovers n'ebikozesebwa nabyo byesigamye ku Popper.js .

Ebintu ebikwata ku data

Kumpi plugins zonna eza Bootstrap zisobola okusobozesa n’okusengekebwa okuyita mu HTML yokka nga zirina data attributes (engeri gye twagala okukozesaamu enkola ya JavaScript). Kakasa nti okozesa ekibinja kimu kyokka eky'ebintu bya data ku elementi emu (okugeza, tosobola kutandika tooltip ne modal okuva ku button y'emu.)

Naye mu mbeera ezimu kiyinza okuba ekirungi okulemesa omulimu guno. Okulemesa API attribute ya data, ggyamu ebibaddewo byonna ku kiwandiiko namespaced ne data-apilike so:

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

Ekirala, okutunuulira plugin eyeetongodde, ssaamu erinnya lya plugin nga ekifo ky'amannya wamu n'ekifo ky'amannya kya data-api nga kino:

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

Ebibaddewo

Bootstrap egaba ebibaddewo eby'enjawulo ku bikolwa eby'enjawulo ebya plugins ebisinga obungi. Okutwalira awamu, bino bijja mu ngeri etaliiko nkomerero n’ennyiriri eziyise - nga ekintu ekitaliiko nkomerero (ex. show) kitandikibwawo ku ntandikwa y’ekintu ekibaawo, ate engeri yaakyo ey’ekitundu ekiyise (ex. shown) n’etandika nga ekikolwa kiwedde.

Ebintu byonna ebibaawo ebitaliiko nkomerero biwa preventDefault()enkola. Kino kiwa obusobozi okuyimiriza okukola ekikolwa nga tekinnatandika. Okuzzaayo false okuva ku event handler nakyo kijja kuyita otomatika preventDefault().

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

API ya pulogulaamu

Era tukkiriza nti olina okusobola okukozesa Bootstrap plugins zonna okuyita mu JavaScript API yokka. API zonna ez'olukale nkola emu, eziteekebwako enjegere, era zizzaayo okukung'aanya okwakolebwako.

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

Enkola zonna zirina okukkiriza ekintu eky'okulonda eky'okwesalirawo, olunyiriri olugenderera enkola entongole, oba tewali kintu kyonna (ekitandika plugin n'enneeyisa eya bulijjo):

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

Buli plugin era eraga constructor yaayo embisi ku Constructorproperty: $.fn.popover.Constructor. Bw'oba oyagala okufuna ekifaananyi kya plugin ekimu, kiggye butereevu okuva mu elementi: $('[rel="popover"]').data('popover').

Emirimu egitakwatagana n’enkyukakyuka

Enkola zonna eza programmatic API zibeera za asynchronous era zidda eri oyo ayita oluvannyuma lw'enkyukakyuka okutandika naye nga tennaggwa .

Okusobola okukola ekikolwa ng’enkyukakyuka ewedde, osobola okuwuliriza ekintu ekikwatagana.

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

Okugatta ku ekyo okuyita enkola ku kitundu ekikyukakyuka kujja kubuusibwa amaaso .

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

Enteekateeka ezisookerwako

Osobola okukyusa ensengeka ezisookerwako eza plugin nga okyusa Constructor.Defaultekintu kya plugin:

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

Tewali butakkaanya

Oluusi kyetaagisa okukozesa Bootstrap plugins ne UI frameworks endala. Mu mbeera zino, okutomeragana kw'ekifo ky'amannya kuyinza okubaawo oluusi n'oluusi. Kino bwe kibaawo, oyinza okuyita .noConflictku plugin gy’oyagala okuzzaawo omuwendo gwayo.

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

Ennamba z’enkyusa

Enkyusa ya buli emu ku jQuery plugins za Bootstrap esobola okuyingizibwa ng'oyita mu VERSIONby'obugagga by'omuzimbi wa plugin. Okugeza, ku plugin ya tooltip:

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

Tewali kugwa kwa njawulo nga JavaScript eremeddwa

Bootstrap's plugins tezigwa mabega naddala gracefully nga JavaScript eremeddwa. Bw’oba ​​ofaayo ku bumanyirivu bw’omukozesa mu mbeera eno, kozesa <noscript>okunnyonnyola embeera (n’engeri y’okuddamu okusobozesa JavaScript) eri abakozesa bo, ne/oba okwongerako ebikuddirira byo eby’ennono.

Okukozesa

Fayiro zonna eza JavaScript eza Bootstrap zeesigamye ku util.jsera erina okuteekebwa ku mabbali ga fayiro za JavaScript endala. Bw’oba ​​okozesa ekikung’aanyiziddwa (oba ekikendeezeddwa) bootstrap.js, tekyetaagisa kussaamu kino—kyabaddewo dda.

util.jsmulimu emirimu egy’omugaso n’omuyambi omukulu eri transitionEndebibaawo wamu n’ekikoppa enkyukakyuka ya CSS. Ekozesebwa plugins endala okukebera obuwagizi bw'enkyukakyuka ya CSS n'okukwata enkyukakyuka eziwaniridde.

Eddagala erirongoosa

Tooltips ne Popovers zikozesa sanitizer yaffe ezimbiddwa mu sanitize options ezikkiriza HTML.

Omuwendo ogusookerwako whiteListgwe guno wammanga:

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: []
}

Bw'oba oyagala okwongera emiwendo emipya ku kino ekisookerwako whiteListosobola okukola bino wammanga:

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)

Bw’oba ​​oyagala okuyita ku sanitizer yaffe kubanga oyagala nnyo okukozesa etterekero ly’ebitabo eriweereddwayo, okugeza DOMPurify , olina okukola bino wammanga:

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