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 (e) {
  if (!data) return e.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 (e) {
  // Action to execute once the collapsible area is expanded
})

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

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#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օբյեկտը.

$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to 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.1.3"

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

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

Ուտիլ

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

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