ޖާވާސްކްރިޕްޓް

ޖޭކުއަރީގައި ބިނާކޮށްފައިވާ އަޅުގަނޑުމެންގެ އިޚްތިޔާރީ ޖާވާސްކްރިޕްޓް ޕްލަގިންސްތަކާއެކު ބޫޓްސްޓްރެޕް ދިރުވާލާށެވެ. ކޮންމެ ޕްލަގިންއަކާ ބެހޭގޮތުން، އަޅުގަނޑުމެންގެ ޑޭޓާއާއި، ޕްރޮގްރާމެޓިކް އެޕީއައި އޮޕްޝަންތަކާއި، އަދިވެސް އެތައް ކަމެއް ދަސްކުރައްވާށެވެ.

ވަކިވަކިން ނުވަތަ އެކުލަވާލާފައި

ޕްލަގިންތައް ވަކިވަކިން ހިމަނާލެވިދާނެ (ބޫޓްސްޓްރެޕްގެ ވަކިވަކި *.jsފައިލްތައް ބޭނުންކޮށްގެން)، ނުވަތަ އެއްފަހަރާ ބޭނުންކޮށްގެން bootstrap.jsނުވަތަ މިނިފައިޑްކޮށް bootstrap.min.js(އެދެ ފައިލްތައްވެސް ނުހިމަނާ) ޕްލަގިންތައް ހިމަނާލެވިދާނެއެވެ.

ޑިޕެންޑެންސީތަކެވެ

ބައެއް ޕްލަގިންސް އާއި ސީއެސްއެސް ކޮމްޕޯނެންޓްތައް ބަރޯސާވެފައިވަނީ އެހެން ޕްލަގިންސް ތަކުގެ މައްޗަށެވެ. ވަކިވަކިން ޕްލަގިންސް ހިމަނާނަމަ، ޑޮކްސްގައި މި ޑިޕެންޑެންސީތައް ޗެކްކުރުން ޔަގީންކުރައްވާށެވެ. އަދި ހުރިހާ ޕްލަގިންތަކެއް ބަރޯސާވެފައިވަނީ ޖޭކުއަރީއަށްކަން ފާހަގަކޮށްލަން (މީގެ މާނައަކީ ޕްލަގިން ފައިލްތަކުގެ ކުރިން ޖޭކުއަރީ ހިމަނަން ޖެހޭނެ ކަމެވެ ). ޖޭކުއަރީގެ ކޮން ވަރޝަންތަކަށް ސަޕޯޓް ކުރެވޭތޯ ބަލަން އަޅުގަނޑުމެންގެ ކޮންސަލްޓް ކުރާށެވެ.package.json

އަޅުގަނޑުމެންގެ ޑްރޮޕްޑައުންސް، ޕޮޕޯވަރސް އަދި ޓޫލްޓިޕްސް ވެސް ބަރޯސާވެފައިވަނީ Popper.js އަށެވެ .

ޑޭޓާ އެޓްރިބިއުޓްސް

ގާތްގަނޑަކަށް ހުރިހާ ބޫޓްސްޓްރެޕް ޕްލަގިންސް އެއް އެކަނި އެޗްޓީއެމްއެލް މެދުވެރިކޮށް ޑޭޓާ އެޓްރިބިއުޓްތަކާއެކު އެނެބަލްކޮށް ކޮންފިގްރޭޓް ކުރެވޭނެ (ޖާވާސްކްރިޕްޓް ފަންކްޝަނަލިޓީ ބޭނުން ކުރުމަށް އަޅުގަނޑުމެން އިސްކަންދޭ ގޮތް). އެއް އެލިމެންޓެއްގައި ޑޭޓާ އެޓްރިބިއުޓްތަކުގެ އެއް ސެޓް ބޭނުންކުރުން ޔަގީންކުރައްވާ (މިސާލަކަށް، އެއް ބަޓަނަކުން ޓޫލްޓިޕް އަދި މޮޑަލް ޓްރިގަރ ނުކުރެވޭނެއެވެ.)

ނަމަވެސް ބައެއް ހާލަތްތަކުގައި މި ފަންކްޝަނަލިޓީ ޑިސެބިލް ކުރުމަކީ އެދެވިގެން ވެދާނެ ކަމެކެވެ. ޑޭޓާ އެޓްރިބިއުޓް އެޕީއައި ޑިސެބިލް ކުރުމަށްޓަކައި، ޑޮކިއުމަންޓް ނަންސްޕޭސް ކޮށްފައިވާ ހުރިހާ އިވެންޓްތަކެއް އަންބައިންޑް ކުރާށެވެ data-api:

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

ނުވަތަ ވަކި ޕްލަގިންއަކަށް ޓާގެޓް ކުރުމަށްޓަކައި، ހަމައެކަނި ޕްލަގިންގެ ނަން ނަންސްޕޭސްއެއްގެ ގޮތުގައި ޑޭޓާ-އޭޕީއައި ނޭމްސްޕޭސްއާއެކު މިގޮތަށް ހިމަނާށެވެ:

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

އިވެންޓްސް

ބޫޓްސްޓްރަޕް އިން ގިނަ ޕްލަގިންސްތަކުގެ ޔުނިކް އެކްޝަންތަކަށް ކަސްޓަމް އިވެންޓްތައް ފޯރުކޮށްދެއެވެ. އާންމު ގޮތެއްގައި މިކަންކަން އަންނަނީ އިންފިނިޓިވް އަދި މާޒީގެ ޕާޓިސިޕަލް ފޯމެއްގައި - މިތަނުގައި އިންފިނިޓިވް (ex. show) ހާދިސާއެއް ފެށުމުން ޓްރިގަރ ކުރެވި، އޭގެ މާޒީ ޕާޓިސިޕަލް ފޯމް (ex. shown) ޓްރިގަރ ކުރެވެނީ ޢަމަލެއް ފުރިހަމަވުމުންނެވެ.

ހުރިހާ އިންފިނިޓިވް އިވެންޓްތަކުން ވެސް preventDefault()ފަންކްޝަނަލިޓީ ފޯރުކޮށްދެއެވެ. މިއީ ޢަމަލެއް ފެށުމުގެ ކުރިން އެ ޢަމަލެއް ހިންގުން ހުއްޓުވުމުގެ ޤާބިލުކަން ލިބިގެންދާ ކަމެކެވެ. އިވެންޓް ހެންޑްލަރ އިން ފޯލްސް ރިޓަރން ކުރުމުން ވެސް އޮޓޮމެޓިކުން ގޮވާނެއެވެ preventDefault().

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

ޕްރޮގްރާމެޓިކް އެޕީއައި

އަދި ބޫޓްސްޓްރެޕްގެ ހުރިހާ ޕްލަގިންސްތަކެއް ބޭނުންކުރެވޭނީ ހަމައެކަނި ޖާވާސްކްރިޕްޓް އެޕީއައި މެދުވެރިކޮށް ކަމަށް ވެސް އަޅުގަނޑުމެން ގަބޫލުކުރަމެވެ. ހުރިހާ ޕަބްލިކް އެޕީއައިތަކަކީ އެއް، ޗޭން ކުރެވޭ ގޮތްތަކެއް ކަމަށާއި، އެކްޓް ކުރެވުނު ކަލެކްޝަން ރިޓަރން ކުރާ އެއްޗެކެވެ.

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

އެސިންކްރޮނަސް ފަންކްޝަންތަކާއި ޓްރާންސިޝަންސް

ހުރިހާ ޕްރޮގްރާމެޓިކް އެޕީއައި މެތޯޑްތަކަކީ އެސިންކްރޮނަސް މެތޯޑްތަކެއް ކަމަށާއި ޓްރާންސިޝަން ފެށުމުން އެކަމަކު ނިމުމުގެ ކުރިން ކޯލަރަށް އެނބުރި އަންނަ މެތޯޑްތަކެއް ކަމަށެވެ .

ޓްރާންސިޝަން ނިމުމުން ޢަމަލެއް އެގްޒެކެޓް ކުރުމަށްޓަކައި، އެއާ ގުޅޭ އިވެންޓެއް އަޑުއަހާލެވޭނެއެވެ.

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

އެއްވެސް ފުށުއެރުމެއް ނެތެވެ

ބައެއް ފަހަރު ބޫޓްސްޓްރެޕް ޕްލަގިންސްތައް އެހެން ޔޫއައި ފްރޭމްވޯކްތަކާއެކު ބޭނުންކުރަން ޖެހެއެވެ. މި ހާލަތްތަކުގައި ދޭތެރެ ދޭތެރެއިން ނޭމްސްޕޭސް ކޮލިޝަންތައް ދިމާވެދާނެ އެވެ. .noConflictމިހެން ދިމާވެއްޖެނަމަ، އަގު އަނބުރާ ގެންނަން ބޭނުންވާ ޕްލަގިންއަށް ގޮވާލެވިދާނެއެވެ .

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

ވަރޝަން ނަންބަރުތަކެވެ

VERSIONބޫޓްސްޓްރެޕްގެ ކޮންމެ ޖީކުއަރީ ޕްލަގިންއެއްގެ ވަރޝަނަށް ޕްލަގިންގެ ކޮންސްޓްރަކްޓަރުގެ ޕްރޮޕަޓީ މެދުވެރިކޮށް ވަދެވޭނެއެވެ . މިސާލަކަށް ޓޫލްޓިޕް ޕްލަގިން އަށް:

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

ޖާވާސްކްރިޕްޓް ޑިސެބިލް ކޮށްފައި ހުންނައިރު ޚާއްޞަ ފޯލްބެކެއް ނެތެވެ

ޖާވާސްކްރިޕްޓް ޑިސެބިލް ކޮށްފައި ހުން��ައިރު ބޫޓްސްޓްރެޕްގެ ޕްލަގިންސްތައް ވަކިން ޝަރަފުވެރިކަމާއެކު ފަހަތަށް ނުޖެހެ އެވެ. މި ހާލަތުގައި ޔޫޒަރ އެކްސްޕީރިއަންސްއަށް ފަރުވާތެރިވާނަމަ، ޔޫޒަރުންނަށް <noscript>ހާލަތު ބަޔާންކޮށްދިނުމަށް (އަދި ޖާވާސްކްރިޕްޓް އަލުން އެނެބަލް ކުރާނެ ގޮތް) ބޭނުންކޮށް، އަދި/ނުވަތަ އަމިއްލަ ކަސްޓަމް ފޯލްބެކްތައް އިތުރުކޮށްލާށެވެ.

ޔުޓިލް...

ބޫޓްސްޓްރެޕްގެ ހުރިހާ ޖާވާސްކްރިޕްޓް ފައިލްތަކެއް ޑިޕެންޑް ކޮށްފައި util.jsހުންނައިރު އެއީ އެހެން ޖާވާސްކްރިޕްޓް ފައިލްތަކާ އެކު ހިމަނަން ޖެހޭ ފައިލްތަކެކެވެ. ކޮމްޕައިލްޑް (ނުވަތަ މިނިފައިޑް) ބޭނުންކުރާނަމަ bootstrap.js، މިކަން ހިމަނަން ނުޖެހޭނެ—މިހާރުވެސް އެބައޮތެވެ.

util.jsޔުޓިލިޓީ ފަންކްޝަންތަކާއި އިވެންޓްތަކަށް ބޭނުންވާ އަސާސީ ހެލްޕަރެއްގެ transitionEndއިތުރުން ސީއެސްއެސް ޓްރާންސިޝަން އެމިއުލޭޓަރެއް ހިމެނެއެވެ. އެއީ އެހެން ޕްލަގިންތަކުން ސީއެސްއެސް ޓްރާންސިޝަން ސަޕޯޓް ހުރިތޯ ބެލުމަށާއި ހެންގް ޓްރާންސިޝަންތައް ހިފެހެއްޓުމަށް ބޭނުންކުރާ އެއްޗެކެވެ.