جاوا اسڪرپٽ

jQuery تي ٺهيل اسان جي اختياري جاوا اسڪرپٽ پلگ ان سان بوٽ اسٽريپ کي جاندار بڻايو. هر پلگ ان جي باري ۾ سکو، اسان جي ڊيٽا ۽ پروگراماتي API اختيارن، ۽ وڌيڪ.

انفرادي يا مرتب ڪيل

پلگ ان انفرادي طور تي شامل ڪري سگھجن ٿيون (بوٽ اسٽريپ جي انفرادي استعمال ڪندي js/dist/*.js)، يا سڀ هڪ ڀيرو استعمال ڪندي bootstrap.jsيا گھٽ ۾ گھٽ bootstrap.min.js(ٻنهي شامل نه ڪريو).

جيڪڏهن توهان هڪ بنڊل استعمال ڪندا آهيو (ويب پيڪ، رول اپ…)، توهان /js/dist/*.jsفائلون استعمال ڪري سگهو ٿا جيڪي UMD تيار آهن.

انحصار

ڪجھ پلگ ان ۽ سي ايس ايس جزا ٻين پلگ ان تي ڀاڙين ٿا. جيڪڏهن توهان انفرادي طور تي پلگ ان شامل ڪريو ٿا، پڪ ڪريو ته انهن انحصارن لاءِ دستاويز ۾ چيڪ ڪريو. اهو پڻ نوٽ ڪريو ته سڀئي پلگ ان jQuery تي منحصر آهن (هن جو مطلب آهي jQuery کي پلگ ان فائلن کان اڳ شامل ڪيو وڃي). اسانpackage.json سان صلاح ڪريو ته ڏسو jQuery جا ڪهڙا نسخا سپورٽ آهن.

اسان جا ڊراپ ڊائون، پاپ اوور ۽ ٽول ٽائپس پڻ Popper.js تي ڀاڙين ٿا .

ڊيٽا خاصيتون

لڳ ڀڳ سڀئي بوٽ اسٽريپ پلگ ان کي فعال ۽ ترتيب ڏئي سگھجي ٿو HTML ذريعي اڪيلو ڊيٽا جي خاصيتن سان (جاوا اسڪرپٽ ڪارڪردگي کي استعمال ڪرڻ جو اسان جو پسنديده طريقو). پڪ ڪريو ته صرف هڪ واحد عنصر تي ڊيٽا جي خاصيتن جو هڪ سيٽ استعمال ڪريو (مثال طور، توهان هڪ ئي بٽڻ مان ٽول ٽائپ ۽ موڊل ٽرگر نٿا ڪري سگهو.)

تنهن هوندي، ڪجهه حالتن ۾ اهو ضروري آهي ته هن ڪارڪردگي کي بند ڪرڻ لاء. ڊيٽا جي خصوصيت API کي غير فعال ڪرڻ لاءِ، سڀني واقعن کي بند ڪريو دستاويز جي نالي جي جاءِ تي data-apiجيئن ته:

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

متبادل طور تي، هڪ مخصوص پلگ ان کي نشانو بڻائڻ لاءِ، صرف پلگ ان جو نالو شامل ڪريو نالي جي جاءِ سان گڏ ڊيٽا-api نالي جي جڳهه هن طرح:

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

واقعا

بوٽ اسٽراپ اڪثر پلگ ان جي منفرد ڪارناما لاءِ ڪسٽم واقعا مهيا ڪري ٿو. عام طور تي، اهي هڪ لاتعداد ۽ ماضي ۾ حصو وٺندڙ فارم ۾ ايندا آهن - جتي infinitive (ex. show) ڪنهن واقعي جي شروعات تي شروع ڪيو ويندو آهي، ۽ ان جو ماضي حصو وٺندڙ فارم (مثال طور shown) هڪ عمل جي مڪمل ٿيڻ تي شروع ڪيو ويندو آهي.

سڀ لاتعداد واقعا preventDefault()ڪارڪردگي مهيا ڪن ٿا. هي هڪ عمل جي عمل کي شروع ڪرڻ کان پهريان ان کي روڪڻ جي صلاحيت ڏئي ٿو. ايونٽ هينڊلر کان غلط موٽڻ به پاڻمرادو ڪال ڪندو preventDefault().

$('#myModal').on('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

پروگراماتي API

اسان اهو پڻ سمجهون ٿا ته توهان جاوا اسڪرپٽ API ذريعي خالص طور تي سڀئي بوٽ اسٽريپ پلگ ان استعمال ڪرڻ جي قابل هوندا. سڀ عوامي APIs واحد، زنجير وارا طريقا آهن، ۽ جمع ڪيل ڪم کي واپس ڪن ٿا.

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

نسخي نمبر

VERSIONبوٽ اسٽريپ جي jQuery پلگ ان مان هر هڪ جو نسخو پلگ ان جي تعمير ڪندڙ جي ملڪيت ذريعي رسائي سگهجي ٿو . مثال طور، ٽول ٽائپ پلگ ان لاءِ:

$.fn.tooltip.Constructor.VERSION // => "4.6.2"

جڏهن جاوا اسڪرپٽ بند ٿيل هجي ته ڪو خاص ناڪام نه ٿيندو

بوٽ اسٽريپ جا پلگ ان واپس نه ٿا اچن خاص طور تي جڏهن جاوا اسڪرپٽ غير فعال آهي. جيڪڏهن توهان هن معاملي ۾ استعمال ڪندڙ جي تجربي جو خيال رکو ٿا، استعمال ڪريو <noscript>صورتحال کي بيان ڪرڻ لاءِ (۽ ڪيئن جاوا اسڪرپٽ کي ٻيهر فعال ڪجي) توهان جي استعمال ڪندڙن کي، ۽/يا پنهنجا پنهنجا ڪسٽم فال بيڪ شامل ڪريو.

استعمال

سڀئي بوٽ اسڪرپٽ جاوا اسڪرپٽ فائلن تي ڀاڙين ٿيون util.js۽ ان کي ٻين جاوا اسڪرپٽ فائلن سان گڏ شامل ڪيو وڃي. جيڪڏھن توھان استعمال ڪري رھيا آھيو مرتب ڪيل (يا minified) 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)
  }
})