जावास्क्रिप्ट
JQuery पर निर्मित हमारे वैकल्पिक JavaScript प्लगइन्स के साथ बूटस्ट्रैप को जीवंत बनाएं। प्रत्येक प्लग इन, हमारे डेटा और प्रोग्रामेटिक एपीआई विकल्पों, और बहुत कुछ के बारे में जानें।
व्यक्तिगत या संकलित
प्लगइन्स को व्यक्तिगत रूप से शामिल किया जा सकता है (बूटस्ट्रैप के व्यक्तिगत का उपयोग करके js/dist/*.js), या सभी को एक साथ उपयोग करके bootstrap.jsया छोटा किया जा bootstrap.min.jsसकता है (दोनों को शामिल न करें)।
यदि आप एक बंडलर (वेबपैक, रोलअप…) का उपयोग करते हैं, तो आप उन /js/dist/*.jsफ़ाइलों का उपयोग कर सकते हैं जो UMD तैयार हैं।
निर्भरता
कुछ प्लगइन्स और CSS घटक अन्य प्लगइन्स पर निर्भर करते हैं। यदि आप अलग-अलग प्लगइन्स शामिल करते हैं, तो डॉक्स में इन निर्भरताओं की जांच करना सुनिश्चित करें। यह भी ध्यान दें कि सभी प्लगइन्स jQuery पर निर्भर करते हैं (इसका मतलब है कि प्लगइन फाइलों से पहले jQuery को शामिल किया जाना चाहिए)। यह देखने के लिए हमसे परामर्श करेंpackage.json कि jQuery के कौन से संस्करण समर्थित हैं।
हमारे ड्रॉपडाउन, पॉपओवर और टूलटिप्स भी Popper.js पर निर्भर करते हैं ।
डेटा विशेषताएँ
लगभग सभी बूटस्ट्रैप प्लगइन्स को डेटा विशेषताओं (जावास्क्रिप्ट कार्यक्षमता का उपयोग करने का हमारा पसंदीदा तरीका) के साथ अकेले HTML के माध्यम से सक्षम और कॉन्फ़िगर किया जा सकता है। एक तत्व पर डेटा विशेषताओं के केवल एक सेट का उपयोग करना सुनिश्चित करें (उदाहरण के लिए, आप एक ही बटन से टूलटिप और मोडल को ट्रिगर नहीं कर सकते हैं।)
हालाँकि, कुछ स्थितियों में इस कार्यक्षमता को अक्षम करना वांछनीय हो सकता है। डेटा विशेषता API को अक्षम करने के लिए, इस तरह से नामित दस्तावेज़ पर सभी ईवेंट को अनबाइंड data-apiकरें:
$(document).off('.data-api')
वैकल्पिक रूप से, एक विशिष्ट प्लगइन को लक्षित करने के लिए, बस प्लगइन का नाम नामस्थान के रूप में डेटा-एपीआई नेमस्पेस के साथ शामिल करें:
$(document).off('.alert.data-api')
चयनकर्ताओं
वर्तमान में DOM तत्वों को क्वेरी करने के लिए हम मूल विधियों का उपयोग करते हैं querySelectorऔर querySelectorAllप्रदर्शन कारणों से, इसलिए आपको मान्य चयनकर्ताओं का उपयोग करना होगा । यदि आप विशेष चयनकर्ताओं का उपयोग करते हैं, उदाहरण के लिए: collapse:Exampleउनसे बचना सुनिश्चित करें।
आयोजन
बूटस्ट्रैप अधिकांश प्लगइन्स की अनूठी क्रियाओं के लिए कस्टम ईवेंट प्रदान करता है। आम तौर पर, ये एक इनफिनिटिव और पिछले कृदंत रूप में आते हैं - जहां showएक घटना की शुरुआत में इनफिनिटिव (उदा।) ट्रिगर होता है, और इसके पिछले कृदंत रूप (उदा। shown) को एक क्रिया के पूरा होने पर ट्रिगर किया जाता है।
सभी अनंत घटनाएँ preventDefault()कार्यक्षमता प्रदान करती हैं। यह किसी क्रिया के प्रारंभ होने से पहले उसके निष्पादन को रोकने की क्षमता प्रदान करता है। किसी ईवेंट हैंडलर से झूठी वापसी भी स्वचालित रूप से कॉल करेगी preventDefault()।
$('#myModal').on('show.bs.modal', function (event) {
if (!data) {
return event.preventDefault() // stops modal from being shown
}
})
प्रोग्रामेटिक एपीआई
हम यह भी मानते हैं कि आपको पूरी तरह से जावास्क्रिप्ट एपीआई के माध्यम से सभी बूटस्ट्रैप प्लगइन्स का उपयोग करने में सक्षम होना चाहिए। सभी सार्वजनिक एपीआई एकल, श्रृंखलाबद्ध तरीके हैं, और संग्रह पर कार्रवाई की गई है।
$('.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 फ्रेमवर्क के साथ बूटस्ट्रैप प्लगइन्स का उपयोग करना आवश्यक होता है। इन परिस्थितियों में, नामस्थान टकराव कभी-कभी हो सकता है। यदि ऐसा होता है, तो आप .noConflictउस प्लगइन पर कॉल कर सकते हैं जिसका आप मूल्य वापस करना चाहते हैं।
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
संस्करण संख्या
बूटस्ट्रैप के प्रत्येक jQuery प्लगइन के संस्करण को VERSIONप्लगइन के निर्माता की संपत्ति के माध्यम से एक्सेस किया जा सकता है। उदाहरण के लिए, टूलटिप प्लगइन के लिए:
$.fn.tooltip.Constructor.VERSION // => "4.6.2"
जावास्क्रिप्ट अक्षम होने पर कोई विशेष फ़ॉलबैक नहीं
जावास्क्रिप्ट अक्षम होने पर बूटस्ट्रैप के प्लगइन्स विशेष रूप से सुंदर ढंग से वापस नहीं आते हैं। यदि आप इस मामले में उपयोगकर्ता अनुभव की परवाह करते हैं, तो अपने उपयोगकर्ताओं <noscript>को स्थिति की व्याख्या करने के लिए उपयोग करें (और जावास्क्रिप्ट को फिर से कैसे सक्षम करें), और/या अपने स्वयं के कस्टम फ़ॉलबैक जोड़ें।
तृतीय-पक्ष पुस्तकालय
बूटस्ट्रैप आधिकारिक तौर पर प्रोटोटाइप या jQuery UI जैसी तृतीय-पक्ष JavaScript लाइब्रेरी का समर्थन नहीं करता है । घटनाओं के नाम के बावजूद .noConflict, संगतता समस्याएं हो सकती हैं जिन्हें आपको स्वयं ठीक करने की आवश्यकता है।
यूटिलो
बूटस्ट्रैप की सभी जावास्क्रिप्ट फाइलें निर्भर करती हैं util.jsऔर इसे अन्य जावास्क्रिप्ट फाइलों के साथ शामिल किया जाना है। यदि आप संकलित (या छोटा) का उपयोग कर रहे हैं bootstrap.js, तो इसे शामिल करने की कोई आवश्यकता नहीं है—यह पहले से मौजूद है।
util.jsउपयोगिता कार्यों और transitionEndघटनाओं के साथ-साथ एक सीएसएस संक्रमण एमुलेटर के लिए एक बुनियादी सहायक शामिल है। इसका उपयोग अन्य प्लगइन्स द्वारा 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', '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)
}
})