جاواسکریپټ

زموږ د اختیاري جاواسکریپټ پلگ انونو سره چې په 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 (e) {
  if (!data) return e.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 (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

هیڅ شخړه نشته

ځینې ​​​​وختونه دا اړینه ده چې د نورو 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.1.3"

کله چې جاواسکریپټ غیر فعال وي نو کوم ځانګړي فال بیک نشته

د بوټسټریپ پلگ انونه په ځانګړي ډول په زړه پورې نه راځي کله چې جاواسکریپټ غیر فعال وي. که تاسو پدې قضیه کې د کارونکي تجربې ته پاملرنه کوئ ، نو <noscript>د وضعیت تشریح کولو لپاره وکاروئ (او څنګه د جاوا سکریپټ بیا فعال کړئ) خپلو کاروونکو ته ، او/یا خپل دودیز فال بیکونه اضافه کړئ.

Util

د بوټسټریپ ټول جاواسکریپټ فایلونه پورې اړه لري util.jsاو دا باید د نورو جاواسکریپټ فایلونو سره یوځای شي. که تاسو تالیف شوی (یا کوچنی شوی) کاروئ bootstrap.js، نو د دې شاملولو ته اړتیا نشته — دا دمخه شتون لري.

util.jsد افادیت افعال او د پیښو لپاره یو بنسټیز مرستندویه transitionEndاو همدارنګه د CSS لیږد ایمولیټر شامل دي. دا د نورو پلگ انونو لخوا کارول کیږي ترڅو د CSS لیږد مالتړ وګوري او د ځړولو لیږدونو نیولو لپاره.