JavaScript

Կյանքի կոչեք Bootstrap-ը jQuery-ի վրա կառուցված մեր կամընտիր JavaScript հավելվածների միջոցով: Իմացեք յուրաքանչյուր հավելվածի, մեր տվյալների և ծրագրային API-ի ընտրանքների և ավելին:

Անհատական ​​կամ կազմված

Փլագինները կարող են ներառվել առանձին (օգտագործելով Bootstrap-ի անհատականությունը js/dist/*.js), կամ միանգամից՝ օգտագործելով bootstrap.jsկամ փոքրացված bootstrap.min.js(մի՛ ներառեք երկուսն էլ):

Եթե ​​դուք օգտագործում եք փաթեթ (Webpack, Rollup…), կարող եք օգտագործել /js/dist/*.jsֆայլեր, որոնք պատրաստ են UMD-ին:

Կախվածություններ

Որոշ պլագիններ և CSS բաղադրիչներ կախված են այլ պլագիններից: Եթե ​​դուք ներառում եք պլագիններ առանձին-առանձին, համոզվեք, որ ստուգեք այս կախվածությունները փաստաթղթերում: Նկատի ունեցեք նաև, որ բոլոր հավելումները կախված են jQuery-ից (սա նշանակում է, որ jQuery-ն պետք է ներառված լինի plugin ֆայլերից առաջ): Խորհրդակցեք մեզpackage.json ՝ տեսնելու, թե jQuery-ի որ տարբերակներն են աջակցվում:

Մեր բացվող էջերը, popover-ները և գործիքների հուշումները նույնպես կախված են Popper.js-ից :

Տվյալների հատկանիշներ

Գրեթե բոլոր Bootstrap հավելվածները կարող են միացված լինել և կազմաձևվել միայն HTML-ի միջոցով տվյալների ատրիբուտներով (JavaScript-ի ֆունկցիոնալությունը օգտագործելու մեր նախընտրելի եղանակը): Համոզվեք, որ միայն մեկ տարրի վրա օգտագործեք տվյալների ատրիբուտների միայն մեկ հավաքածու (օրինակ, դուք չեք կարող գործարկել գործիքի հուշում և մոդալ նույն կոճակից):

Այնուամենայնիվ, որոշ իրավիճակներում կարող է ցանկալի լինել անջատել այս գործառույթը: Տվյալների հատկանիշի API-ն անջատելու համար անջատեք բոլոր իրադարձությունները փաստաթղթի անվանման տարածության վրա՝ data-apiայսպես.

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

Որպես այլընտրանք, հատուկ պլագին թիրախավորելու համար պարզապես ներառեք հավելվածի անունը որպես անվանատարածք տվյալների api անվանատարածքի հետ միասին, ինչպես հետևյալը.

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

Իրադարձություններ

Bootstrap-ն ապահովում է հարմարեցված իրադարձություններ փլագինների մեծ մասի եզակի գործողությունների համար: Ընդհանրապես, դրանք գալիս են ինֆինիտիվ և անցյալ մասնակցային ձևով, որտեղ ինֆինիտիվը (նախ. show) գործարկվում է իրադարձության սկզբում, իսկ նրա անցյալ մասնակցային ձևը ( նախ. shown) գործարկվում է գործողության ավարտից հետո:

Բոլոր անվերջ իրադարձությունները ապահովում են preventDefault()ֆունկցիոնալություն: Սա հնարավորություն է տալիս դադարեցնել գործողությունների կատարումը նախքան այն սկսելը: Իրադարձությունների մշակիչից false վերադարձնելու դեպքում նաև ավտոմատ կերպով կկանչվի preventDefault():

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

Ծրագրային API

Մենք նաև կարծում ենք, որ դուք պետք է կարողանաք օգտագործել բոլոր Bootstrap հավելվածները զուտ JavaScript API-ի միջոցով: Բոլոր հանրային API-ները միայնակ, շղթայական մեթոդներ են և վերադարձնում են գործածված հավաքածուն:

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

Բոլոր մեթոդները պետք է ընդունեն կամընտիր ընտրանքների օբյեկտ, տող, որը ուղղված է որոշակի մեթոդին, կամ ոչինչ (որը սկսում է լռելյայն վարքագիծ ունեցող պլագին).

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

Յուրաքանչյուր փլագին նաև բացահայտում է իր չմշակված կոնստրուկտորը մի Constructorհատկության վրա՝ $.fn.popover.Constructor. Եթե ​​ցանկանում եք ստանալ հատուկ plugin-ի օրինակ, առբերեք այն անմիջապես տարրից՝ $('[rel="popover"]').data('popover').

Ասինխրոն գործառույթներ և անցումներ

Բոլոր ծրագրային API մեթոդներն ասինխրոն են և վերադառնում են զանգահարողին, երբ անցումը սկսվում է, բայց մինչև այն ավարտվի :

Անցումը ավարտվելուց հետո գործողություն կատարելու համար կարող եք լսել համապատասխան իրադարձությունը:

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

Բացի այդ, անցումային բաղադրիչի վրա մեթոդի կանչը անտեսվելու է :

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

Կանխադրված կարգավորումներ

Դուք կարող եք փոխել plugin-ի լռելյայն կարգավորումները՝ փոփոխելով plugin-ի Constructor.Defaultօբյեկտը.

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

Ոչ մի կոնֆլիկտ

Երբեմն անհրաժեշտ է լինում օգտագործել Bootstrap պլագիններ այլ UI շրջանակների հետ: Այս հանգամանքներում երբեմն կարող են տեղի ունենալ անունների տարածության բախումներ: Եթե ​​դա տեղի ունենա, դուք կարող եք զանգահարել .noConflictայն պլագինին, որի արժեքը ցանկանում եք վերադարձնել:

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

Տարբերակների համարները

Bootstrap-ի jQuery պլագիններից յուրաքանչյուրի տարբերակը հասանելի VERSIONէ plugin-ի կոնստրուկտորի սեփականության միջոցով: Օրինակ, Tooltip plugin-ի համար.

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

Հատուկ հետադարձ կապ չկա, երբ JavaScript-ն անջատված է

Bootstrap-ի պլագինները առանձնապես նրբագեղորեն չեն զիջում, երբ JavaScript-ն անջատված է: Եթե ​​այս դեպքում ձեզ հետաքրքրում է օգտատերերի փորձը, օգտագործեք <noscript>ձեր օգտատերերին իրավիճակը (և ինչպես կրկին ակտիվացնել JavaScript-ը) բացատրելու համար և/կամ ավելացրեք ձեր սեփական հետադարձ կապերը:

Ուտիլ

Bootstrap-ի բոլոր JavaScript ֆայլերը կախված են, util.jsև այն պետք է ներառվի JavaScript-ի մյուս ֆայլերի կողքին: Եթե ​​դուք օգտագործում եք կազմված (կամ փոքրացված) bootstrap.js, կարիք չկա ներառել սա. այն արդեն կա:

util.jsներառում է օգտակար գործառույթներ և իրադարձությունների հիմնական օգնական, transitionEndինչպես նաև CSS անցումային էմուլյատոր: Այն օգտագործվում է այլ պլագինների կողմից՝ ստուգելու CSS անցումային աջակցությունը և կախված անցումները բռնելու համար:

Սանիտարական միջոց

Tooltips-ը և Popovers-ը օգտագործում են մեր ներկառուցված ախտահանիչը՝ HTML-ն ընդունող տարբերակները մաքրելու համար:

Լռելյայն whiteListարժեքը հետևյալն է.

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

Եթե ​​ցանկանում եք այս լռելյայն նոր արժեքներ ավելացնել, whiteListկարող եք անել հետևյալը.

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)

Եթե ​​ցանկանում եք շրջանցել մեր ախտահանիչը, քանի որ նախընտրում եք օգտագործել հատուկ գրադարան, օրինակ ՝ DOMPurify , դուք պետք է անեք հետևյալը.

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