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

jQuery पर निर्मित हमर वैकल्पिक जावास्क्रिप्ट प्लगइन के साथ बूटस्ट्रैप के जीवन में लाउ | प्रत्येक प्लगइन, हमर डाटा आ प्रोग्रामेटिक एपीआई विकल्प, आओर बहुत किछु के बारे मे जानू.

व्यक्तिगत या संकलित

प्लगइन कें व्यक्तिगत रूप सं शामिल कैल जा सकय छै (बूटस्ट्रैप कें व्यक्तिगत कें उपयोग करयत js/dist/*.js), या सबटा एकहि बेर मे उपयोग करयत bootstrap.jsया लघुकृत कैल जा सकय छै bootstrap.min.js(दुनू कें शामिल नहि करूं).

यदि अहां बंडलर (वेबपैक, रोलअप...) कें उपयोग करय छी, त अहां /js/dist/*.jsओय फाइल कें उपयोग कयर सकय छी जे यूएमडी तैयार छै.

निर्भरताएँ

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

हमर ड्रॉपडाउन, पॉपओवर आओर टूलटिप सेहो Popper.js पर निर्भर करैत अछि .

डेटा विशेषताएँ

लगभग सब बूटस्ट्रैप प्लगइन क॑ असगर एचटीएमएल के माध्यम स॑ डाटा विशेषता (जावास्क्रिप्ट कार्यक्षमता के उपयोग करै के हमरऽ पसंदीदा तरीका) के साथ सक्षम आरू कॉन्फ़िगर करलऽ जाब॑ सकै छै । एकटा तत्व पर केवल डेटा विशेषताक कें एकटा सेट कें उपयोग करनाय सुनिश्चित करूं (जैना, अहां एकहि बटन सं टूलटिप आ मोडल कें ट्रिगर नहि कयर सकय छी.)

मुदा किछु परिस्थिति मे एहि कार्यक्षमता केँ अक्षम करब वांछनीय भ' सकैत अछि. डाटा विशेषता एपीआई कें अक्षम करय कें लेल, दस्तावेज पर सबटा घटनाक कें अनबाइंड करूं data-apiजे ऐहन कें साथ नामस्थान करल गेल छै:

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

वैकल्पिक रूप सं, कोनों विशिष्ट प्लगइन कें लक्षित करय कें लेल, बस प्लगइन कें नाम कें एकटा नेमस्पेस कें रूप मे डाटा-एपीआई नेमस्पेस कें साथ अइ तरह शामिल करूं:

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

घटनाक्रम

बूटस्ट्रैप अधिकांश प्लगइन कें अद्वितीय क्रियाक कें लेल कस्टम घटना प्रदान करयत छै. सामान्यतः ई सब अव्यय आ भूतकाल रूप मे अबैत अछि - जतय showकोनो घटनाक आरम्भ मे अव्यय (ex. ) ट्रिगर होइत अछि , आ ओकर भूतपूर्व कर्मधारय रूप (ex. shown) कोनो क्रियाक पूर्णता पर ट्रिगर होइत अछि |

सब अव्यय घटना preventDefault()कार्यक्षमता प्रदान करैत अछि। एहि स कोनो क्रिया क शुरू होएबा स पहिने ओकर निष्पादन कए रोकबाक क्षमता भेटैत अछि । कोनो इवेंट हैंडलर सँ false वापस करब सेहो स्वतः कॉल करत 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

कोनो द्वंद्व नहि

कखनो काल अन्य यूआई फ्रेमवर्क के साथ बूटस्ट्रैप प्लगइन के उपयोग करनाय आवश्यक भ जायत छै. एहि परिस्थिति मे नेमस्पेस टक्कर कखनो काल भ सकैत अछि । यदि एहन भ' गेल त' अहाँ .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>स्थिति कें समझाबय कें लेल (आ जावास्क्रिप्ट कें पुनः सक्षम करय कें तरीका) कें उपयोग करूं, आ/अथवा अपन खुद कें कस्टम फॉलबैक जोड़ूं.

उपयोगिता

बूटस्ट्रैप केरऽ सब जावास्क्रिप्ट फाइलऽ प॑ निर्भर करै छै util.jsआरू एकरा अन्य जावास्क्रिप्ट फाइलऽ के साथ-साथ शामिल करना छै । यदि अहाँ संकलित (अथवा लघुकृत) क' प्रयोग कए रहल छी bootstrap.js, तँ एकरा शामिल करबाक कोनो आवश्यकता नहि अछि-ई पहिनेसँ अछि ।

util.jsउपयोगिता कार्यक आ transitionEndघटनाक कें लेल एकटा बुनियादी सहायक कें साथ-साथ एकटा सीएसएस संक्रमण एमुलेटर शामिल छै. एकरऽ उपयोग अन्य प्लगइन द्वारा CSS संक्रमण समर्थन केरऽ जांच करै लेली आरू लटकलऽ संक्रमण क॑ पकड़ै लेली करलऽ जाय छै ।

सेनेटाइजर

टूलटिप्स आरू पोपोवर्स हमरऽ बिल्ट-इन सेनेटाइजर के उपयोग ऐ���्हऽ विकल्पऽ क॑ सेनेटाइज करै लेली करै छै जे एचटीएमएल क॑ स्वीकार करै छै ।

पूर्वनिर्धारित 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)
  }
})