ஜாவாஸ்கிரிப்ட்

jQuery இல் கட்டமைக்கப்பட்ட எங்கள் விருப்பமான ஜாவாஸ்கிரிப்ட் செருகுநிரல்களுடன் பூட்ஸ்டார்ப்பை உயிர்ப்பிக்கவும். ஒவ்வொரு செருகுநிரல், எங்கள் தரவு மற்றும் நிரல் API விருப்பங்கள் மற்றும் பலவற்றைப் பற்றி அறிக.

தனிப்பட்ட அல்லது தொகுக்கப்பட்ட

செருகுநிரல்கள் தனித்தனியாக சேர்க்கப்படலாம் (பூட்ஸ்டார்ப்பின் தனிநபரைப் பயன்படுத்தி js/dist/*.js), அல்லது அனைத்தையும் ஒரே நேரத்தில் பயன்படுத்துதல் bootstrap.jsஅல்லது சிறியது bootstrap.min.js(இரண்டையும் சேர்க்க வேண்டாம்).

நீங்கள் ஒரு பண்ட்லரைப் பயன்படுத்தினால் (வெப்பேக், ரோல்அப்...), /js/dist/*.jsUMD தயாராக இருக்கும் கோப்புகளைப் பயன்படுத்தலாம்.

சார்புநிலைகள்

சில செருகுநிரல்கள் மற்றும் CSS கூறுகள் மற்ற செருகுநிரல்களைப் பொறுத்தது. நீங்கள் தனித்தனியாக செருகுநிரல்களைச் சேர்த்தால், ஆவணத்தில் இந்த சார்புகளை சரிபார்க்கவும். அனைத்து செருகுநிரல்களும் jQuery ஐச் சார்ந்துள்ளது என்பதை நினைவில் கொள்ளவும் (இதன் பொருள் செருகுநிரல் கோப்புகளுக்கு முன் jQuery சேர்க்கப்பட வேண்டும் ). jQuery இன் எந்த பதிப்புகள் ஆதரிக்கப்படுகின்றன என்பதைப் பார்க்க, எங்களைப் பார்க்கவும்.package.json

எங்கள் டிராப் டவுன்கள், பாப்ஓவர்கள் மற்றும் டூல்டிப்களும் Popper.js ஐச் சார்ந்தது .

தரவு பண்புக்கூறுகள்

கிட்டத்தட்ட அனைத்து பூட்ஸ்டார்ப் செருகுநிரல்களையும் தரவு பண்புக்கூறுகளுடன் HTML மூலம் மட்டுமே இயக்கலாம் மற்றும் கட்டமைக்கலாம் (ஜாவாஸ்கிரிப்ட் செயல்பாட்டைப் பயன்படுத்துவதற்கான எங்கள் விருப்பமான வழி). ஒரு தனிமத்தில் ஒரு தரவுப் பண்புக்கூறுகளை மட்டுமே பயன்படுத்துவதை உறுதிப்படுத்திக் கொள்ளுங்கள் (எ.கா., ஒரே பொத்தானில் இருந்து ஒரு உதவிக்குறிப்பு மற்றும் மாதிரியைத் தூண்ட முடியாது.)

இருப்பினும், சில சூழ்நிலைகளில் இந்த செயல்பாட்டை முடக்குவது விரும்பத்தக்கதாக இருக்கலாம். தரவு பண்புக்கூறு API ஐ முடக்க, ஆவணத்தில் உள்ள அனைத்து நிகழ்வுகளையும் இது data-apiபோன்ற இடங்களைக் கொண்டு பிரிக்கவும்:

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

மாற்றாக, ஒரு குறிப்பிட்ட செருகுநிரலைக் குறிவைக்க, இது போன்ற டேட்டா-ஏபிஐ பெயர்வெளியுடன் சொருகியின் பெயரை ஒரு பெயர்வெளியாகச் சேர்க்கவும்:

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

நிகழ்வுகள்

பெரும்பாலான செருகுநிரல்களின் தனிப்பட்ட செயல்களுக்கான தனிப்பயன் நிகழ்வுகளை பூட்ஸ்டார்ப் வழங்குகிறது. showபொதுவாக, இவை ஒரு முடிவிலி மற்றும் கடந்த பங்கேற்பு வடிவத்தில் வரும் - ஒரு நிகழ்வின் தொடக்கத்தில் முடிவிலி (எ.கா. ) தூண்டப்படுகிறது, மேலும் அதன் கடந்த பங்கேற்பு வடிவம் (எ.கா. shown) ஒரு செயலின் முடிவில் தூண்டப்படுகிறது.

அனைத்து முடிவிலி நிகழ்வுகளும் preventDefault()செயல்பாட்டை வழங்குகின்றன. இது ஒரு செயலைத் தொடங்கும் முன் அதைச் செயல்படுத்துவதை நிறுத்தும் திறனை வழங்குகிறது. நிகழ்வு ஹேண்ட்லரிடமிருந்து தவறு எனத் திரும்பினால் தானாகவே அழைக்கப்படும் preventDefault().

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

நிரல் API

ஜாவாஸ்கிரிப்ட் 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

மோதல் இல்லை

சில நேரங்களில் மற்ற UI கட்டமைப்புகளுடன் பூட்ஸ்டார்ப் செருகுநிரல்களைப் பயன்படுத்துவது அவசியம். இந்த சூழ்நிலைகளில், பெயர்வெளி மோதல்கள் அவ்வப்போது நிகழலாம். .noConflictஇது நடந்தால், நீங்கள் மதிப்பை மாற்ற விரும்பும் செருகுநிரலை அழைக்கலாம் .

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

பதிப்பு எண்கள்

VERSIONபூட்ஸ்டார்ப்பின் ஒவ்வொரு jQuery செருகுநிரல்களின் பதிப்பையும் செருகுநிரல் கட்டமைப்பாளரின் சொத்து வழியாக அணுகலாம் . எடுத்துக்காட்டாக, உதவிக்குறிப்பு செருகுநிரலுக்கு:

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

ஜாவாஸ்கிரிப்ட் முடக்கப்பட்டிருக்கும் போது சிறப்பு குறைப்புக்கள் இல்லை

ஜாவாஸ்கிரிப்ட் முடக்கப்பட்டிருக்கும் போது பூட்ஸ்டார்ப்பின் செருகுநிரல்கள் குறிப்பாக அழகாக பின்வாங்குவதில்லை. இந்தச் சந்தர்ப்பத்தில் பயனர் அனுபவத்தைப் பற்றி நீங்கள் அக்கறை கொண்டால் <noscript>, உங்கள் பயனர்களுக்கு நிலைமையை (மற்றும் JavaScript ஐ எவ்வாறு மீண்டும் இயக்குவது) என்பதை விளக்கவும், மற்றும்/அல்லது உங்கள் சொந்த தனிப்பயன் ஃபால்பேக்குகளைச் சேர்க்கவும்.

பயன்

அனைத்து பூட்ஸ்டார்ப்பின் ஜாவாஸ்கிரிப்ட் கோப்புகளும் சார்ந்தது util.jsமற்றும் இது மற்ற ஜாவாஸ்கிரிப்ட் கோப்புகளுடன் சேர்க்கப்பட வேண்டும். நீங்கள் தொகுக்கப்பட்ட (அல்லது minified) பயன்படுத்தினால் bootstrap.js, இதை சேர்க்க வேண்டிய அவசியமில்லை - இது ஏற்கனவே உள்ளது.

util.jsபயன்பாட்டு செயல்பாடுகள் மற்றும் transitionEndநிகழ்வுகளுக்கான அடிப்படை உதவியாளர் மற்றும் CSS மாற்றம் முன்மாதிரி ஆகியவை அடங்கும். இது மற்ற செருகுநிரல்களால் CSS மாற்றத்திற்கான ஆதரவைச் சரிபார்க்கவும் மற்றும் தொங்கும் மாற்றங்களைப் பிடிக்கவும் பயன்படுத்தப்படுகிறது.

சானிடைசர்

உதவிக்குறிப்புகள் மற்றும் பாப்ஓவர்கள் 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)
  }
})