JavaScript

Eman Bootstrap-i jQuery-n eraikitako gure aukerako JavaScript pluginekin. Lortu informazio gehiago plugin bakoitzari, gure datuei eta API programatikoen aukerei eta gehiago.

Banaka edo konpilatua

Pluginak banaka sar daitezke (Bootstrap-en banakoa erabiliz js/dist/*.js), edo aldi berean bootstrap.jsedo txikituta bootstrap.min.js(ez sartu biak).

Multzo bat erabiltzen baduzu (Webpack, Rollup...), /js/dist/*.jsUMD prest dauden fitxategiak erabil ditzakezu.

Mendekotasunak

Plugin eta CSS osagai batzuk beste plugin batzuen araberakoak dira. Pluginak banan-banan sartzen badituzu, ziurtatu mendekotasun horiek egiaztatzea dokumentuetan. Kontuan izan, gainera , plugin guztiak jQueryren araberakoak direla (horrek esan nahi du jQuery plugin-fitxategien aurretik sartu behar dela). Kontsultatu gurepackage.json jQuery-ren zein bertsio onartzen diren ikusteko.

Popper.js -en araberakoak dira gure goitibeherako zerrendak, popover-ak eta argibideak ere .

Datu-atributuak

Bootstrap-eko plugin ia guztiak HTML bidez soilik gaitu eta konfigura daitezke datu-atributuekin (JavaScript funtzionalitatea erabiltzeko gure modurik hobetsia). Ziurtatu datu-atributu multzo bakarra erabiltzen duzula elementu bakarrean (adibidez, ezin duzu tresna-informaziorik eta modal bat botoi beretik abiarazi).

Hala ere, zenbait egoeratan funtzionalitate hori desgaitzea komenigarria izan daiteke. Datu-atributuaren APIa desgaitzeko, deslotu dokumentuaren izen-tartea data-apihonela:

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

Bestela, plugin zehatz bat bideratzeko, gehitu pluginaren izena izen-espazio gisa, datu-api izen-espazioarekin batera honela:

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

Gertaerak

Bootstrap-ek plugin gehienen ekintza berezietarako gertaera pertsonalizatuak eskaintzen ditu. Orokorrean, mugagabea eta iraganeko partizipio formakoak dira, non infinitiboa (adib. show) gertaera baten hasieran abiarazten den eta bere iraganeko partizipioaren forma (adib. shown) ekintza bat amaitzean abiarazten den.

Infinitiboko gertaera guztiek preventDefault()funtzionaltasuna ematen dute. Horrek ekintza baten exekuzioa hasi baino lehen gelditzeko gaitasuna ematen du. Gertaeren kudeatzaile batetik faltsua itzultzeak automatikoki deituko du preventDefault().

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

API programatikoa

Gainera, Bootstrap plugin guztiak JavaScript APIaren bidez soilik erabili ahal izango dituzula uste dugu. API publiko guztiak metodo bakarrak eta kateagarriak dira, eta egindako bilduma itzultzen dute.

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

Metodo guztiek aukerako aukera-objektu bat onartu beharko lukete, metodo jakin bati zuzendutako kate bat edo ezer ez (portaera lehenetsia duen plugin bat abiarazten duena):

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

Plugin bakoitzak bere eraikitzaile gordina ere erakusten du Constructorpropietate batean: $.fn.popover.Constructor. Plugin-instantzia jakin bat lortu nahi baduzu, eskuratu zuzenean elementu batetik: $('[rel="popover"]').data('popover').

Funtzio asinkronoak eta trantsizioak

API programatikoko metodo guztiak asinkronoak dira eta deitzailearengana itzultzen dira trantsizioa hasi eta amaitu baino lehen .

Trantsizioa amaitutakoan ekintza bat exekutatzeko, dagokion gertaera entzun dezakezu.

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

Horrez gain, trantsizio-osagai baten metodo-dei bati ez ikusi egingo zaio .

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

Ezarpen lehenetsiak

Plugin baten ezarpen lehenetsiak alda ditzakezu pluginaren Constructor.Defaultobjektua aldatuz:

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

Gatazkarik ez

Batzuetan beharrezkoa da Bootstrap pluginak beste UI esparru batzuekin erabiltzea. Egoera horietan, noizean behin izen-espazioen talkak gerta daitezke. Hori gertatzen bada, .noConflictbalioa berreskuratu nahi duzun pluginera dei dezakezu.

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

Bertsio zenbakiak

VERSIONBootstrap-en jQuery plugin bakoitzaren bertsioa pluginaren eraikitzailearen jabetzaren bidez sar daiteke . Adibidez, tooltip pluginerako:

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

Ez dago atzerabide berezirik JavaScript desgaituta dagoenean

Bootstrap-en pluginak ez dira bereziki dotoretasunez jaisten JavaScript desgaituta dagoenean. Kasu honetan erabiltzailearen esperientzia axola bazaizu, erabili <noscript>egoera azaltzeko (eta JavaScript berriro nola gaitu) zure erabiltzaileei eta/edo gehitzeko zure ordezko pertsonalizatuak.

Util

Bootstrap-en JavaScript fitxategi guztiak araberakoak dira util.jseta beste JavaScript fitxategiekin batera sartu behar dira. Konpilatua (edo txikitua) erabiltzen ari bazara bootstrap.js, ez dago hau sartu beharrik; dagoeneko hor dago.

util.jserabilgarritasun-funtzioak eta gertaeren oinarrizko laguntzailea eta transitionEndCSS trantsizio emuladorea ditu. Beste pluginek CSS trantsizio-laguntza egiaztatzeko eta zintzilik dauden trantsizioak harrapatzeko erabiltzen dute.

Higienizatzailea

Tooltips eta Popovers-ek gure integratutako desinfektatzailea erabiltzen dute HTML onartzen duten aukerak desinfektatzeko.

Balio lehenetsia whiteListhonako hau da:

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

Lehenetsi honi balio berriak gehitu nahi badituzu whiteList, hau egin dezakezu:

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)

Gure desinfektatzailea saihestu nahi baduzu liburutegi dedikatu bat erabiltzea nahiago duzulako, adibidez DOMPurify , honako hau egin beharko zenuke:

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