जावास्क्रिप्ट

jQuery चेर तयार केल्ल्या आमच्या पर्यायी जावास्क्रिप्ट प्लगइनांनी Bootstrap जिवीत हाडचें. दरेक प्लगइन, आमचो डेटा आनी प्रोग्रामेटिक API पर्याय, आनी हेर विशीं जाणून घेयात.

वैयक्तीक वा संकलित

प्लगइन वैयक्तीकपणान समाविष्ट करूंक शकतात (Bootstrap's individual वापरून js/dist/*.js), वा सगळे एकाच वेळार वापरून bootstrap.jsवा मिनीफायड bootstrap.min.js(दोनूय समाविष्ट करूंक नाकात).

/js/dist/*.jsतुमी बंडलर वापरतात जाल्यार (Webpack, Rollup...), तुमी UMD तयार आशिल्लीं फायली वापरूं येतात .

अवलंबून आशिल्लीं

कांय प्लगइन आनी CSS घटक हेर प्लगइनांचेर आदारून आसतात. तुमी प्लगइन वैयक्तीकपणान समाविष्ट केल्यार, डॉक्सांत ह्यो अवलंबन तपासपाची खात्री करात. तशेंच लक्षांत दवरात की सगळे प्लगइन jQuery चेर आदारीत आसात (हाचो अर्थ प्लगइन फायलीं पयलीं jQuery समाविष्ट करपाक जाय). jQuery च्या खंयच्या आवृत्त्यांक तेंको आसा तें पळोवपाक आमचो सल्लो घेयात .package.json

आमचे ड्रॉपडावन, पॉपओव्हर आनी टूलटिप्सय Popper.js चेर आदारून आसतात .

डेटा गुणधर्म

लागीं लागीं सगळे Bootstrap प्लगइन डेटा गुणधर्मां सयत फकत HTML वरवीं सक्षम आनी संरचीत करूंक शकतात (जावास्क्रिप्ट कार्यक्षमताय वापरपाची आमची पसंतीची पद्दत). एकाच घटकाचेर फकत एक डेटा गुणधर्मांचो संच वापरपाची खात्री करात (देखीक, तुमी एकाच बटणा वयल्यान साधनटिप आनी मोडल ट्रिगर करूंक शकना.)

पूण कांय परिस्थितींत ही कार्यक्षमताय अक्षम करप गरजेचें आसूं येता. डेटा गुणधर्म API अक्षम करपाक, data-apiअशे तरेन नावस्पेस केल्ल्या दस्तावेजाचेर सगळ्यो घडणुको अनबाइंड करात:

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

पर्यायीपणान, विशिश्ट प्लगइनाक लक्ष्य करपाक, फकत प्लगइनाचे नांव नांवस्थान म्हणून डेटा-api नांवस्थाना वांगडा अशे तरेन समाविष्ट करात:

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

निवड करपी

सद्या DOM घटकांची क्वेरी करपाक आमी मुळ पद्दती वापरतात querySelectorआनी querySelectorAllकार्यक्षमताय कारणांक लागून, देखून तुमकां वैध निवडक वापरचे पडटले . तुमी खाशेले निवडक वापरतात जाल्यार, देखीक: collapse:Exampleतातूंतल्यान सुटपाची खात्री करात.

घडणुको

बूटस्ट्रॅप चडशा प्लगइनांच्या खाशेल्या कृतींखातीर सानुकूल घडणुको पुरवण करता. सादारणपणान हीं अव्यय आनी भूतकाळांत येतात - जंय अव्यय (ex. show) घडणुकेच्या सुरवेक सुरू जाता, आनी ताचें भूतकाळांतलें रूप (ex. shown) क्रिया पुराय जातकच सुरू जाता.

सगळ्यो अव्यय घडणुको preventDefault()कार्यक्षमता दितात. हाका लागून कृती सुरू जावचे पयलीं ताची कार्यान्वयन थांबवपाची तांक मेळटा. इव्हेंट हॅन्डलरा कडल्यान false परत दिल्यार आपसूकय कॉल करतले preventDefault().

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

प्रोग्रामेटिक एपीआय

तशेंच तुमकां सगळे बूटस्ट्रॅप प्लगइन शुध्दपणान जावास्क्रिप्ट एपीआय वरवीं वापरपाक मेळपाक जाय अशें आमी मानतात. सगळे भौशीक 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').

अतुल्यकालिक कार्यां आनी संक्रमणां

सगळ्यो प्रोग्रामेटिक एपीआय पद्दती अतुल्यकालिक आसतात आनी एकदां संक्रमण सुरू जाले उपरांत पूण सोंपचे पयलीं कॉलराक परततात .

संक्रमण पुराय जातकच कृती चालीक लावपाखातीर, तुमी संबंदीत घडणूक आयकूंक शकतात.

$('#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>तुमच्या वापरप्यांक परिस्थिती स्पश्ट करपाक (आनी जावास्क्रिप्ट कशी परतून सक्षम करची) वापरात, आनी/वा तुमचे स्वताचे सानुकूल फॉलबॅक जोडात.

तिसऱ्या पक्षाचीं वाचनालयां

बूटस्ट्रॅप अधिकृतपणान प्रोटोटायप वा jQuery UI सारकिल्या तिसऱ्या पक्षाच्या जावास्क्रिप्ट लायब्ररींक तेंको दिना . आसून लेगीत .noConflictआनी नावस्पेस केल्लीं घडणुको, सुसंगती समस्या आसूं येतात जी तुमकां स्वता सुटावी करची पडटली.

उपयुक्त

सगळ्यो बूटस्ट्रॅपाची जावास्क्रिप्ट फायली आदारून आसतात util.jsआनी हेर जावास्क्रिप्ट फायलीं वांगडा ताचो आस्पाव करचो पडटा. तुमी संकलित (वा ल्हान केल्लें) वापरतात जाल्यार 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)
  }
})