JavaScript

Kawo Bootstrap zuwa rai tare da zaɓin plugins ɗin mu na JavaScript wanda aka gina akan jQuery. Koyi game da kowane plugin, bayanan mu da zaɓuɓɓukan API na shirye-shirye, da ƙari.

Mutum ko harhada

Ana iya haɗa plugins daban-daban (ta yin amfani da mutum ɗaya na Bootstrap js/dist/*.js), ko duka gaba ɗaya ta amfani da bootstrap.jsko rage bootstrap.min.js(kada ku haɗa duka biyun).

Idan kuna amfani da bundler (Webpack, Rollup…), zaku iya amfani da /js/dist/*.jsfayilolin da suke shirye UMD.

Dogara

Wasu plugins da abubuwan CSS sun dogara da wasu plugins. Idan kun haɗa plugins daban-daban, tabbatar da bincika waɗannan abubuwan dogaro a cikin takaddun. Har ila yau lura cewa duk plugins sun dogara da jQuery (wannan yana nufin jQuery dole ne a haɗa shi kafin fayilolin plugin). Tuntuɓi mupackage.json don ganin waɗanne nau'ikan jQuery ne ake tallafawa.

Zazzagewar mu, popovers da tukwici na kayan aiki suma sun dogara da Popper.js .

Bayanan bayanai

Kusan duk Bootstrap plugins ana iya kunna su kuma daidaita su ta hanyar HTML kadai tare da halayen bayanai (hanyar da muka fi so ta amfani da ayyukan JavaScript). Tabbatar yin amfani da saitin sifofi guda ɗaya kawai akan kashi ɗaya (misali, ba za ku iya jawo tip ɗin kayan aiki da modal daga maɓalli ɗaya ba).

Koyaya, a wasu yanayi yana iya zama kyawawa a kashe wannan aikin. Don musaki sifa ta API, cire duk abubuwan da suka faru a kan takaddun sunaye data-apikamar haka:

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

A madadin, don ƙaddamar da takamaiman plugin ɗin, kawai haɗa sunan plugin ɗin azaman sarari suna tare da bayanan-api sunaye kamar haka:

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

Abubuwan da suka faru

Bootstrap yana ba da al'amuran al'ada don yawancin ayyuka na musamman na plugins. Gabaɗaya, waɗannan suna zuwa ne a cikin sigar ɓarna ta ƙarshe da ta gabata - inda ƙarshen (misali show) ke haifar da shi a farkon wani lamari, kuma sigar ɓangarorinsa na baya (misali shown) yana haifar da ƙarshen aikin.

Duk abubuwan da ba su da iyaka suna ba da preventDefault()ayyuka. Wannan yana ba da ikon dakatar da aiwatar da wani aiki kafin ya fara. Koma karya daga mai kula da taron shima zai kira ta atomatik preventDefault().

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

API ɗin shirye-shirye

Mun kuma yi imanin ya kamata ku iya amfani da duk abubuwan Bootstrap kawai ta JavaScript API. Duk APIs na jama'a guda ɗaya ne, hanyoyin da za a iya sarƙa, da dawo da tarin da aka yi aiki da su.

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

Duk hanyoyin ya kamata su karɓi zaɓin zaɓi na zaɓi, kirtani wanda ke nufin wata hanya, ko ba komai (wanda ke fara plugin ɗin tare da halayen tsoho):

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

Kowane plugin kuma yana fallasa ɗanyen ginin sa akan wata Constructorkadara: $.fn.popover.Constructor. Idan kuna son samun misalan plugin ɗin, dawo da shi kai tsaye daga wani abu: $('[rel="popover"]').data('popover').

Ayyukan asynchronous da canji

Duk hanyoyin API na shirye-shirye ba su daidaita kuma suna komawa ga mai kira da zarar an fara canji amma kafin ya ƙare .

Domin aiwatar da wani aiki da zarar an kammala canji, zaku iya sauraron abin da ya faru.

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

Bugu da ƙari, za a yi watsi da kiran hanya a kan sashin canji .

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

Saitunan tsoho

Kuna iya canza saitunan tsoho don plugin ta hanyar gyara abin plugin ɗin Constructor.Default:

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

Babu rikici

Wani lokaci yana da mahimmanci a yi amfani da plugins Bootstrap tare da wasu tsarin UI. A cikin waɗannan yanayi, karon sararin samaniya na iya faruwa lokaci-lokaci. Idan wannan ya faru, kuna iya kiran .noConflictplugin ɗin da kuke son mayar da darajar.

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

Lambobin sigar

Za a iya isa ga sigar kowane na Bootstrap's jQuery plugins ta hanyar VERSIONmallakar maginin plugin ɗin. Misali, don plugin ɗin kayan aiki:

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

Babu faɗuwa ta musamman lokacin da aka kashe JavaScript

Bootstrap's plugins ba sa komawa baya musamman cikin alheri lokacin da aka kashe JavaScript. Idan kuna kula da ƙwarewar mai amfani a wannan yanayin, yi amfani <noscript>da bayanin halin da ake ciki (da kuma yadda ake sake kunna JavaScript) ga masu amfani da ku, da/ko ƙara naku faɗuwar al'ada.

Amfani

Duk fayilolin JavaScript na Bootstrap sun dogara util.jskuma dole ne a haɗa shi tare da sauran fayilolin JavaScript. Idan kana amfani da abin da aka haɗa (ko rage) bootstrap.js, babu buƙatar haɗa wannan - ya riga ya kasance a can.

util.jsya haɗa da ayyuka masu amfani da mataimaki na asali don transitionEndabubuwan da suka faru da kuma abin koyi na CSS. Sauran plugins ke amfani da shi don bincika tallafin canjin CSS da kuma kama canjin rataye.

Sanitizer

Nasihun kayan aiki da Popovers suna amfani da ginanniyar sanitizer don tsabtace zaɓuɓɓukan da suka karɓi HTML.

Tsohuwar whiteListƙimar ita ce mai zuwa:

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

Idan kuna son ƙara sabbin ƙima zuwa wannan tsoho whiteListza ku iya yin masu zuwa:

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)

Idan kuna son ketare sanitizer ɗinmu saboda kun fi son amfani da ɗakin karatu da aka keɓe, misali DOMPurify , yakamata kuyi masu zuwa:

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