JavaScript

Δώστε ζωή στο Bootstrap με τις προαιρετικές μας προσθήκες JavaScript που είναι χτισμένες στο jQuery. Μάθετε για κάθε προσθήκη, τις επιλογές δεδομένων και προγραμματιστικών API και πολλά άλλα.

Ατομικό ή μεταγλωττισμένο

Τα πρόσθετα μπορούν να συμπεριληφθούν μεμονωμένα (χρησιμοποιώντας το μεμονωμένο του Bootstrap js/dist/*.js), ή όλα ταυτόχρονα χρησιμοποιώντας bootstrap.jsή ελαχιστοποιημένα bootstrap.min.js(μην συμπεριλαμβάνονται και τα δύο).

Εάν χρησιμοποιείτε ένα πακέτο (Webpack, Συνάθροιση…), μπορείτε να χρησιμοποιήσετε /js/dist/*.jsαρχεία που είναι έτοιμα για το UMD.

Εξαρτήσεις

Ορισμένα πρόσθετα και στοιχεία CSS εξαρτώνται από άλλα πρόσθετα. Εάν συμπεριλάβετε προσθήκες μεμονωμένα, φροντίστε να ελέγξετε για αυτές τις εξαρτήσεις στα έγγραφα. Σημειώστε επίσης ότι όλα τα πρόσθετα εξαρτώνται από το jQuery (αυτό σημαίνει ότι το jQuery πρέπει να περιλαμβάνεται πριν από τα αρχεία πρόσθετων). Συμβουλευτείτε μαςpackage.json για να δείτε ποιες εκδόσεις του jQuery υποστηρίζονται.

Τα αναπτυσσόμενα, τα popover και οι συμβουλές εργαλείων μας εξαρτώνται επίσης από το Popper.js .

Χαρακτηριστικά δεδομένων

Σχεδόν όλα τα πρόσθετα Bootstrap μπορούν να ενεργοποιηθούν και να ρυθμιστούν μόνο μέσω HTML με χαρακτηριστικά δεδομένων (ο προτιμώμενος τρόπος χρήσης της λειτουργικότητας JavaScript). Βεβαιωθείτε ότι χρησιμοποιείτε μόνο ένα σύνολο χαρακτηριστικών δεδομένων σε ένα μόνο στοιχείο (π.χ., δεν μπορείτε να ενεργοποιήσετε μια επεξήγηση εργαλείου και ένα modal από το ίδιο κουμπί.)

Ωστόσο, σε ορισμένες περιπτώσεις μπορεί να είναι επιθυμητό να απενεργοποιήσετε αυτήν τη λειτουργία. Για να απενεργοποιήσετε το 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 (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

API μέσω προγραμματισμού

Πιστεύουμε επίσης ότι θα πρέπει να μπορείτε να χρησιμοποιείτε όλα τα πρόσθετα Bootstrap αποκλειστικά μέσω του JavaScript API. Όλα τα δημόσια 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) στους χρήστες σας ή/και να προσθέσετε τις δικές σας προσαρμοσμένες εναλλακτικές.

Util

Όλα τα αρχεία JavaScript του Bootstrap εξαρτώνται util.jsκαι πρέπει να συμπεριληφθούν μαζί με τα άλλα αρχεία JavaScript. Εάν χρησιμοποιείτε το μεταγλωττισμένο (ή ελαχιστοποιημένο) bootstrap.js, δεν χρειάζεται να το συμπεριλάβετε—είναι ήδη εκεί.

util.jsπεριλαμβάνει βοηθητικές λειτουργίες και έναν βασικό βοηθό για transitionEndσυμβάντα καθώς και έναν εξομοιωτή μετάβασης CSS. Χρησιμοποιείται από τα άλλα πρόσθετα για τον έλεγχο της υποστήριξης μετάβασης CSS και για τη σύλληψη μεταβάσεων που κρέμονται.

Απολυμαντικό

Τα Tooltips και τα Popover χρησιμοποιούν το ενσωματωμένο μας απολυμαντικό για να απολυμάνουν επιλογές που δέχονται 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)
  }
})