JavaScript

JQuery жүйесінде орнатылған қосымша JavaScript плагиндерімен Bootstrap-ті өмірге әкеліңіз. Әрбір плагин, деректер және бағдарламалық API опциялары және т.б. туралы біліңіз.

Жеке немесе құрастырылған

Плагиндерді жеке қосуға болады (Bootstrap's individual js/dist/*.js) немесе барлығын бірден bootstrap.jsнемесе кішірейтілген bootstrap.min.js(екеуін де қамтымайды).

Топтаманы (Webpack, Rollup…) пайдалансаңыз /js/dist/*.js, UMD дайын файлдарды пайдалануға болады.

Тәуелділіктер

Кейбір плагиндер мен CSS құрамдастары басқа плагиндерге байланысты. Плагиндерді жеке қоссаңыз, құжаттарда осы тәуелділіктерді тексеріңіз. Сондай-ақ, барлық плагиндер jQuery-ге тәуелді екенін ескеріңіз (бұл jQuery плагин файлдарынан бұрын қосылуы керек дегенді білдіреді ). jQuery нұсқасының қай нұсқаларына қолдау көрсетілетінін көру үшін бізбен кеңесіңіз .package.json

Біздің ашылмалы тізімдер, қалқымалы тізімдер және құралдар кеңестері де 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. Белгілі бір плагин данасын алғыңыз келсе, оны тікелей элементтен шығарып алыңыз: $('[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 !!

Әдепкі параметрлер

Constructor.DefaultПлагин нысанын өзгерту арқылы плагиннің әдепкі параметрлерін өзгертуге болады :

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

Қақтығыс жоқ

Кейде басқа UI құрылымдарымен Bootstrap плагиндерін пайдалану қажет. Мұндай жағдайларда аттар кеңістігінің соқтығысуы кейде орын алуы мүмкін. Бұл орын алса, .noConflictмәнін қайтарғыңыз келетін плагинге қоңырау шалуыңызға болады.

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

Нұсқа нөмірлері

Bootstrap jQuery плагиндерінің әрқайсысының нұсқасына VERSIONплагин конструкторының қасиеті арқылы қол жеткізуге болады. Мысалы, көмекші плагин үшін:

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

JavaScript өшірілген кезде арнайы резервтер жоқ

Bootstrap плагиндері әсіресе JavaScript өшірілген кезде жақсы жұмыс істемейді. Бұл жағдайда пайдаланушы тәжірибесіне мән берсеңіз, пайдаланушыларыңызға <noscript>жағдайды (және JavaScript-ті қайта қосу жолын) түсіндіру үшін пайдаланыңыз және/немесе өзіңіздің реттелетін резервтеріңізді қосыңыз.

Util

Барлық Bootstrap JavaScript файлдары тәуелді util.jsжәне ол басқа JavaScript файлдарымен қатар қосылуы керек. Егер сіз құрастырылған (немесе кішірейтілген) қолданып жатсаңыз, bootstrap.jsоны қосудың қажеті жоқ — ол қазірдің өзінде бар.

util.jsқызметтік функцияларды және оқиғаларға арналған негізгі көмекшіні transitionEnd, сондай-ақ CSS ауысу эмуляторын қамтиды. Оны басқа плагиндер CSS өту қолдауын тексеру және ілулі ауысуларды ұстау үшін пайдаланады.

Санитизатор

Кеңестер мен 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)
  }
})