JavaScript ezali

Mema Bootstrap na bomoi na ba plugins na biso ya JavaScript oyo okoki kopona oyo etongami na jQuery. Yekola na ntina ya plugin moko na moko, ba données na biso mpe ba options ya API programmatique, mpe mingi mosusu.

Moto na moto to oyo esangisi yango

Ba plugins ekoki kozala na kati moko moko (kosalela Bootstrap's individual js/dist/*.js), to nyonso na mbala moko kosalela bootstrap.jsto oyo ekitisami bootstrap.min.js(kokɔtisa nyonso mibale te).

Soki osaleli bundler (Webpack, Rollup...), okoki kosalela /js/dist/*.jsba fichiers oyo ezali prêt ya UMD.

Ba dépendances

Ba plugins misusu na ba composants ya CSS etali ba plugins misusu. Soki otie ba plugins moko moko, sala makasi otala ba dépendances oyo na ba docs. Yeba pe que ba plugins nionso e dépend na jQuery (yango elakisi que jQuery esengeli ezala na kati liboso ya ba fichiers ya ba plugin). Consultez notrepackage.json po omona ba versions nini ya jQuery ezo soutenir.

Ba dropdowns na biso, ba popovers na ba tolips ya bisaleli pe etali Popper.js .

Ba attributs ya ba données

Pene na ba plugins nionso ya Bootstrap ekoki kozala activé mpe configuré na nzela ya HTML kaka na ba attributs ya ba données (lolenge na biso ya kosalela fonctionnalité ya JavaScript oyo tolingaka mingi). Sala makasi ya kosalela kaka ensemble moko ya ba attributs ya ba données na élément moko (ndakisa, okoki te ko déclencher tooltip mpe modal na bouton moko.)

Kasi, na makambo mosusu ekoki kozala malamu kokanga mosala yango. Mpo na kokanga API ya attribut ya ba données, longola makambo nyonso na mokanda oyo ezali na esika ya nkombo na data-apilokola bongo:

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

Na lolenge mosusu, mpo na ko cibler plugin moko ya sikisiki, kotia kaka kombo ya plugin lokola esika ya nkombo elongo na esika ya nkombo ya data-api lokola oyo:

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

Makambo oyo esalemaki

Bootstrap epesaka ba événements personnalisés pona ba actions unique ya ba plugins mingi. Mingimingi, oyo eyaka na lolenge ya infinitif mpe ya participe eleki - esika infinitif (ex. show) ebandisami na ebandeli ya likambo moko, mpe lolenge na yango ya participe ya kala (ex. shown) ebandisami na bosilisi ya likambo moko.

Ba événements infinitifs nionso epesaka preventDefault()fonctionnalité. Yango epesaka makoki ya kopekisa exécution ya action moko avant ebanda. Kozongisa lokuta uta na mobongisi ya likambo ekobenga mpe automatiquement preventDefault().

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

API ya programme

Tondimi mpe ete osengeli kozala na likoki ya kosalela ba plugins nyonso ya Bootstrap kaka na nzela ya API ya JavaScript. Ba API nionso ya leta ezali ba méthodes moko, oyo ekoki kozala na chaîne, mpe ezongisaka bosangisi oyo esalemaki na yango.

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

Ba méthodes nionso esengeli kondima objet ya ba options optionnelles, chaîne oyo ezo cibler méthode moko boye, to eloko moko te (oyo ebandisaka plugin na comportement par défaut):

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

Plugin moko na moko e exposer pe constructeur na yango brut na Constructorpropriété moko: $.fn.popover.Constructor. Soki olingi kozwa instance ya plugin moko boye, zwa yango mbala moko na élément moko: $('[rel="popover"]').data('popover').

Ba fonctions asynchrones na ba transitions

Ba méthodes nionso ya API programmatique ezali asynchrone mpe ezongaka na mobengi mbala moko transition ebandi kasi liboso esila .

Pona kosala action moko soki transition esili, okoki koyoka événement correspondant.

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

En plus appel ya méthode na composante ya transition ekozala ignorée .

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

Ba paramètres ya défaut

Okoki kobongola ba paramètres ya liboso ya plugin na kobongola Constructor.Defaulteloko ya plugin:

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

Matata moko te

Tango mosusu esengeli kosalela ba plugins ya Bootstrap na ba cadres mosusu ya UI. Na makambo oyo, bokutani ya esika ya nkombo ekoki kobima ntango mosusu. Soki likambo yango esalemi, okoki kobenga .noConflictplugin oyo olingi kozongisa motuya na yango.

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

Mituya ya ba versions

Version ya moko na moko ya ba plugins jQuery ya Bootstrap ekoki kozuama na nzela ya VERSIONpropriété ya constructeur ya plugin. Ndakisa, mpo na plugin ya tooltip:

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

Ba fallbacks ya sipesiale te tango JavaScript ezali désactivé

Ba plugins ya Bootstrap ezongaka sima te particulièrement gracement tango JavaScript ezali désactivé. Soki ozali komibanzabanza mpo na mayele ya mosaleli na likambo oyo, salelá <noscript>mpo na kolimbola likambo (mpe ndenge ya kofungola lisusu JavaScript) epai ya basaleli na yo, mpe/to kobakisa ba fallbacks na yo moko oyo olingi.

Util

Ba fichiers JavaScript nionso ya Bootstrap e dépend na util.jsyango pe esengeli ezala na kati pembeni ya ba fichiers JavaScript misusu. Soki ozali kosalela oyo esangisi (to oyo ekitisami) bootstrap.js, ntina ya kokɔtisa oyo ezali te —ezali deja wana.

util.jsezali na misala ya utilité mpe mosungi ya moboko mpo na transitionEndmakambo mpe lisusu émulateur ya transition CSS. Esalelamaka na ba plugins mosusu mpo na kotala soki ezali na lisungi ya mbongwana ya CSS mpe mpo na kokanga ba transitions oyo ekangami.

Sanitizer ya kosala

Tooltips na Popovers basalelaka sanitizer na biso intégré pona ko sanitiser ba options oyo endimaka HTML.

Motuya ya liboso whiteListezali oyo elandi:

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

Soki olingi kobakisa ba valeurs ya sika na défaut whiteListoyo okoki kosala oyo elandi:

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)

Soki olingi ko contourner sanitizer na biso po olingi kosalela bibliothèque dédiée, par exemple DOMPurify , esengeli osala oyo elandi:

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