جاڤاسکڕێپت

بە پێوەکراوەکانی جاڤاسکڕێپتی ئیختیاریمان کە لەسەر jQuery دروستکراون، Bootstrap بهێنە ژیانەوە. دەربارەی هەر پێوەکراوێک، داتا و هەڵبژاردەکانی API بەرنامەیی و زۆر شتی تر بزانە.

تاکەکەسی یان کۆکراوە

دەتوانرێت پێوەکراوەکان بە تاک (بە بەکارهێنانی تاکەکەسی Bootstrap js/dist/*.js) جێگیر بکرێن، یان هەموویان بە یەکجار بە بەکارهێنانی bootstrap.jsیان بچووککراو bootstrap.min.js(هەردووکیان لەخۆ مەگرن).

ئەگەر باندلەرێک بەکاربهێنیت (Webpack, Rollup...)، دەتوانیت ئەو /js/dist/*.jsفایلانە بەکاربهێنیت کە UMD ئامادەن.

وابەستەییەکان

هەندێک لە پێوەکراوەکان و پێکهاتەکانی CSS پشت بە پێوەکراوەکانی تر دەبەستن. ئەگەر پێوەکراوەکان بە تاک بە تاک جێگیر دەکەیت، دڵنیابە لە پشکنینی ئەم وابەستەییانە لە دۆکیومێنتەکاندا. هەروەها تێبینی ئەوە بکە کە هەموو پێوەکراوەکان پشت بە jQuery دەبەستن (ئەمە واتە jQuery دەبێت پێش فایلەکانی پێوەکراوەکان بێت). راوێژ بە ئێمە بکەpackage.json بۆ ئەوەی بزانیت کام وەشانی jQuery پشتگیری دەکرێت.

هەروەها درۆپداونەکانمان، پۆپۆڤەرەکان و ئامرازەکانمان پشت بە Popper.js دەبەستن .

تایبەتمەندیەکانی داتا

نزیکەی هەموو پێوەکراوەکانی Bootstrap دەتوانرێت چالاک بکرێت و ڕێکبخرێت تەنها لە ڕێگەی HTML بە تایبەتمەندی داتا (شێوازی پەسەندکراوی ئێمە بۆ بەکارهێنانی کارایی جاڤاسکڕێپت). دڵنیابە کە تەنها یەک کۆمەڵە تایبەتمەندی داتا لەسەر یەک توخم بەکاردەهێنیت (بۆ نموونە، ناتوانیت ئامۆژگاری و مۆداڵی لە هەمان دوگمەوە دەستپێبکەیت.)

بەڵام لە هەندێک بارودۆخدا ڕەنگە باشتر بێت ئەم کاراییە لەکاربخرێت. بۆ ناکارکردنی API ی تایبەتمەندی داتا، هەموو ڕووداوەکان لەسەر ناوی بەڵگەنامەکە بکەرەوە کە data-apiبەم شێوەیە جیاکراوەتەوە:

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

یان بۆ بە ئامانجگرتنی پێوەکراوێکی دیاریکراو، تەنها ناوی پێوەکراوەکە وەک ناوچەی ناو لەگەڵ شوێنی ناوی data-api بەم شێوەیە دابنێ:

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

ڕووداوەکان

بووتستراپ ڕووداوە تایبەتەکان بۆ زۆربەی کردارە ناوازەکانی پێوەکراوەکان دابین دەکات. بەگشتی ئەمانە بە شێوەی بێکۆتایی و بەشێکی ڕابردوو دێن - کە بێکۆتایی (ex. show) لە سەرەتای ڕووداوێکدا دەستپێدەکات، و فۆڕمی بەشە ڕابردووەکەی (ex. shown) لە کاتی تەواوبوونی کردارێکدا دەستپێدەکات.

هەموو ڕووداوە بێکۆتاییەکان preventDefault()کارایی دابین دەکەن. ئەمەش توانای وەستاندنی جێبەجێکردنی کردارێک پێش دەستپێکردنی دەدات. هەروەها گەڕانەوەی false لە مامەڵەکارێکی ڕووداوەوە بە شێوەیەکی ئۆتۆماتیکی بانگ preventDefault()دەکات .

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

API بەرنامەیی

هەروەها ئێمە پێمان وایە پێویستە بتوانیت هەموو پێوەکراوەکانی Bootstrap بەکاربهێنیت تەنها لە ڕێگەی JavaScript 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

هیچ ململانێیەک نییە

هەندێک جار پێویستە پێوەکراوەکانی Bootstrap لەگەڵ چوارچێوەی UI ی تر بەکاربهێنرێت. لەم بارودۆخانەدا، ناوبەناو دەتوانێت پێکدادانی ناوچەی ناوەکان ڕووبدات. ئەگەر ئەمە ڕوویدا، دەتوانیت بانگی .noConflictئەو پێوەکراوە بکەیت کە دەتەوێت بەهاکەی بگەڕێنیتەوە.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality

ژمارەکانی وەشانی

دەتوانرێت لە ڕێگەی VERSIONتایبەتمەندی بنیاتنەری پێوەکراوەکەوە دەست بە وەشانی هەریەک لە پێوەکراوەکانی jQuery ی Bootstrap بگات. بۆ نموونە بۆ پێوەکراوەکەی tooltip:

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

هیچ فۆڵباکێکی تایبەت نییە کاتێک جاڤاسکڕێپت لەکارخراوە

پێوەکراوەکانی Bootstrap بە تایبەتی بە ڕەوشتەوە ناگەڕێنەوە کاتێک جاڤاسکڕێپت لەکاردەخرێت. ئەگەر لەم حاڵەتەدا گرنگی بە ئەزموونی بەکارهێنەر دەدەیت، بەکاری بهێنە <noscript>بۆ ڕوونکردنەوەی دۆخەکە (و چۆن جاڤاسکڕێپت چالاک بکەیتەوە) بۆ بەکارهێنەرانت، و/یان زیادکردنی پاشەکشەی تایبەت بە خۆت.

بەکارهێنان

هەموو فایلەکانی جاڤاسکڕێپتی Bootstrap پشتیان پێ دەبەستێت util.jsو دەبێت شانبەشانی فایلەکانی تری جاڤاسکڕێپت دابنرێت. ئەگەر تۆ کۆمپایڵکراو (یان بچووککراو) بەکاردەهێنیت 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)
  }
})