ଜାଭାସ୍କ୍ରିପ୍ଟ |

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')

ବ ly କଳ୍ପିକ ଭାବରେ, ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ପ୍ଲଗଇନ୍ କୁ ଟାର୍ଗେଟ୍ କରିବାକୁ, ପ୍ଲଗଇନ୍ ର ନାମକୁ ଏକ ନାମ ସ୍ପେସ୍ ଭାବରେ ଡାଟା-ଆପି ନାମସ୍ପେସ୍ ସହିତ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ:

$(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

ଆମେ ମଧ୍ୟ ବିଶ୍ believe ାସ କରୁ ଯେ ଆପଣ ଜାଭାସ୍କ୍ରିପ୍ଟ API ମାଧ୍ୟମରେ ସମସ୍ତ ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରିବାକୁ ସମର୍ଥ ହେବା ଉଚିତ୍ | ସମସ୍ତ ସାର୍ବଜନୀନ API ଗୁଡିକ ଏକକ, ଶୃଙ୍ଖଳିତ ପଦ୍ଧତି, ଏବଂ କାର୍ଯ୍ୟ ଉପରେ ସଂଗ୍ରହକୁ ଫେରସ୍ତ କରନ୍ତୁ |

$('.btn.danger').button('toggle').addClass('fat')

ସମସ୍ତ ପଦ୍ଧତି ଏକ ବ al କଳ୍ପିକ ବିକଳ୍ପ ବସ୍ତୁ ଗ୍ରହଣ କରିବା ଉଚିତ, ଏକ ଷ୍ଟ୍ରିଙ୍ଗ ଯାହା ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ପଦ୍ଧତିକୁ ଟାର୍ଗେଟ କରେ, କିମ୍ବା କିଛି ନୁହେଁ (ଯାହା ଡିଫଲ୍ଟ ଆଚରଣ ସହିତ ଏକ ପ୍ଲଗଇନ୍ ଆରମ୍ଭ କରେ):

$('#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

କ conflict ଣସି ବିବାଦ ନାହିଁ |

ବେଳେବେଳେ ଅନ୍ୟ UI framework ାଞ୍ଚା ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରିବା ଆବଶ୍ୟକ | ଏହି ପରିସ୍ଥିତିରେ, ନାମପେସ୍ ଧକ୍କା ବେଳେବେଳେ ହୋଇପାରେ | .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.6.2"

ଜାଭାସ୍କ୍ରିପ୍ଟ ଅକ୍ଷମ ହେଲେ କ special ଣସି ବିଶେଷ ତ୍ରୁଟି ନାହିଁ |

ଜାଭାସ୍କ୍ରିପ୍ଟ ଅକ୍ଷମ ହେଲେ ବୁଟଷ୍ଟ୍ରାପର ପ୍ଲଗଇନଗୁଡ଼ିକ ବିଶେଷ ଭାବରେ ଅନୁଗ୍ରହରେ ଫେରି ନଥାଏ | ଯଦି ଆପଣ ଏହି କ୍ଷେତ୍ରରେ ଉପଭୋକ୍ତା ଅଭିଜ୍ଞତା ବିଷୟରେ ଚିନ୍ତା କରନ୍ତି, ତେବେ ଆପଣଙ୍କର ଉପଭୋକ୍ତାମାନଙ୍କୁ <noscript>ପରିସ୍ଥିତି (ଏବଂ କିପରି ଜାଭାସ୍କ୍ରିପ୍ଟକୁ ପୁନ - ସକ୍ଷମ କରିବେ) ବୁ explain ାଇବାକୁ ବ୍ୟବହାର କରନ୍ତୁ, ଏବଂ / କିମ୍ବା ଆପଣଙ୍କର ନିଜସ୍ୱ କଷ୍ଟମ୍ ଫଲବ୍ୟାକ୍ ଯୋଡନ୍ତୁ |

ଉପଯୋଗୀ |

ସମସ୍ତ ବୁଟଷ୍ଟ୍ରାପର ଜାଭାସ୍କ୍ରିପ୍ଟ ଫାଇଲଗୁଡ଼ିକ ଉପରେ ନିର୍ଭର କରେ util.jsଏବଂ ଏହାକୁ ଅନ୍ୟ ଜାଭାସ୍କ୍ରିପ୍ଟ ଫାଇଲଗୁଡ଼ିକ ସହିତ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ପଡିବ | ଯଦି ଆପଣ ସଙ୍କଳିତ (କିମ୍ବା କ୍ଷୁଦ୍ର) ବ୍ୟବହାର କରୁଛନ୍ତି bootstrap.js, ଏହାକୁ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାର କ is ଣସି ଆବଶ୍ୟକତା ନାହିଁ - ଏହା ପୂର୍ବରୁ ଅଛି |

util.jsଇଭେଣ୍ଟଗୁଡିକ ପାଇଁ ୟୁଟିଲିଟି ଫଙ୍କସନ୍ ଏବଂ ଏକ ମ basic ଳିକ ସହାୟକ ଏବଂ transitionEndCSS ଟ୍ରାନ୍ସମିସନ୍ ଏମୁଲେଟର ଅନ୍ତର୍ଭୂକ୍ତ କରେ | ଏହା ଅନ୍ୟ ପ୍ଲଗଇନ୍ ଦ୍ୱାରା CSS ସ୍ଥାନାନ୍ତରଣ ସମର୍ଥନ ଯା check ୍ଚ କରିବା ଏବଂ ଫାଶୀ ସ୍ଥାନାନ୍ତରଣକୁ ଧରିବା ପାଇଁ ବ୍ୟବହୃତ ହୁଏ |

ସାନିଟାଇଜର

ଟୁଲ୍ ଟିପ୍ସ ଏବଂ ପପୋଭର୍ସ ଆମର ବିଲ୍ଟ-ଇନ୍ ସାନିଟାଇଜର ବ୍ୟବହାର କରେ ଯାହା 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)
  }
})