JavaScript

Бо плагинҳои ихтиёрии JavaScript-и мо, ки дар jQuery сохта шудаанд, Bootstrap-ро зинда кунед. Дар бораи ҳар як плагин, маълумот ва имконоти барномавии API ва ғайра маълумот гиред.

Инфиродӣ ё ҷамъоварӣ

Васлкунакҳо метавонанд ба таври инфиродӣ дохил карда шаванд (бо истифода аз Bootstrap инфиродӣ js/dist/*.js) ё ҳама якбора бо истифода bootstrap.jsё хурдкардашуда bootstrap.min.js(ҳардуро дар бар намегиранд).

Агар шумо бастасозро истифода баред (Webpack, Rollup…), шумо метавонед /js/dist/*.jsфайлҳоеро, ки UMD омодаанд, истифода баред.

Вобастагӣ

Баъзе плагинҳо ва ҷузъҳои CSS аз плагинҳои дигар вобастаанд. Агар шумо плагинҳоро ба таври инфиродӣ дохил кунед, боварӣ ҳосил кунед, ки ин вобастагиҳоро дар ҳуҷҷатҳо тафтиш кунед. Инчунин қайд кунед, ки ҳама плагинҳо аз jQuery вобастаанд (ин маънои онро дорад, ки jQuery бояд пеш аз файлҳои плагин дохил карда шавад). Ба моpackage.json муроҷиат кунед, то бубинед, ки кадом версияҳои jQuery дастгирӣ мешаванд.

Намунаҳои афтанда, попопверҳо ва маслиҳатҳои мо низ аз Popper.js вобастаанд .

Аттрибутҳои маълумот

Тақрибан ҳамаи плагинҳои Bootstrap метавонанд танҳо тавассути HTML бо атрибутҳои додаҳо фаъол ва танзим карда шаванд (роҳи бартарии мо барои истифодаи функсияҳои JavaScript). Боварӣ ҳосил кунед, ки танҳо як маҷмӯи атрибутҳои маълумотро дар як элемент истифода баред (масалан, шумо наметавонед як маслиҳати абзор ва модалиро аз як тугма ангезед.)

Бо вуҷуди ин, дар баъзе ҳолатҳо он метавонад матлуб бошад, ки ин функсияро хомӯш кунед. Барои ғайрифаъол кардани аттрибутҳои додаҳо API, ҳама рӯйдодҳоро дар ҳуҷҷат бо номи фосилаи зерин ҷудо data-apiкунед:

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

Интихобан, барои ҳадафи як плагини мушаххас, танҳо номи плагинро ҳамчун фазои ном дар якҷоягӣ бо фазои номи data-api дохил кунед:

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

Ҳодисаҳо

Bootstrap рӯйдодҳои фармоиширо барои амалҳои беназири аксари плагинҳо таъмин мекунад. Одатан, инҳо дар шакли пасванд ва замони гузашта меоянд - дар он ҷо масдар (масалан show) дар оғози ҳодиса ва шакли пасванди он (масалан shown) дар анҷоми амал ба вуҷуд меояд.

Ҳама рӯйдодҳои инфинитивӣ preventDefault()функсияро таъмин мекунанд. Ин имкон медиҳад, ки иҷрои амалро пеш аз оғози он қатъ кунед. Баргардонидани хато аз коркардкунандаи рӯйдод инчунин ба таври худкор занг мезанад preventDefault().

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

API-и барномавӣ

Мо инчунин боварӣ дорем, ки шумо бояд ҳамаи плагинҳои Bootstrap-ро танҳо тавассути API JavaScript истифода баред. Ҳама 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

Не низоъ

Баъзан лозим меояд, ки плагинҳои Bootstrap-ро бо дигар чаҳорчӯбаҳои UI истифода баред. Дар ин шароит, бархӯрдҳои фазои номҳо баъзан рух дода метавонанд. Агар ин рӯй диҳад, шумо метавонед .noConflictба плагин занг занед, ки мехоҳед арзиши онро баргардонед.

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

Рақамҳои версия

Ба версияи ҳар як плагинҳои jQuery Bootstrap тавассути VERSIONмоликияти созандаи плагин дастрас шудан мумкин аст. Масалан, барои плагини асбобҳо:

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

Ҳангоми ғайрифаъол будани JavaScript ягон бозгашти махсус вуҷуд надорад

Васлкунакҳои Bootstrap ҳангоми хомӯш кардани JavaScript ба таври возеҳ намеафтанд. Агар шумо дар бораи таҷрибаи корбар дар ин ҳолат ғамхорӣ кунед, <noscript>барои шарҳ додани вазъият (ва чӣ гуна JavaScript-ро аз нав фаъол кардан) ба корбарони худ истифода баред ва/ё нусхаҳои фармоишии худро илова кунед.

Утил

Ҳама файлҳои JavaScript-и Bootstrap аз он вобастаанд 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)
  }
})