JavaScript

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

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

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

תלות

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

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

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

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

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

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

לחלופין, כדי למקד לפלאגין ספציפי, פשוט כלול את שם הפלאגין כמרחב שמות יחד עם מרחב השמות של data-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האובייקט של הפלאגין:

$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to 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.0.0"

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

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

Util

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

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