JavaScript rehegua

Emoingove Bootstrap ore plugins JavaScript opcional reheve oñemopu’ãva jQuery-pe. Eikuaa peteĩteĩva plugin rehegua, ore dato ha opción API programática rehegua ha hetave mba’e.

Peteĩteĩ térã oñembyatýva

Umi plugin ikatu oike peteĩteĩ (oipurúvo Bootstrap peteĩteĩva js/dist/*.js), térã opaite peteĩ jeýpe oipurúvo bootstrap.jstérã oñemboguejýva bootstrap.min.js(ani oike mokõivéva).

Eipurúramo peteĩ bundler (Webpack, Rollup...), ikatu eipuru /js/dist/*.jsvore oĩva UMD-pe g̃uarã.

Umi dependencia rehegua

Oĩ plugin ha CSS componente odependéva ambue plugin rehe. Emoĩramo umi plugin peteĩteĩ, eñangareko ehecha hag̃ua ko’ã dependencia umi docs-pe. Avei eñatendéke opaite plugin odependeha jQuery rehe (kóva heꞌise jQuery oikevaꞌerãha umi plugin rembiapokue mboyve ). Ejesareko orepackage.json rehe rehecha hag̃ua mba’e versión jQuery rehegua oipytyvõ.

Ore mba’e’oka, popover ha tembipuru’i ñemboheko avei odepende Popper.js rehe .

Umi atributo de datos rehegua

Haimete opaite Bootstrap mboajepyréva ikatu oñemboguata ha oñemboheko HTML rupive añoite umi atributo dato rehegua reheve (ñande tape jaiporavovéva jaipuru hag̃ua JavaScript rembiaporã). Ejesareko eipuru hag̃ua peteĩ atributo datokuéra ryru añoite peteĩ elemento rehe (techapyrã, ndaikatúi emoñepyrũ peteĩ tembipuru’i ha modal peteĩchagua botón-gui).

Ha katu, oĩ situación-pe ikatu iporã ojedesactiva ko funcionalidad. Ojejoko hag̃ua API atributo de datos rehegua, embogue opaite mbaꞌe ojehúva kuatia rérape oñembojaꞌovaꞌekue data-apipéicha:

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

Ikatu avei, oñembohape hag̃ua peteĩ plugin específico, emoinge mante pe plugin réra peteĩ téra rendaguépe data-api réra rendaguépe kóicha:

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

Umi mba’e oikóva

Bootstrap ome’ẽ mba’e’oka jeporupyre hetavéva umi plugin rembiaporã ijojaha’ỹvape g̃uarã. Generalmente, koꞌãva oúva peteĩ forma infinitiva ha participio ohasavaꞌekuépe - oñemboguatahápe infinitivo (ex. show) oñepyrũvo peteĩ mbaꞌe ojehúva, ha iforma participio ohasavaꞌekue (ex. shown) oñembohapéva oñembotývo peteĩ tembiapo.

Opaite mba’e ojehúva infinitivo ome’ẽ preventDefault()funcionalidad. Kóva omeꞌe katupyry ojejoko hag̃ua peteĩ tembiapo jejapópe oñepyrũ mboyve. Ojevy jeývo japu peteĩ mba’e’oka ñangarekoháragui ohenóita avei ijeheguiete preventDefault().

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

API programática rehegua

Avei roguerovia ikatuva’erãha reipuru opaite Bootstrap mboajepyréva JavaScript API rupive añoite. Opaite API público haꞌehína método peteĩva, oñekadenakuaáva, ha ombojevy pe colección ojejapóva hese.

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

Opaite método omoneĩva’erã peteĩ mba’e’oka opción opcional, peteĩ cadena ojepytasóva peteĩ método particular rehe, térã mba’eve (omoñepyrũva peteĩ plugin orekóva comportamiento por defecto):

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

Káda plugin ohechauka avei iconstructor raw peteĩ Constructorpropiedad rehe: $.fn.popover.Constructor. Ojehupytyséramo peteĩ instancia plugin particular, egueru directamente peteĩ elemento-gui: $('[rel="popover"]').data('popover').

Funciones ha transiciones asíncronas rehegua

Opaite API programático método haꞌehína asíncrono ha ojevy ohenóivape oñepyrũ rire jehaipyre ha katu opa mboyve .

Ojejapo hag̃ua peteĩ tembiapo ojejapopa rire pe transición, ikatu oñehendu pe mbaꞌe ojehúva okorrespondéva.

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

Avei oñemboykéta peteĩ ñehenói método rehegua peteĩ componente oñembohasáva rehe .

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

Ñembohekorã ñepyrũrã

Ikatu emoambue ñemboheko tee peteĩ plugin-pe g̃uarã emoambuévo pe plugin Constructor.Defaultmba’ekuaarã:

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

Ndaipóri conflicto

Sapy’ánte tekotevẽ ojepuru Bootstrap mboajepyréva ambue UI rembiapokue ndive. Ko’ã mba’épe, ikatu sapy’apy’a oiko umi choque espacio de nombre rehegua. Péicha ojehúramo, ikatu ehenói .noConflictpe plugin rembojevysévape pe valor.

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

Umi número de versión rehegua

Pe versión peteĩteĩva Bootstrap jQuery mboajepyréva rehegua ikatu ojeike VERSIONpe mboajepyréva apoha mbaꞌekuaarã rupive. Techapyrã, tembipuru’i ñembohekorãme g̃uarã:

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

Ndaipóri fallback especial oñembogue jave JavaScript

Bootstrap plugins ndo’ái tapykuépe particularmente gracioso JavaScript oñembogue jave. Ejepy’apýramo puruhára jeikove rehe ko kásope, eipuru <noscript>emyesakã hag̃ua mba’éichapa oĩ (ha mba’éichapa ikatu emboguata jey JavaScript) ne puruhárape, ha/térã emoĩve ne mba’e’oka jeporupyre.

Util rehegua

Opaite Bootstrap JavaScript vore odepende util.jsha oñemoĩvaꞌerã ambue JavaScript vore ykére. Oipurúramo oñembohekopyréva (térã oñemboguejýva) bootstrap.js, natekotevẽi remoinge kóva—oĩma upépe.

util.jsoike umi tembiaporã utilidad rehegua ha peteĩ pytyvõha básico umi transitionEndmbaꞌe ojehúvape g̃uarã ha avei peteĩ emulador transición CSS rehegua. Oipuru ambue plugin ohecha hag̃ua CSS ñembohasa pytyvõ ha ojagarra hag̃ua ñembohasa ojekolokáva.

Desinfectante rehegua

Tooltips ha Popovers oipuru ore desinfectante incorporado omopotĩ hag̃ua opción omoneĩva HTML.

Pe whiteListmba’ekuaarã tee ha’e ko’ãva:

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

Emoĩséramo mba’ekuaarã pyahu ko ñepyrũrãme whiteListikatu rejapo ko’ã mba’e:

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)

Ojedesviaséramo ore desinfectante reiporusevégui peteĩ biblioteca dedicada, techapyrã DOMPurify , rejapova’erã ko’ã mba’e:

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