JavaScript

გააცოცხლეთ Bootstrap ჩვენი არჩევითი JavaScript დანამატებით, რომლებიც აგებულია jQuery-ზე. შეიტყვეთ თითოეული მოდულის, ჩვენი მონაცემებისა და პროგრამული API პარამეტრების შესახებ და სხვა.

ინდივიდუალური ან შედგენილი

დანამატები შეიძლება ჩაერთოს ინდივიდუალურად (Bootstrap-ის ინდივიდუალური გამოყენებით js/dist/*.js), ან ერთდროულად გამოყენებით bootstrap.jsან შემცირებული bootstrap.min.js(არ მოიცავს ორივეს).

თუ იყენებთ Bundler-ს (Webpack, Rollup…), შეგიძლიათ გამოიყენოთ /js/dist/*.jsფაილები, რომლებიც მზადაა UMD.

დამოკიდებულებები

ზოგიერთი დანამატი და CSS კომპონენტი დამოკიდებულია სხვა დანამატებზე. თუ ინდივიდუალურად ჩართავთ დანამატებს, დარწმუნდით, რომ შეამოწმეთ ეს დამოკიდებულებები დოკუმენტებში. ასევე გაითვალისწინეთ, რომ ყველა დანამატი დამოკიდებულია jQuery-ზე (ეს ნიშნავს, რომ jQuery უნდა იყოს ჩართული დანამატის ფაილებამდე) . გაიარეთ კონსულტაციაpackage.json , რომ ნახოთ jQuery-ის რომელი ვერსიებია მხარდაჭერილი.

ჩვენი ჩამოსაშლელი ფაილები, პოპოვერები და ინსტრუმენტების რჩევები ასევე დამოკიდებულია 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. თუ გსურთ მიიღოთ კონკრეტული მოდულის მაგალითი, აიღეთ იგი პირდაპირ ელემენტიდან: $('[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 !!

ნაგულისხმევი პარამეტრები

თქვენ შეგიძლიათ შეცვალოთ მოდულის ნაგულისხმევი პარამეტრები მოდულის შეცვლით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 მოდულის კონსტრუქტორის საკუთრების მეშვეობით. მაგალითად, ხელსაწყოების მოდულისთვის:

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

არ არის სპეციალური ჩანაცვლება, როდესაც 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', '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)
  }
})