JavaScript

Oživite Bootstrap s našim dodatnim JavaScript dodacima izgrađenim na jQueryju. Saznajte više o svakom dodatku, našim podacima i opcijama programskog API-ja i više.

Pojedinačni ili sastavljeni

Dodaci se mogu uključiti pojedinačno (koristeći Bootstrap's individual js/dist/*.js), ili sve odjednom pomoću bootstrap.jsili umanjenog bootstrap.min.js(nemojte uključivati ​​oboje).

Ako koristite bundler (Webpack, Rollup…), možete koristiti /js/dist/*.jsdatoteke koje su spremne za UMD.

Ovisnosti

Neki dodaci i CSS komponente ovise o drugim dodacima. Ako dodate dodatke pojedinačno, svakako provjerite te ovisnosti u dokumentima. Također imajte na umu da svi dodaci ovise o jQueryju (to znači da jQuery mora biti uključen prije datoteka dodataka). Posavjetujte se s našimpackage.json da biste vidjeli koje su verzije jQueryja podržane.

Naši padajući izbornici, skočni prozori i opisi alata također ovise o Popper.js .

Atributi podataka

Gotovo svi Bootstrap dodaci mogu se omogućiti i konfigurirati samo putem HTML-a s atributima podataka (naš preferirani način korištenja JavaScript funkcionalnosti). Pazite da koristite samo jedan skup atributa podataka na jednom elementu (npr. ne možete pokrenuti opis alata i modal s istog gumba.)

Međutim, u nekim situacijama može biti poželjno onemogućiti ovu funkciju. Da biste onemogućili API atributa podataka, odvežite sve događaje na prostoru imena dokumenta data-apiovako:

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

Alternativno, da ciljate određeni dodatak, samo uključite naziv dodatka kao prostor imena zajedno s prostorom imena data-api ovako:

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

Događaji

Bootstrap pruža prilagođene događaje za većinu jedinstvenih radnji dodataka. Općenito, oni dolaze u obliku infinitiva i participa prošlosti - gdje se infinitiv (npr. show) pokreće na početku događaja, a njegov oblik participa prošlosti (npr. shown) se pokreće nakon završetka radnje.

Svi infinitivni događaji pružaju preventDefault()funkcionalnost. Ovo pruža mogućnost zaustavljanja izvršenja radnje prije nego što započne. Vraćanje false iz rukovatelja događajem također će automatski pozvati preventDefault().

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

Programski API

Također vjerujemo da biste trebali moći koristiti sve Bootstrap dodatke isključivo putem JavaScript API-ja. Svi javni API-ji su pojedinačne, ulančane metode i vraćaju zbirku na koju se djeluje.

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

Sve metode trebaju prihvatiti opcijski objekt opcija, niz koji cilja na određenu metodu ili ništa (što pokreće dodatak sa zadanim ponašanjem):

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

Svaki dodatak također izlaže svoj neobrađeni konstruktor na Constructorsvojstvu: $.fn.popover.Constructor. Ako želite dobiti određenu instancu dodatka, dohvatite je izravno iz elementa: $('[rel="popover"]').data('popover').

Asinkrone funkcije i prijelazi

Sve programske API metode su asinkrone i vraćaju se pozivatelju kada prijelaz započne, ali prije nego što završi .

Kako biste izvršili radnju nakon završetka prijelaza, možete slušati odgovarajući događaj.

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

Osim toga, poziv metode na prijelaznoj komponenti bit će zanemaren .

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

Zadane postavke

Zadane postavke dodatka možete promijeniti izmjenom Constructor.Defaultobjekta dodatka:

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

Nema sukoba

Ponekad je potrebno koristiti Bootstrap dodatke s drugim UI okvirima. U tim okolnostima povremeno može doći do sukoba prostora imena. Ako se to dogodi, možete pozvati .noConflictdodatak kojem želite vratiti vrijednost.

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

Brojevi verzija

Verziji svakog Bootstrapovog jQuery dodatka može se pristupiti putem VERSIONsvojstva konstruktora dodatka. Na primjer, za dodatak s opisom alata:

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

Nema posebnih zamjena kada je JavaScript onemogućen

Bootstrapovi dodaci ne vraćaju se osobito graciozno kada je JavaScript onemogućen. Ako vam je u ovom slučaju stalo do korisničkog iskustva, upotrijebite <noscript>kako biste svojim korisnicima objasnili situaciju (i kako ponovno omogućiti JavaScript) i/ili dodajte vlastite prilagođene zamjene.

Util

Sve Bootstrapove JavaScript datoteke ovise o util.jsi moraju biti uključene uz druge JavaScript datoteke. Ako koristite kompilirani (ili umanjeni) bootstrap.js, nema potrebe uključivati ​​ovo—već je tu.

util.jsuključuje uslužne funkcije i osnovni pomoćnik za transitionEnddogađaje kao i CSS emulator prijelaza. Koriste ga drugi dodaci za provjeru podrške za CSS prijelaze i za hvatanje visećih prijelaza.

Sredstvo za dezinfekciju

Tooltips i Popovers koriste naš ugrađeni sanitizer za čišćenje opcija koje prihvaćaju HTML.

Zadana whiteListvrijednost je sljedeća:

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

Ako želite dodati nove vrijednosti ovoj zadanoj postavci whiteList, možete učiniti sljedeć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)

Ako želite zaobići naš sanitizer jer više volite koristiti namjensku biblioteku, na primjer DOMPurify , trebali biste učiniti sljedeće:

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