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

jQuery मा निर्मित हाम्रो वैकल्पिक JavaScript प्लगइनहरूको साथ बुटस्ट्र्यापलाई जीवन्त बनाउनुहोस्। प्रत्येक प्लगइन, हाम्रो डाटा र प्रोग्रामेटिक API विकल्पहरू, र थप बारे जान्नुहोस्।

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

प्लगइनहरू व्यक्तिगत रूपमा समावेश गर्न सकिन्छ (बुटस्ट्र्यापको व्यक्तिगत प्रयोग गरेर js/dist/*.js), वा सबै एकैचोटि प्रयोग गरी bootstrap.jsवा मिनिफाइड bootstrap.min.js(दुवै समावेश नगर्नुहोस्)।

यदि तपाइँ बन्डलर (वेबप्याक, रोलअप...) प्रयोग गर्नुहुन्छ भने, तपाइँ /js/dist/*.jsफाइलहरू प्रयोग गर्न सक्नुहुन्छ जुन UMD तयार छन्।

निर्भरताहरू

केही प्लगइनहरू र 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 (event) {
  if (!data) {
    return event.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 (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>तपाइँका प्रयोगकर्ताहरूलाई स्थिति (र कसरी JavaScript पुन: सक्षम गर्ने) व्याख्या गर्न प्रयोग गर्नुहोस्, र/वा तपाइँको आफ्नै अनुकूल फलब्याकहरू थप्नुहोस्।

उपयोगिता

सबै बुटस्ट्र्यापको JavaScript फाइलहरू निर्भर हुन्छन् util.jsर यसलाई अन्य JavaScript फाइलहरूसँगै समावेश गर्नुपर्छ। यदि तपाइँ कम्पाइल गरिएको (वा मिनिफाइड) प्रयोग गर्दै हुनुहुन्छ भने bootstrap.js, यो समावेश गर्न आवश्यक छैन - यो पहिले नै त्यहाँ छ।

util.jsउपयोगिता प्रकार्यहरू र transitionEndघटनाहरूको लागि आधारभूत सहायकका साथै CSS संक्रमण इमुलेटर समावेश गर्दछ। यो अन्य प्लगइनहरू द्वारा CSS संक्रमण समर्थनको लागि जाँच गर्न र ह्याङ्गिङ ट्रान्जिसनहरू समात्न प्रयोग गरिन्छ।

सेनिटाइजर

Tooltips र Popovers ले 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)
  }
})