ጃቫስክሪፕት

በ jQuery ላይ በተገነቡት የጃቫ ስክሪፕት ፕለጊኖቻችን Bootstrapን ህያው አድርገው። ስለእያንዳንዱ ተሰኪ፣የእኛ ውሂብ እና ፕሮግራማዊ ኤፒአይ አማራጮች እና ተጨማሪ ይወቁ።

የግለሰብ ወይም የተጠናቀረ

ተሰኪዎች በተናጥል ሊካተቱ ይችላሉ (የ Bootstrapን ግለሰብ በመጠቀም js/dist/*.js) ወይም ሁሉንም በአንድ ጊዜ በመጠቀም bootstrap.jsወይም የተቀነሰው bootstrap.min.js(ሁለቱንም አያካትቱ)።

ጥቅል (Webpack፣ Rollup…) የሚጠቀሙ ከሆነ /js/dist/*.jsUMD ዝግጁ የሆኑ ፋይሎችን መጠቀም ይችላሉ።

ጥገኛዎች

አንዳንድ ተሰኪዎች እና የሲኤስኤስ ክፍሎች በሌሎች ተሰኪዎች ላይ ይወሰናሉ። ፕለጊኖችን ለየብቻ ካካተትክ፣ እነዚህን ጥገኞች በሰነዶቹ ውስጥ ማረጋገጥህን አረጋግጥ። እንዲሁም ሁሉም ተሰኪዎች በ jQuery ላይ የተመሰረቱ መሆናቸውን ልብ ይበሉ (ይህ ማለት jQuery ከፕለጊን ፋይሎች በፊት መካተት አለበት )። የትኞቹ የ jQuery ስሪቶች እንደሚደገፉ ለማየት የእኛን ያማክሩ ።package.json

የእኛ ተቆልቋይ፣ ብቅ -ባይ እና የመሳሪያ ምክሮች በ Popper.js ላይም ይወሰናሉ ።

የውሂብ ባህሪያት

ከሞላ ጎደል ሁሉም የ Bootstrap ፕለጊኖች በኤችቲኤምኤል በኩል ብቻ በመረጃ ባህሪያት (የእኛ ተመራጭ የጃቫስክሪፕት ተግባራዊነት) ሊነቁ እና ሊዋቀሩ ይችላሉ። በአንድ ኤለመንት ላይ አንድ የውሂብ ባህሪያትን ስብስብ ብቻ መጠቀምዎን ያረጋግጡ (ለምሳሌ፣ ከተመሳሳይ አዝራር የመሳሪያ ጥቆማ እና ሞዳል ማስነሳት አይችሉም።)

ሆኖም፣ በአንዳንድ ሁኔታዎች ይህንን ተግባር ማሰናከል ሊፈለግ ይችላል። የውሂብ አይነታ ኤፒአይን ለማሰናከል በሰነዱ ላይ ያሉ ሁሉንም ክስተቶች በስም የተከፋፈሉትን ያንቀሉ data-api፡-

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

በአማራጭ፣ አንድን የተወሰነ ፕለጊን ዒላማ ለማድረግ፣ የተሰኪውን ስም እንደ የስም ቦታ ብቻ ከዳታ-api የስም ቦታ ጋር እንደዚህ ያካትቱ።

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

ክስተቶች

Bootstrap ለአብዛኛዎቹ ተሰኪዎች ልዩ ድርጊቶች ብጁ ክስተቶችን ያቀርባል። በጥቅሉ፣ እነዚህ ወደ ፍጻሜ የለሽ እና ያለፈ ተካፋይ መልክ ይመጣሉ - መጨረሻው (ለምሳሌ show) በክስተቱ መጀመሪያ ላይ የሚቀሰቀስበት እና ያለፈው አካል ቅርፅ (ለምሳሌ shown) የሚቀሰቀሰው ድርጊት ሲጠናቀቅ ነው።

ሁሉም ማለቂያ የሌላቸው ክስተቶች preventDefault()ተግባራዊነት ይሰጣሉ. ይህ እርምጃ ከመጀመሩ በፊት አፈፃፀምን የማቆም ችሎታ ይሰጣል። ከክስተት ተቆጣጣሪ የውሸት መመለስ እንዲሁ በቀጥታ ይደውላል preventDefault()።

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

ፕሮግራማዊ ኤፒአይ

እንዲሁም ሁሉንም የBootstrap ፕለጊኖች በጃቫስክሪፕት ኤፒአይ ብቻ መጠቀም መቻል እንዳለቦት እናምናለን። ሁሉም ይፋዊ ኤፒአይዎች ነጠላ፣ በሰንሰለት ሊታለፉ የሚችሉ ዘዴዎች ናቸው፣ እና የተግባርን ስብስብ ይመለሳሉ።

$('.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 (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የእያንዳንዱ የBootstrap jQuery ፕለጊኖች ስሪት በተሰኪው ገንቢ ንብረት በኩል ሊደረስበት ይችላል ። ለምሳሌ፣ ለመሳሪያ ምክር ተሰኪ፡-

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

ጃቫ ስክሪፕት ሲሰናከል ምንም ልዩ ውድቀት የለም።

ጃቫ ስክሪፕት ሲሰናከል የቡትስትራፕ ተሰኪዎች በጸጋ ወደ ኋላ አይመለሱም። በዚህ ጉዳይ ላይ ስለተጠቃሚው ተሞክሮ የሚጨነቁ ከሆነ፣ <noscript>ሁኔታውን (እና ጃቫ ስክሪፕትን እንዴት እንደገና ማንቃት እንደሚችሉ) ለተጠቃሚዎችዎ ለማስረዳት ይጠቀሙ እና/ወይም የራስዎን ብጁ ውድቀት ያክሉ።

መገልገያ

ሁሉም የ Bootstrap ጃቫ ስክሪፕት ፋይሎች የሚወሰኑት util.jsእና ከሌሎች የጃቫ ስክሪፕት ፋይሎች ጋር መካተት አለበት። የተቀናበረውን (ወይም የተቀነሰውን) እየተጠቀሙ ከሆነ bootstrap.js፣ ይህንን ማካተት አያስፈልግም—ቀድሞውኑ አለ።

util.jsየመገልገያ ተግባራትን እና ለክስተቶች መሰረታዊ ረዳትን transitionEndእንዲሁም የሲኤስኤስ ሽግግር ኢምፔርን ያካትታል። የCSS ሽግግር ድጋፍን ለመፈተሽ እና የተንጠለጠሉ ሽግግሮችን ለመያዝ በሌሎች ተሰኪዎች ጥቅም ላይ ይውላል።

ሳኒታይዘር

Tooltips እና Popovers ኤችቲኤምኤልን የሚቀበሉ አማራጮችን ለማጽዳት የእኛን አብሮገነብ ማጽጃ ይጠቀማሉ።

ነባሪው 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)
  }
})