JavaScript

jQuery මත ගොඩනගා ඇති අපගේ විකල්ප JavaScript ප්ලගීන සමඟ Bootstrap ජීවමාන කරන්න. එක් එක් ප්ලගිනය, අපගේ දත්ත සහ ක්‍රමලේඛන API විකල්ප, සහ තවත් දේ ගැන ඉගෙන ගන්න.

තනි හෝ සම්පාදනය කරන ලදී

ප්ලගීන තනි තනිව ඇතුළත් කළ හැක (Bootstrap හි තනි භාවිතයෙන් js/dist/*.js), හෝ එකවර භාවිතා කිරීම bootstrap.jsහෝ minified bootstrap.min.js(දෙකම ඇතුළත් නොකරන්න).

ඔබ බණ්ඩලරයක් භාවිතා කරන්නේ නම් (වෙබ්පැක්, රෝල්අප්...), ඔබට /js/dist/*.jsUMD සූදානම් ගොනු භාවිතා කළ හැක.

යැපීම්

සමහර ප්ලගින සහ CSS සංරචක වෙනත් ප්ලගීන මත රඳා පවතී. ඔබ තනි තනිව ප්ලගීන ඇතුළත් කරන්නේ නම්, ලේඛනවල මෙම පරායත්තතා පරීක්ෂා කිරීමට වග බලා ගන්න. සියලුම ප්ලගීන jQuery මත රඳා පවතින බව සලකන්න (මෙයින් අදහස් කරන්නේ ප්ලගින ගොනු වලට පෙර jQuery ඇතුළත් කළ යුතු බවයි). jQuery හි කුමන අනුවාද සඳහා සහය දක්වන්නේද යන්න බැලීමට අපගේ උපදෙස් ලබා ගන්න.package.json

අපගේ dropdowns, popovers සහ මෙවලම් ඉඟි ද Popper.js මත රඳා පවතී .

දත්ත ගුණාංග

සියලුම Bootstrap ප්ලගීන පාහේ සක්‍රිය කර වින්‍යාසගත කළ හැක්කේ දත්ත උපලක්ෂණ සමඟින් HTML හරහා පමණි (JavaScript ක්‍රියාකාරීත්වය භාවිතා කිරීමට අප කැමති ක්‍රමය). තනි මූලද්‍රව්‍යයක් මත එක් දත්ත උපලක්ෂණ කට්ටලයක් පමණක් භාවිතා කිරීමට වග බලා ගන්න (උදා, ඔබට එම බොත්තමෙන් මෙවලම් ඉඟියක් සහ මාදිලියක් ක්‍රියාරම්භ කළ නොහැක.)

කෙසේ වෙතත්, සමහර අවස්ථාවන්හිදී මෙම ක්‍රියාකාරීත්වය අක්‍රිය කිරීම යෝග්‍ය විය හැක. දත්ත උපලක්ෂණ API අක්‍රිය කිරීමට, ලේඛනයේ ඇති සියලුම සිදුවීම් පහත පරිදි ඇති නාම පරතරයෙන් ඉවත් data-apiකරන්න:

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

විකල්පයක් ලෙස, නිශ්චිත ප්ලගිනයක් ඉලක්ක කිරීමට, ප්ලගිනයේ නම නාම අවකාශයක් ලෙස දත්ත-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

JavaScript API හරහා ඔබට සියලුම Bootstrap ප්ලගීන භාවිතා කිරීමට හැකි වනු ඇතැයි අපි විශ්වාස කරමු. සියලුම පොදු 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"

ජාවාස්ක්‍රිප්ට් අක්‍රිය කර ඇති විට විශේෂ පසුබෑමක් නොමැත

ජාවාස්ක්‍රිප්ට් අක්‍රිය කර ඇති විට බූට්ස්ට්‍රැප් ප්ලගීන විශේෂයෙන් අලංකාර ලෙස ආපසු නොවැටේ. ඔබ මෙම අවස්ථාවෙහි පරිශීලක අත්දැකීම ගැන සැලකිලිමත් වන්නේ නම්, <noscript>ඔබගේ පරිශීලකයින්ට තත්වය (සහ JavaScript නැවත සක්‍රිය කරන්නේ කෙසේද) පැහැදිලි කිරීමට භාවිතා කරන්න, සහ/හෝ ඔබේම අභිරුචි පසුබැසීමක් එක් කරන්න.

උපයෝගී

සියලුම Bootstrap හි JavaScript ගොනු රඳා පවතින util.jsඅතර එය අනෙකුත් JavaScript ගොනු සමඟ ඇතුළත් කළ යුතුය. ඔබ සම්පාදනය කරන ලද (හෝ කුඩා කළ) භාවිතා කරන්නේ නම් bootstrap.js, මෙය ඇතුළත් කිරීමට අවශ්‍ය නැත - එය දැනටමත් තිබේ.

util.jsඋපයෝගිතා කාර්යයන් සහ transitionEndසිදුවීම් සඳහා මූලික සහායකයක් මෙන්ම CSS සංක්‍රාන්ති ඉමුලේටරයක්ද ඇතුළත් වේ. එය CSS සංක්‍රාන්ති සහාය සඳහා පරීක්ෂා කිරීමට සහ එල්ලෙන සංක්‍රාන්ති අල්ලා ගැනීමට අනෙකුත් ප්ලගීන විසින් භාවිතා කරයි.

සනීපාරක්ෂක

HTML පිළිගන්නා විකල්ප සනීපාරක්ෂාව සඳහා මෙවලම් ඉඟි සහ Popovers අපගේ බිල්ට් සනීපාරක්ෂක භාවිතා කරයි.

පෙරනිමි 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)
  }
})