ጃቫስክሪፕት።

ኣብ jQuery ብዝተሃንጹ ኣማራጺ ጃቫስክሪፕት ፕላጊናትና ንቡትስትራፕ ህይወት ኣምጽእዎ። ብዛዕባ ነፍሲ ወከፍ ፕላግ-ኢን፡ ዳታናን ፕሮግራማዊ ኤፒኣይ ኣማራጺታትናን ካልእን ፍለጡ።

ውልቃዊ ወይ ዝተጠርነፈ

ፕላጊናት ብውልቂ ክካተቱ ይኽእሉ (Bootstrap's individual ብምጥቃም js/dist/*.js), ወይ ኩሎም ብሓንሳብ ብምጥቃም bootstrap.jsወይ እቲ ዝተቐነሰ bootstrap.min.js(ክልቲኦም ኣይተካተቱ)።

bundler (Webpack, Rollup...) እንተተጠቒምካ /js/dist/*.js፡ UMD ድሉዋት ዝኾኑ ፋይላት ክትጥቀም ትኽእል ኢኻ።

ጽግዕተኛታት

ገለ ፕላጊናትን CSS ኣካላትን ኣብ ካልኦት ፕላጊናት ይምርኮሱ። ፕላጊናት ብውልቂ እንተ ኣካቲትካዮም፡ ነዞም ጽግዕተኛታት ኣብቲ docs ምፍታሽካ ኣረጋግጽ። ከምኡ ውን ኩሎም ፕላጊናት ኣብ jQuery ከም ዝምርኮሱ ኣስተውዕል (እዚ ማለት jQuery ቅድሚ እቶም ፕላግ-ኢን ፋይላት ክካተት ኣለዎ )። ኣየኖት ስሪት ናይ jQuery ከም ዝድገፉ ንምርኣይ ናትና ተወከሱ ።package.json

ናትና ድሮፕዳውንስ፡ ፖፖቨርስን ቱልቲፕስን እውን ኣብ Popper.js ይምርኮሱ ።

ናይ ዳታ ባህርያት

ዳርጋ ኩሎም Bootstrap plugins ብመንገዲ HTML ጥራይ ምስ data attributes (እቲ እንመርጾ ኣገባብ ኣጠቓቕማ JavaScript functionality) ክኽፈሉን ክውነኑን ይኽእሉ። ኣብ ሓደ ባእታ ሓደ ስብስብ ናይ ዳታ ባህርያት ጥራይ ምጥቃምካ ኣረጋግጽ (ንኣብነት፡ ካብ ሓደ መጠወቒ ንመሳርሒ ምኽሪን ሞዳልን ክትጅምር ኣይትኽእልን ኢኻ።)

ይኹን እምበር ኣብ ገለ ኩነታት ነዚ ተግባር ምዕጻው ተመራጺ ክኸውን ይኽእል እዩ። ነቲ ናይ ዳታ ባህሪ ኤፒኣይ ንምስንኻል፡ ኩሎም ኣብቲ ሰነድ namespaced ብ data-apilike so ዝፍጸሙ ፍጻመታት ፍታሕ፤

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

ከም ኣማራጺ፡ ንሓደ ፍሉይ ፕላግ-ኢን ዕላማ ንምግባር፡ ስም ናይቲ ፕላግ-ኢን ከም ቦታ ስም ምስቲ data-api namespace ከምዚ ዝኣመሰለ ጥራይ ኣካትትዎ፤

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

ፍጻሜታት

ቡትስትራፕ ንመብዛሕትኦም ፍሉያት ተግባራት ፕላጊናት ብሕታዊ ፍጻመታት ይህብ። ብሓፈሻ እዚኦም ብዘይውዳእን ሕሉፍ ረባሕታውን መልክዕ ይመጹ - ኣብዚ እቲ ዘይውዳእ (ex. show) ኣብ መጀመርታ ናይ ሓደ ፍጻመ ይብገስ፣ ሕሉፍ ረባሕታኡ መልክዑ (ex. shown) ድማ ምስ ምዝዛም ሓደ ተግባር ይብገስ።

ኩሎም ዘይውዳእ ፍጻመታት preventDefault()ተግባር ይህቡ። እዚ ድማ ቅድሚ ምጅማሩ ምፍጻም ሓደ ተግባር ደው ናይ ምባል ዓቕሚ ይህብ። ካብ ሓደ ናይ ፍጻመ መተሓላለፊ ሓሶት ምምላስ ’ ውን ብኣውቶማቲክ ክጽውዕ preventDefault()እዩ።

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

ፕሮግራማዊ ኤፒኣይ

ብተወሳኺ ንኹሎም Bootstrap plugins ብጃቫስክሪፕት ኤፒኣይ ጥራይ ኣቢልካ ክትጥቀመሎም ክትክእል ኣለካ ኢልና ንኣምን። ኩሎም ህዝባዊ ኤፒኣይታት ንጽል፣ ብሰንሰለት ዝእሰሩ ኣገባባት እዮም፣ ከምኡውን ነቲ ዝተዋስአሉ እኽብካብ ይመልሱ።

$('.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 plugins ምስ ካልኦት UI frameworks ምጥቃም የድሊ። ኣብ ከምዚ ኩነታት፡ ሓሓሊፉ ናይ ስም ቦታ ምግጫው ከጋጥም ይኽእል። .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 ምስግጋር ኤሙለተርን የጠቓልል። እቶም ካልኦት ፕላጊናት ንናይ CSS ምስግጋር ደገፍ ንምፍታሽን ንዝተሰቕሉ ምስግጋራት ንምሓዝን ይጥቀሙሉ።

ሳኒታይዘር

Tooltips and 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)
  }
})