جاواسکریپټ

زموږ د اختیاري جاواسکریپټ پلگ انونو سره چې په jQuery کې جوړ شوي بوټسټریپ ژوند ته راوړو. د هر پلگ ان په اړه زده کړه، زموږ ډاټا او د پروګراماتي API اختیارونو، او نور ډیر څه.

انفرادي یا تالیف شوی

پلگ انونه په انفرادي ډول شامل کیدی شي (د بوټسټریپ انفرادي په کارولو سره js/dist/*.js) ، یا ټول په یوځل کارول bootstrap.jsیا کوچني bootstrap.min.jsشوي (دواړه شامل نه کړئ).

که تاسو بنډلر کاروئ (ویب پیک، رول اپ…)، تاسو کولی شئ هغه /js/dist/*.jsفایلونه وکاروئ کوم چې UMD چمتو دي.

انحصارونه

ځینې ​​​​پلگ انونه او د CSS برخې په نورو پلگ انونو پورې اړه لري. که تاسو په انفرادي ډول فلګونه شامل کړئ، ډاډ ترلاسه کړئ چې په اسنادو کې د دې انحصارونو لپاره وګورئ. دا هم په یاد ولرئ چې ټول پلگ ان په jQuery پورې اړه لري (د دې معنی دا ده چې jQuery باید د پلگ ان فایلونو دمخه شامل شي). زموږ سره مشوره وکړئpackage.json ترڅو وګورئ چې د jQuery کومې نسخې ملاتړ کیږي.

زموږ ډراپ ډاونونه، پاپورونه او وسیلې هم په Popper.js پورې اړه لري .

د معلوماتو ځانګړتیاوې

نږدې ټول بوټسټریپ پلگ ان یوازې د HTML له لارې د ډیټا ځانګړتیاو سره فعال او تنظیم کیدی شي (زموږ د جاوا سکریپټ فعالیت کارولو غوره لاره). ډاډ ترلاسه کړئ چې یوازې په یو عنصر کې د ډیټا ځانګړتیاو یوه سیټ وکاروئ (د مثال په توګه ، تاسو نشئ کولی د ورته تڼۍ څخه د وسیلې ټایپ او ماډل رامینځته کړئ.)

په هرصورت، په ځینو حاالتو کې دا ممکن د پام وړ وي چې دا فعالیت غیر فعال کړي. د ډیټا خاصیت API غیر فعالولو لپاره ، د سند نوم ځای کې ټولې پیښې د دې په data-apiڅیر غیر فعال کړئ:

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

په بدیل سره، د یو ځانګړي پلگ ان په نښه کولو لپاره، یوازې د پلگ ان نوم د نوم ځای په توګه شامل کړئ د ډیټا-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 له لارې په خالص ډول ټول بوټسټریپ پلگ ان وکاروئ. ټول عامه 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

د بوټسټریپ ټول جاواسکریپټ فایلونه پورې اړه لري 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)
  }
})