JavaScript

הבא לחיים את Bootstrap עם תוספי JavaScript האופציונליים שלנו הבנויים על jQuery. למד על כל תוסף, אפשרויות הנתונים וה-API התוכנותי שלנו ועוד.

בודדים או מורכבים

ניתן לכלול תוספים בנפרד (באמצעות ה-Individual של Bootstrap js/dist/*.js), או בבת אחת באמצעות bootstrap.jsה-Minified bootstrap.min.js(אל תכלול את שניהם).

אם אתה משתמש ב-Bundler (Webpack, Rollup...), אתה יכול להשתמש /js/dist/*.jsבקבצים שמוכנים ל-UMD.

תלות

תוספים מסוימים ורכיבי CSS תלויים בתוספים אחרים. אם אתה כולל תוספים בנפרד, הקפד לבדוק את התלות הללו במסמכים. שימו לב גם שכל התוספים תלויים ב-jQuery (משמעות הדבר היא ש-jQuery חייב להיכלל לפני קבצי הפלאגין). עיין שלנוpackage.json כדי לראות אילו גרסאות של jQuery נתמכות.

התפריטים הנפתחים, הפופ-אוברים וטיפים שלנו תלויים גם ב- Popper.js .

תכונות נתונים

ניתן להפעיל ולהגדיר כמעט את כל התוספים של Bootstrap באמצעות HTML בלבד עם תכונות נתונים (הדרך המועדפת עלינו להשתמש בפונקציונליות JavaScript). הקפד להשתמש רק בקבוצה אחת של תכונות נתונים ברכיב בודד (לדוגמה, אינך יכול להפעיל תיאור כלים ומודאל מאותו כפתור).

עם זאת, במצבים מסוימים ייתכן שיהיה רצוי להשבית פונקציונליות זו. כדי להשבית את ה-API של תכונת הנתונים, בטל את הקישור של כל האירועים במסמך עם רווחי שמות data-apiכך:

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

לחלופין, כדי למקד לפלאגין ספציפי, פשוט כלול את שם הפלאגין כמרחב שמות יחד עם מרחב השמות של הנתונים-API כך:

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

אירועים

Bootstrap מספק אירועים מותאמים אישית עבור הפעולות הייחודיות של רוב התוספים. בדרך כלל, אלה באים בצורה אינפינטיבית וחלק עבר - כאשר האינפיניטיב (לדוגמה show) מופעל בתחילת אירוע, וצורת חלק העבר שלו (לדוגמה shown) מופעלת עם השלמת פעולה.

כל האירועים האינסופיים מספקים preventDefault()פונקציונליות. זה מספק את היכולת לעצור את ביצוע הפעולה לפני שהיא מתחילה. החזרת false ממטפל באירועים תקרא גם אוטומטית preventDefault().

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

API פרוגרמטי

אנו גם מאמינים שאתה אמור להיות מסוגל להשתמש בכל התוספים של Bootstrap אך ורק דרך ה-API של JavaScript. כל ממשקי ה-API הציבוריים הם שיטות בודדות, הניתנות לשרשרת, ומחזירות את האוסף שנעשה עליו.

$('.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האובייקט של הפלאגין:

// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = false

אין סכסוך

לפעמים יש צורך להשתמש בתוספים של Bootstrap עם מסגרות משתמש אחרות. בנסיבות אלה, התנגשויות במרחב השמות יכולות להתרחש מדי פעם. אם זה קורה, אתה יכול להתקשר .noConflictלפלאגין שברצונך להחזיר את הערך שלו.

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

מספרי גרסה

ניתן לגשת לגרסה של כל אחד מתוספי jQuery של Bootstrap דרך VERSIONהמאפיין של בנאי התוסף. לדוגמה, עבור הפלאגין 'טיפ כלים':

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

אין נפילות מיוחדות כאשר JavaScript מושבת

התוספים של Bootstrap אינם נופלים אחורה בחן במיוחד כאשר JavaScript מושבת. אם אכפת לך מחוויית המשתמש במקרה זה, השתמש <noscript>כדי להסביר את המצב (וכיצד להפעיל מחדש את JavaScript) למשתמשים שלך, ו/או הוסף החזרות מותאמות אישית משלך.

Util

כל קובצי ה-JavaScript של Bootstrap תלויים util.jsבהם ויש לכלול אותם לצד שאר קובצי ה-JavaScript. אם אתה משתמש בקומפילציה (או ממוזער) bootstrap.js, אין צורך לכלול את זה - הוא כבר שם.

util.jsכולל פונקציות שירות ועוזר בסיסי transitionEndלאירועים וכן אמולטור מעבר CSS. הוא משמש את התוספים האחרים כדי לבדוק אם יש תמיכה במעבר CSS ולתפוס מעברים תלויים.

מחטא

עצות כלים ו-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', '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)
  }
})