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

JQuery ଉପରେ ନିର୍ମିତ ଆମର ଇଚ୍ଛାଧୀନ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ସହିତ ବୁଟଷ୍ଟ୍ରାପକୁ ଜୀବନ୍ତ କର | ପ୍ରତ୍ୟେକ ପ୍ଲଗଇନ୍, ଆମର ତଥ୍ୟ ଏବଂ ପ୍ରୋଗ୍ରାମେଟିକ୍ API ବିକଳ୍ପ, ଏବଂ ଅଧିକ ବିଷୟରେ ଶିଖନ୍ତୁ |

ବ୍ୟକ୍ତିଗତ କିମ୍ବା ସଂକଳିତ |

ପ୍ଲଗଇନଗୁଡିକ ପୃଥକ ଭାବରେ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇପାରେ (ବୁଟଷ୍ଟ୍ରାପ୍ ର ବ୍ୟକ୍ତିଗତ *.jsଫାଇଲଗୁଡିକ ବ୍ୟବହାର କରି), କିମ୍ବା ଏକାସାଙ୍ଗରେ ବ୍ୟବହାର bootstrap.jsକିମ୍ବା ମାଇନିଫାଏଡ୍ bootstrap.min.js(ଉଭୟ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ ନାହିଁ) |

ନିର୍ଭରଶୀଳତା |

କେତେକ ପ୍ଲଗଇନ୍ ଏବଂ 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 (e) {
  if (!data) return e.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 (e) {
  // Action to execute once the collapsible area is expanded
})

ଏଥିସହ ଏକ ପରିବର୍ତ୍ତନକାରୀ ଉପାଦାନ ଉପରେ ଏକ ପଦ୍ଧତି କଲ୍ କୁ ଅଣଦେଖା କରାଯିବ |

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#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ପ୍ଲଗଇନ୍ ର ବସ୍ତୁକୁ ପରିବର୍ତ୍ତନ କରି ଆପଣ ଏକ ପ୍ଲଗଇନ୍ ପାଇଁ ଡିଫଲ୍ଟ ସେଟିଂସମୂହ ପରିବର୍ତ୍ତନ କରିପାରିବେ :

$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to 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.0.0"

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

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

ଉପଯୋଗୀ |

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

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