জাভাস্ক্রিপ্ট

jQuery-এ নির্মিত আমাদের ঐচ্ছিক জাভাস্ক্রিপ্ট প্লাগইনগুলির সাহায্যে বুটস্ট্র্যাপকে প্রাণবন্ত করুন। প্রতিটি প্লাগইন, আমাদের ডেটা এবং প্রোগ্রাম্যাটিক API বিকল্প এবং আরও অনেক কিছু সম্পর্কে জানুন।

স্বতন্ত্র বা সংকলিত

প্লাগইনগুলি পৃথকভাবে অন্তর্ভুক্ত করা যেতে পারে (বুটস্ট্র্যাপের ব্যক্তিগত ব্যবহার করে js/dist/*.js), বা সবগুলি একবারে ব্যবহার করে bootstrap.jsবা ছোট করা bootstrap.min.js(উভয়টি অন্তর্ভুক্ত করবেন না)।

আপনি যদি একটি বান্ডলার ব্যবহার করেন (ওয়েবপ্যাক, রোলআপ…), আপনি /js/dist/*.jsফাইলগুলি ব্যবহার করতে পারেন যা ইউএমডি প্রস্তুত।

নির্ভরতা

কিছু প্লাগইন এবং CSS উপাদান অন্যান্য প্লাগইনের উপর নির্ভর করে। আপনি যদি পৃথকভাবে প্লাগইনগুলি অন্তর্ভুক্ত করেন, তাহলে ডক্সে এই নির্ভরতাগুলি পরীক্ষা করা নিশ্চিত করুন৷ এছাড়াও মনে রাখবেন যে সমস্ত প্লাগইন jQuery এর উপর নির্ভর করে ( এর মানে প্লাগইন ফাইলের আগে jQuery অন্তর্ভুক্ত করা আবশ্যক )। jQuery এর কোন সংস্করণগুলি সমর্থিত তা দেখতে আমাদের সাথে যোগাযোগ করুন৷package.json

আমাদের ড্রপডাউন, পপোভার এবং টুলটিপগুলিও Popper.js- এর উপর নির্ভর করে ।

ডেটা বৈশিষ্ট্য

প্রায় সব বুটস্ট্র্যাপ প্লাগইন শুধুমাত্র এইচটিএমএল-এর মাধ্যমে ডেটা অ্যাট্রিবিউট (জাভাস্ক্রিপ্ট কার্যকারিতা ব্যবহার করার আমাদের পছন্দের উপায়) দিয়ে সক্ষম এবং কনফিগার করা যেতে পারে। একটি একক উপাদানে শুধুমাত্র এক সেট ডেটা অ্যাট্রিবিউট ব্যবহার করতে ভুলবেন না (যেমন, আপনি একই বোতাম থেকে টুলটিপ এবং মডেল ট্রিগার করতে পারবেন না।)

যাইহোক, কিছু পরিস্থিতিতে এই কার্যকারিতা অক্ষম করা বাঞ্ছনীয় হতে পারে। ডেটা অ্যাট্রিবিউট 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>পরিস্থিতি (এবং কীভাবে জাভাস্ক্রিপ্ট পুনরায় সক্ষম করবেন) ব্যাখ্যা করতে এবং/অথবা আপনার নিজস্ব কাস্টম ফলব্যাক যোগ করুন।

ইউটিল

সমস্ত বুটস্ট্র্যাপের জাভাস্ক্রিপ্ট ফাইল নির্ভর করে util.jsএবং এটি অন্যান্য জাভাস্ক্রিপ্ট ফাইলগুলির সাথে অন্তর্ভুক্ত করতে হবে। আপনি যদি কম্পাইল করা (বা মিনিফাইড) ব্যবহার করেন bootstrap.js, তাহলে এটিকে অন্তর্ভুক্ত করার দরকার নেই—এটি ইতিমধ্যেই আছে।

util.jsইউটিলিটি ফাংশন এবং ইভেন্টের জন্য একটি মৌলিক সাহায্যকারীর transitionEndপাশাপাশি একটি CSS ট্রানজিশন এমুলেটর অন্তর্ভুক্ত করে। এটি অন্যান্য প্লাগইন দ্বারা 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)
  }
})