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')
בוררים
נכון לעכשיו כדי לבצע שאילתות על רכיבי DOM אנו משתמשים בשיטות המקוריות querySelector
ומסיבות querySelectorAll
ביצועים, לכן עליך להשתמש בבוררים חוקיים . אם אתה משתמש בבוררים מיוחדים, למשל: collapse:Example
הקפד לברוח מהם.
אירועים
Bootstrap מספק אירועים מותאמים אישית עבור הפעולות הייחודיות של רוב התוספים. בדרך כלל, אלה באים בצורה אינפינטיבית וחלק עבר - כאשר האינפיניטיב (לדוגמה show
) מופעל בתחילת אירוע, וצורת חלק העבר שלו (לדוגמה shown
) מופעלת עם השלמת פעולה.
כל האירועים האינסופיים מספקים preventDefault()
פונקציונליות. זה מספק את היכולת לעצור את ביצוע הפעולה לפני שהיא מתחילה. החזרת false ממטפל באירועים תקרא גם אוטומטית preventDefault()
.
$('#myModal').on('show.bs.modal', function (event) {
if (!data) {
return event.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 (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 עם מסגרות משתמש אחרות. בנסיבות אלה, התנגשויות במרחב השמות יכולות להתרחש מדי פעם. אם זה קורה, אתה יכול להתקשר .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.6.2"
אין נפילות מיוחדות כאשר JavaScript מושבת
התוספים של Bootstrap אינם נופלים אחורה בחן במיוחד כאשר JavaScript מושבת. אם אכפת לך מחוויית המשתמש במקרה זה, השתמש <noscript>
כדי להסביר את המצב (וכיצד להפעיל מחדש את JavaScript) למשתמשים שלך, ו/או הוסף החזרות מותאמות אישית משלך.
ספריות של צד שלישי
Bootstrap אינו תומך רשמית בספריות JavaScript של צד שלישי כמו אב טיפוס או ממשק משתמש jQuery. למרות .noConflict
אירועים עם רווחי שמות, עשויות להיות בעיות תאימות שעליך לתקן בעצמך.
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', '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)
}
})