JavaScript
Δώστε ζωή στα στοιχεία του Bootstrap με πάνω από δώδεκα προσαρμοσμένα πρόσθετα jQuery. Συμπεριλάβετε τα εύκολα όλα ή ένα προς ένα.
Δώστε ζωή στα στοιχεία του Bootstrap με πάνω από δώδεκα προσαρμοσμένα πρόσθετα jQuery. Συμπεριλάβετε τα εύκολα όλα ή ένα προς ένα.
Τα πρόσθετα μπορούν να συμπεριληφθούν μεμονωμένα (χρησιμοποιώντας τα μεμονωμένα *.js
αρχεία του Bootstrap) ή όλα ταυτόχρονα (χρησιμοποιώντας bootstrap.js
ή ελαχιστοποιημένα bootstrap.min.js
).
Και τα δύο bootstrap.js
και bootstrap.min.js
περιέχουν όλα τα πρόσθετα σε ένα μόνο αρχείο. Συμπεριλάβετε μόνο ένα.
Ορισμένα πρόσθετα και στοιχεία CSS εξαρτώνται από άλλα πρόσθετα. Εάν συμπεριλάβετε προσθήκες μεμονωμένα, φροντίστε να ελέγξετε για αυτές τις εξαρτήσεις στα έγγραφα. Σημειώστε επίσης ότι όλα τα πρόσθετα εξαρτώνται από το jQuery (αυτό σημαίνει ότι το jQuery πρέπει να περιλαμβάνεται πριν από τα αρχεία πρόσθετων). Συμβουλευτείτε μαςbower.json
για να δείτε ποιες εκδόσεις του jQuery υποστηρίζονται.
Μπορείτε να χρησιμοποιήσετε όλα τα πρόσθετα Bootstrap αποκλειστικά μέσω του API σήμανσης χωρίς να γράψετε ούτε μια γραμμή JavaScript. Αυτό είναι το πρώτης τάξεως API του Bootstrap και θα πρέπει να είναι η πρώτη σας προσοχή όταν χρησιμοποιείτε μια προσθήκη.
Τούτου λεχθέντος, σε ορισμένες περιπτώσεις μπορεί να είναι επιθυμητό να απενεργοποιήσετε αυτήν τη λειτουργία. Επομένως, παρέχουμε επίσης τη δυνατότητα απενεργοποίησης του API χαρακτηριστικού δεδομένων αποδεσμεύοντας όλα τα συμβάντα στο χώρο ονομάτων του εγγράφου με data-api
. Αυτό μοιάζει με αυτό:
Εναλλακτικά, για να στοχεύσετε μια συγκεκριμένη προσθήκη, απλώς συμπεριλάβετε το όνομα της προσθήκης ως χώρο ονομάτων μαζί με τον χώρο ονομάτων του data-api ως εξής:
Μην χρησιμοποιείτε χαρακτηριστικά δεδομένων από πολλές προσθήκες στο ίδιο στοιχείο. Για παράδειγμα, ένα κουμπί δεν μπορεί να έχει και μια επεξήγηση εργαλείου και να εναλλάσσει έναν τρόπο λειτουργίας. Για να το κάνετε αυτό, χρησιμοποιήστε ένα στοιχείο περιτύλιξης.
Πιστεύουμε επίσης ότι θα πρέπει να μπορείτε να χρησιμοποιείτε όλα τα πρόσθετα Bootstrap αποκλειστικά μέσω του JavaScript API. Όλα τα δημόσια API είναι απλές, αλυσιδωτές μέθοδοι και επιστρέφουν τη συλλογή που έχει γίνει.
Όλες οι μέθοδοι πρέπει να δέχονται ένα αντικείμενο προαιρετικών επιλογών, μια συμβολοσειρά που στοχεύει μια συγκεκριμένη μέθοδο ή τίποτα (που εκκινεί μια προσθήκη με προεπιλεγμένη συμπεριφορά):
Κάθε πρόσθετο εκθέτει επίσης τον ακατέργαστο κατασκευαστή του σε μια Constructor
ιδιότητα: $.fn.popover.Constructor
. Εάν θέλετε να λάβετε μια συγκεκριμένη παρουσία προσθήκης, ανακτήστε την απευθείας από ένα στοιχείο: $('[rel="popover"]').data('popover')
.
Μπορείτε να αλλάξετε τις προεπιλεγμένες ρυθμίσεις για μια προσθήκη τροποποιώντας το Constructor.DEFAULTS
αντικείμενο της προσθήκης:
Μερικές φορές είναι απαραίτητο να χρησιμοποιήσετε πρόσθετα Bootstrap με άλλα πλαίσια διεπαφής χρήστη. Σε αυτές τις περιπτώσεις, ενδέχεται να προκύψουν περιστασιακά συγκρούσεις χώρου ονομάτων. Εάν συμβεί αυτό, μπορείτε να καλέσετε .noConflict
την προσθήκη που θέλετε να επαναφέρετε την τιμή της.
Το Bootstrap παρέχει προσαρμοσμένα συμβάντα για τις μοναδικές ενέργειες των περισσότερων προσθηκών. Γενικά, αυτά έρχονται σε αόριστο και παρελθοντικό - όπου ο αόριστος (π.χ. show
) ενεργοποιείται στην αρχή ενός γεγονότος και η παρελθοντική του μορφή (π. shown
) ενεργοποιείται με την ολοκλήρωση μιας ενέργειας.
Από την έκδοση 3.0.0, όλα τα συμβάντα Bootstrap έχουν χώρο ονομάτων.
Όλα τα ατελείωτα συμβάντα παρέχουν preventDefault
λειτουργικότητα. Αυτό παρέχει τη δυνατότητα διακοπής της εκτέλεσης μιας ενέργειας πριν ξεκινήσει.
Η έκδοση καθενός από τα πρόσθετα jQuery του Bootstrap είναι προσβάσιμη μέσω της VERSION
ιδιότητας του κατασκευαστή του πρόσθετου. Για παράδειγμα, για την προσθήκη συμβουλής εργαλείου:
Οι προσθήκες του Bootstrap δεν παρουσιάζουν ιδιαίτερη χάρη όταν η JavaScript είναι απενεργοποιημένη. Εάν ενδιαφέρεστε για την εμπειρία χρήστη σε αυτήν την περίπτωση, χρησιμοποιήστε <noscript>
το για να εξηγήσετε την κατάσταση (και πώς να ενεργοποιήσετε ξανά τη JavaScript) στους χρήστες σας ή/και να προσθέσετε τις δικές σας προσαρμοσμένες εναλλακτικές.
Το Bootstrap δεν υποστηρίζει επίσημα βιβλιοθήκες JavaScript τρίτων όπως το Prototype ή το jQuery UI. Παρά .noConflict
τα συμβάντα και τα συμβάντα ονομάτων, ενδέχεται να υπάρχουν προβλήματα συμβατότητας που πρέπει να διορθώσετε μόνοι σας.
Για απλά εφέ μετάβασης, συμπεριλάβετε transition.js
μία φορά μαζί με τα άλλα αρχεία JS. Εάν χρησιμοποιείτε το μεταγλωττισμένο (ή ελαχιστοποιημένο) bootstrap.js
, δεν χρειάζεται να το συμπεριλάβετε—είναι ήδη εκεί.
Το Transition.js είναι ένας βασικός βοηθός για transitionEnd
συμβάντα καθώς και ένας εξομοιωτής μετάβασης CSS. Χρησιμοποιείται από τα άλλα πρόσθετα για τον έλεγχο της υποστήριξης μετάβασης CSS και για τη σύλληψη μεταβάσεων που κρέμονται.
Οι μεταβάσεις μπορούν να απενεργοποιηθούν καθολικά χρησιμοποιώντας το ακόλουθο απόσπασμα JavaScript, το οποίο πρέπει να έρθει μετά τη φόρτωση transition.js
(ή bootstrap.js
ή bootstrap.min.js
, ανάλογα με την περίπτωση):
Τα modal είναι βελτιωμένα, αλλά ευέλικτα, μηνύματα διαλόγου με την ελάχιστη απαιτούμενη λειτουργικότητα και έξυπνες προεπιλογές.
Φροντίστε να μην ανοίξετε ένα modal ενώ ένα άλλο είναι ακόμα ορατό. Η εμφάνιση περισσότερων του ενός modal κάθε φορά απαιτεί προσαρμοσμένο κωδικό.
Προσπαθείτε πάντα να τοποθετείτε τον κώδικα HTML ενός modal σε μια θέση ανώτατου επιπέδου στο έγγραφό σας για να αποφύγετε άλλα στοιχεία να επηρεάσουν την εμφάνιση ή/και τη λειτουργικότητα του modal.
Υπάρχουν ορισμένες προειδοποιήσεις σχετικά με τη χρήση modals σε κινητές συσκευές. Δείτε τα έγγραφα υποστήριξης του προγράμματος περιήγησής μας για λεπτομέρειες.
Λόγω του τρόπου με τον οποίο η HTML5 ορίζει τη σημασιολογία της, το autofocus
χαρακτηριστικό HTML δεν έχει καμία επίδραση στους τρόπους εκκίνησης. Για να επιτύχετε το ίδιο αποτέλεσμα, χρησιμοποιήστε κάποια προσαρμοσμένη JavaScript:
Ένα αποδοθέν modal με κεφαλίδα, σώμα και σύνολο ενεργειών στο υποσέλιδο.
Εναλλάξτε ένα modal μέσω JavaScript κάνοντας κλικ στο κουμπί παρακάτω. Θα γλιστρήσει προς τα κάτω και θα ξεθωριάσει από την κορυφή της σελίδας.
Βεβαιωθείτε ότι έχετε προσθέσει role="dialog"
και aria-labelledby="..."
, αναφερόμενος στον τροπικό τίτλο, στο .modal
, και role="document"
στον .modal-dialog
εαυτό του.
Επιπλέον, μπορείτε να δώσετε μια περιγραφή του τρόπου διαλόγου σας με aria-describedby
το .modal
.
Η ενσωμάτωση βίντεο YouTube σε modals απαιτεί επιπλέον JavaScript όχι σε Bootstrap για αυτόματη διακοπή της αναπαραγωγής και πολλά άλλα. Δείτε αυτήν τη χρήσιμη ανάρτηση Stack Overflow για περισσότερες πληροφορίες.
Τα Modal έχουν δύο προαιρετικά μεγέθη, διαθέσιμα μέσω κατηγοριών τροποποιητών για να τοποθετηθούν σε ένα .modal-dialog
.
Για τρόπους που απλώς εμφανίζονται αντί να ξεθωριάζουν για προβολή, αφαιρέστε την .fade
κλάση από τη σήμανση τρόπων.
Για να επωφεληθείτε από το σύστημα πλέγματος Bootstrap σε ένα modal, απλώς τοποθετήστε .row
το μέσα στις .modal-body
και, στη συνέχεια, χρησιμοποιήστε τις κανονικές κλάσεις συστήματος πλέγματος.
Έχετε ένα σωρό κουμπιά που ενεργοποιούν όλα το ίδιο modal, απλώς με ελαφρώς διαφορετικό περιεχόμενο; Χρησιμοποιήστε χαρακτηριστικάevent.relatedTarget
και HTMLdata-*
(πιθανώς μέσω jQuery ) για να διαφοροποιήσετε τα περιεχόμενα του modal ανάλογα με το κουμπί που κάνατε κλικ. Δείτε τα έγγραφα Modal Events για λεπτομέρειες σχετικά με relatedTarget
,
Το modal plugin εναλλάσσει το κρυφό περιεχόμενό σας κατά παραγγελία, μέσω χαρακτηριστικών δεδομένων ή JavaScript. Προσθέτει επίσης .modal-open
στην <body>
παράκαμψη της προεπιλεγμένης συμπεριφοράς κύλισης και δημιουργεί ένα .modal-backdrop
για να παρέχει μια περιοχή κλικ για την παράβλεψη των εμφανιζόμενων τρόπων κατά το κλικ εκτός του τρόπου λειτουργίας.
Ενεργοποιήστε ένα modal χωρίς εγγραφή JavaScript. Ρυθμίστε data-toggle="modal"
σε ένα στοιχείο ελεγκτή, όπως ένα κουμπί, μαζί με ένα data-target="#foo"
ή href="#foo"
για να στοχεύσετε ένα συγκεκριμένο modal για εναλλαγή.
Κλήση ενός modal με αναγνωριστικό myModal
με μία μόνο γραμμή JavaScript:
Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-
, όπως στο data-backdrop=""
.
Ονομα | τύπος | Προκαθορισμένο | περιγραφή |
---|---|---|---|
σκηνικό | boolean ή η συμβολοσειρά'static' |
αληθής | Περιλαμβάνει ένα στοιχείο modal-backdrop. Εναλλακτικά, καθορίστε static ένα φόντο που δεν κλείνει το modal όταν κάνετε κλικ. |
πληκτρολόγιο | boolean | αληθής | Κλείνει το modal όταν πατηθεί το πλήκτρο escape |
προβολή | boolean | αληθής | Εμφανίζει το modal όταν αρχικοποιηθεί. |
μακρινός | μονοπάτι | ψευδής | Αυτή η επιλογή έχει καταργηθεί από την έκδοση 3.3.0 και έχει καταργηθεί στην έκδοση 4. Συνιστούμε να χρησιμοποιήσετε πρότυπο από την πλευρά του πελάτη ή ένα πλαίσιο σύνδεσης δεδομένων ή να καλέσετε μόνοι σας το jQuery.load . Εάν παρέχεται μια απομακρυσμένη διεύθυνση URL, το περιεχόμενο θα φορτωθεί μία φορά μέσω της μεθόδου του jQuery |
.modal(options)
Ενεργοποιεί το περιεχόμενό σας ως τρόπο λειτουργίας. Αποδέχεται μια προαιρετική επιλογή object
.
.modal('toggle')
Εναλλάσσει χειροκίνητα ένα modal. Επιστρέφει στον καλούντα πριν εμφανιστεί ή κρυφτεί πραγματικά το modal (δηλαδή πριν συμβεί το shown.bs.modal
ή το hidden.bs.modal
συμβάν).
.modal('show')
Ανοίγει χειροκίνητα ένα modal. Επιστρέφει στον καλούντα πριν εμφανιστεί στην πραγματικότητα το modal (δηλαδή πριν συμβεί το shown.bs.modal
συμβάν).
.modal('hide')
Χειροκίνητα κρύβει ένα modal. Επιστρέφει στον καλούντα πριν από την πραγματική απόκρυψη του modal (δηλαδή πριν συμβεί το hidden.bs.modal
συμβάν).
.modal('handleUpdate')
Προσαρμόζει ξανά τη θέση του modal για να αντισταθμίσει μια γραμμή κύλισης σε περίπτωση που εμφανιστεί, κάτι που θα έκανε το modal άλμα προς τα αριστερά.
Χρειάζεται μόνο όταν το ύψος του modal αλλάζει ενώ είναι ανοιχτό.
Η κλάση modal του Bootstrap εκθέτει μερικά συμβάντα για σύνδεση στη λειτουργικότητα του modal.
Όλα τα τροπικά συμβάντα πυροδοτούνται στο ίδιο το modal (δηλαδή στο <div class="modal">
).
Τύπος συμβάντος | Περιγραφή |
---|---|
εμφανίζω.β.τροπικό | Αυτό το συμβάν ενεργοποιείται αμέσως όταν show καλείται η μέθοδος παρουσίας. Εάν προκαλείται από ένα κλικ, το στοιχείο στο οποίο έγινε κλικ είναι διαθέσιμο ως relatedTarget ιδιότητα του συμβάντος. |
φαίνεται.β.τροπικό | Αυτό το συμβάν ενεργοποιείται όταν το modal έχει γίνει ορατό στον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS). Εάν προκαλείται από ένα κλικ, το στοιχείο στο οποίο έγινε κλικ είναι διαθέσιμο ως relatedTarget ιδιότητα του συμβάντος. |
απόκρυψη.β.τροπικό | Αυτό το συμβάν ενεργοποιείται αμέσως μετά την hide κλήση της μεθόδου παρουσίας. |
κρυφό.β.τροπικό | Αυτό το συμβάν ενεργοποιείται όταν ολοκληρωθεί η απόκρυψη του modal από τον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS). |
φορτωμένο.bs.modal | Αυτό το συμβάν ενεργοποιείται όταν το modal έχει φορτώσει περιεχόμενο χρησιμοποιώντας την remote επιλογή. |
Προσθέστε αναπτυσσόμενα μενού σε σχεδόν οτιδήποτε με αυτό το απλό πρόσθετο, συμπεριλαμβανομένων της γραμμής πλοήγησης, των καρτελών και των χαπιών.
Μέσω χαρακτηριστικών δεδομένων ή JavaScript, η αναπτυσσόμενη προσθήκη αλλάζει το κρυφό περιεχόμενο (αναπτυσσόμενα μενού) εναλλάσσοντας την .open
κλάση στο γονικό στοιχείο λίστας.
Σε κινητές συσκευές, το άνοιγμα ενός αναπτυσσόμενου μενού προσθέτει μια .dropdown-backdrop
περιοχή ως πάτημα για το κλείσιμο των αναπτυσσόμενων μενού όταν πατάτε έξω από το μενού, μια απαίτηση για σωστή υποστήριξη iOS. Αυτό σημαίνει ότι η μετάβαση από ένα ανοιχτό αναπτυσσόμενο μενού σε ένα διαφορετικό αναπτυσσόμενο μενού απαιτεί ένα επιπλέον πάτημα στο κινητό.
Σημείωση: Το data-toggle="dropdown"
χαρακτηριστικό βασίζεται για το κλείσιμο αναπτυσσόμενων μενού σε επίπεδο εφαρ��ογής, επομένως είναι καλή ιδέα να το χρησιμοποιείτε πάντα.
Προσθήκη data-toggle="dropdown"
σε σύνδεσμο ή κουμπί για εναλλαγή ενός αναπτυσσόμενου μενού.
Για να διατηρήσετε ανέπαφες τις διευθύνσεις URL με κουμπιά συνδέσμων, χρησιμοποιήστε το data-target
χαρακτηριστικό αντί για href="#"
.
Καλέστε τα αναπτυσσόμενα μενού μέσω JavaScript:
data-toggle="dropdown"
απαιτείται ακόμηΑνεξάρτητα από το αν καλείτε το αναπτυσσόμενο μενού μέσω JavaScript ή αντ' αυτού χρησιμοποιείτε το data-api, data-toggle="dropdown"
απαιτείται πάντα να υπάρχει στο στοιχείο ενεργοποίησης του αναπτυσσόμενου μενού.
Κανένας
$().dropdown('toggle')
Εναλλάσσει το αναπτυσσόμενο μενού μιας δεδομένης γραμμής πλοήγησης ή πλοήγησης με καρτέλες.
Όλα τα αναπτυσσόμενα συμβάντα ενεργοποιούνται στο .dropdown-menu
γονικό στοιχείο του '.
Όλα τα αναπτυσσόμενα συμβάντα έχουν μια relatedTarget
ιδιότητα, η τιμή της οποίας είναι το στοιχείο εναλλαγής αγκύρωσης.
Τύπος συμβάντος | Περιγραφή |
---|---|
εμφάνιση.β.αναπτυσσόμενο | Αυτό το συμβάν ενεργοποιείται αμέσως όταν καλείται η μέθοδος εμφάνισης. |
εμφανίζεται.bs.αναπτυσσόμενο | Αυτό το συμβάν ενεργοποιείται όταν το αναπτυσσόμενο μενού έχει γίνει ορατό στον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS). |
απόκρυψη.bs.αναπτυσσόμενο | Αυτό το συμβάν ενεργοποιείται αμέσως όταν καλείται η μέθοδος εμφάνισης απόκρυψης. |
hidden.bs.dropdown | Αυτό το συμβάν ενεργοποιείται όταν ολοκληρωθεί η απόκρυψη του αναπτυσσόμενου μενού από τον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS). |
Η προσθήκη ScrollSpy προορίζεται για αυτόματη ενημέρωση στόχων πλοήγησης με βάση τη θέση κύλισης. Κάντε κύλιση στην περιοχή κάτω από τη γραμμή πλοήγησης και παρακολουθήστε την αλλαγή της ενεργής τάξης. Τα αναπτυσσόμενα υποστοιχεία θα επισημανθούν επίσης.
Διαφημιστικό κολάν keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi πριν ξεπουλήσουν τα qui. Δικαιώματα ποδηλάτου Tumblr από farm-to-table ό,τι κι αν είναι. Ζακέτα Anim keffiyeh carles. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby πουλόβερ lomo jean σορτς, Wiliamsburg hoodie minim qui που μάλλον δεν έχετε ακούσει γι 'αυτούς και ζακέτα trust fund culpa biodiesel wes anderson αισθητική. Nihil τατουάζ accusamus, cred ειρωνεία βιοντίζελ keffiyeh artisan ullamco consequat.
Σκέιτμπορντ με μουστάκι Veniam marfa, γένια από φουτζάτο βελούδινο. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Φαγητό φορτηγό cosby πουλόβερ με τατουάζ, βινύλιο mcsweeney's quis non freegan. Lo-fi wes anderson +1 sartorial. Carles μη αισθητική άσκηση quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo ποδήλατα δικαιώματα adipisicing banh mi, velit ea sunt επόμενο επίπεδο locavore καφέ μίας προέλευσης στο magna veniam. High life id βινύλιο, echo park consequat quis aliquip banh mi pitchfork. Το Vero VHS είναι αδιαπέραστο. Consectetur nisi DIY minim messenger bag. Cred ex in, βιώσιμο delectus consectetur fanny pack iphone.
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa messenger bag marfa οτιδήποτε delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica κλισέ ειρωνεία, thundercats που μάλλον δεν έχετε ακούσει γι 'αυτούς συνεπάγονται hoodie χωρίς γλουτένη lo-fi fap aliquip. Οι εργάτες προτού ξεπουληθούν, ο Terry richardson proident brunch nesciunt quis cosby πουλόβερ pariatur keffiyeh ut helvetica artisan. Ζακέτα craft beer seitan έτοιμο βελίτ. VHS chambray laboris tempor veniam. Anim mollit minim commodo ulamco thundercats.
Οι σύνδεσμοι της γραμμής πλοήγησης πρέπει να έχουν επιλύσιμους στόχους αναγνωριστικού. Για παράδειγμα, το <a href="#home">home</a>
must αντιστοιχεί σε κάτι στο DOM όπως <div id="home"></div>
.
:visible
στοιχεία που δεν είναι στόχοι αγνοήθηκανΤα στοιχεία-στόχοι που δεν είναι :visible
σύμφωνα με το jQuery θα αγνοηθούν και τα αντίστοιχα στοιχεία πλοήγησής τους δεν θα επισημανθούν ποτέ.
Ανεξάρτητα από τη μέθοδο υλοποίησης, το scrollspy απαιτεί τη χρήση του position: relative;
στοιχείου που κατασκοπεύετε. Στις περισσότερες περιπτώσεις αυτό είναι το <body>
. Κατά την κύλιση σε στοιχεία εκτός από το <body>
, φροντίστε να έχετε ένα height
σύνολο και να το έχετε overflow-y: scroll;
εφαρμόσει.
Για να προσθέσετε εύκολα τη συμπεριφορά scrollspy στην πλοήγησή σας στην επάνω γραμμή, προσθέστε data-spy="scroll"
το στο στοιχείο που θέλετε να κατασκοπεύσετε (συνήθως αυτό θα ήταν το <body>
). Στη συνέχεια, προσθέστε το data-target
χαρακτηριστικό με το αναγνωριστικό ή την κλάση του γονικού στοιχείου οποιουδήποτε .nav
στοιχείου Bootstrap.
Αφού προσθέσετε position: relative;
το CSS σας, καλέστε το scrollspy μέσω JavaScript:
.scrollspy('refresh')
Όταν χρησιμοποιείτε το scrollspy σε συνδυασμό με την προσθήκη ή την αφαίρεση στοιχείων από το DOM, θα πρέπει να καλέσετε τη μέθοδο ανανέωσης ως εξής:
Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-
, όπως στο data-offset=""
.
Ονομα | τύπος | Προκαθορισμένο | περιγραφή |
---|---|---|---|
αντισταθμίζεται | αριθμός | 10 | Pixel για μετατόπιση από την κορυφή κατά τον υπολογισμό της θέσης κύλισης. |
Τύπος συμβάντος | Περιγραφή |
---|---|
activate.bs.scrollspy | Αυτό το συμβάν ενεργοποιείται κάθε φορά που ένα νέο στοιχείο ενεργοποιείται από το scrollspy. |
Προσθέστε γρήγορη, δυναμική λειτουργικότητα καρτελών για μετάβαση στα παράθυρα τοπικού περιεχομένου, ακόμη και μέσω αναπτυσσόμενων μενού. Οι ένθετες καρτέλες δεν υποστηρίζονται.
Ακατέργαστο τζιν που μάλλον δεν έχετε ακούσει γι 'αυτά τζιν σορτς Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Μουστάκι cliche tempor, Wiliamsburg carles vegan helvetica. Reprehenderit χασάπη ρετρό keffiyeh ονειροπαγίδα synth. Cosby πουλόβερ eu banh mi, qui irure terry richardson ex squid. Προσαρμόστε το για το iphone. Seitan aliquip quis ζακέτα αμερικανική ένδυση, κρεοπωλείο voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Αυτή η προσθήκη επεκτείνει το στοιχείο πλοήγησης με καρτέλες για να προσθέσει περιοχές με καρτέλες.
Ενεργοποίηση καρτελών με καρτέλες μέσω JavaScript (κάθε καρτέλα πρέπει να ενεργοποιηθεί ξεχωριστά):
Μπορείτε να ενεργοποιήσετε μεμονωμένες καρτέλες με διάφορους τρόπους:
Μπορείτε να ενεργοποιήσετε μια καρτέλα ή ένα χάπι πλοήγησης χωρίς να γράψετε JavaScript προσδιορίζοντας απλά data-toggle="tab"
ή data-toggle="pill"
σε ένα στοιχείο. Η προσθήκη των κλάσεων nav
και nav-tabs
στην καρτέλα θα εφαρμόσει το στυλ της καρτέλαςul
Bootstrap , ενώ η προσθήκη των κλάσεων και θα εφαρμόσει στυλ χαπιών .nav
nav-pills
Για να κάνετε τις καρτέλες να ξεθωριάζουν, προσθέστε .fade
σε κάθε .tab-pane
. Το πρώτο παράθυρο καρτέλας πρέπει επίσης .in
να κάνει ορατό το αρχικό περιεχόμενο.
$().tab
Ενεργοποιεί ένα στοιχείο καρτέλας και ένα κοντέινερ περιεχομένου. Η καρτέλα πρέπει να έχει είτε έναν data-target
είτε έναν href
κόμβο στόχευσης κοντέινερ στο DOM. Στα παραπάνω παραδείγματα, οι καρτέλες είναι οι <a>
s με data-toggle="tab"
χαρακτηριστικά.
.tab('show')
Επιλέγει τη δεδομένη καρτέλα και εμφανίζει το συσχετισμένο περιεχόμενό της. Οποιαδήποτε άλλη καρτέλα είχε προηγουμένως επιλεγεί δεν επιλέγεται και το συσχετισμένο περιεχόμενό της αποκρύπτεται. Επιστρέφει στον καλούντα πριν εμφανιστεί πραγματικά το παράθυρο καρτέλας (δηλαδή πριν συμβεί το shown.bs.tab
συμβάν).
Κατά την εμφάνιση μιας νέας καρτέλας, τα συμβάντα ενεργοποιούνται με την ακόλουθη σειρά:
hide.bs.tab
(στην τρέχουσα ενεργή καρτέλα)show.bs.tab
(στην καρτέλα που θα εμφανιστεί)hidden.bs.tab
(στην προηγο��μενη ενεργή καρτέλα, η ίδια με την hide.bs.tab
εκδήλωση)shown.bs.tab
(στην πρόσφατα ενεργή καρτέλα που μόλις εμφανίστηκε, η ίδια όπως και για την show.bs.tab
εκδήλωση)Εάν καμία καρτέλα δεν ήταν ήδη ενεργή, τότε τα συμβάντα hide.bs.tab
και hidden.bs.tab
δεν θα ενεργοποιηθούν.
Τύπος συμβάντος | Περιγραφή |
---|---|
show.bs.tab | Αυτό το συμβάν ενεργοποιείται στην εμφάνιση καρτελών, αλλά πριν εμφανιστεί η νέα καρτέλα. Χρησιμοποιήστε event.target και event.relatedTarget για να στοχεύσετε την ενεργή καρτέλα και την προηγούμενη ενεργή καρτέλα (αν είναι διαθέσιμη) αντίστοιχα. |
εμφανίζονται.bs.καρτέλα | Αυτό το συμβάν ενεργοποιείται στην εμφάνιση καρτελών μετά την εμφάνιση μιας καρτέλας. Χρησιμοποιήστε event.target και event.relatedTarget για να στοχεύσετε την ενεργή καρτέλα και την προηγούμενη ενεργή καρτέλα (αν είναι διαθέσιμη) αντίστοιχα. |
καρτέλα hide.bs | Αυτό το συμβάν ενεργοποιείται όταν πρόκειται να εμφανιστεί μια νέα καρτέλα (και επομένως η προηγούμενη ενεργή καρτέλα πρέπει να κρυφτεί). Χρησιμοποιήστε event.target και event.relatedTarget για να στοχεύσετε την τρέχουσα ενεργή καρτέλα και τη νέα καρτέλα που θα ενεργοποιηθεί σύντομα, αντίστοιχα. |
hidden.bs.tab | Αυτό το συμβάν ενεργοποιείται μετά την εμφάνιση μιας νέας καρτέλας (και επομένως η προηγούμενη ενεργή καρτέλα αποκρύπτεται). Χρησιμοποιήστε event.target και event.relatedTarget για να στοχεύσετε την προηγούμενη ενεργή καρτέλα και τη νέα ενεργή καρτέλα, αντίστοιχα. |
Εμπνευσμένο από το εξαιρετικό πρόσθετο jQuery.tipsy γραμμένο από τον Jason Frame. Οι συμβουλές εργαλείων είναι μια ενημερωμένη έκδοση, η οποία δεν βασίζεται σε εικόνες, χρησιμοποιεί CSS3 για κινούμενα σχέδια και χαρακτηριστικά δεδομένων για τοπική αποθήκευση τίτλων.
Επεξηγήσεις εργαλείων με τίτλους μηδενικού μήκους δεν εμφανίζονται ποτέ.
Τοποθετήστε το δείκτη του ποντικιού στους παρακάτω συνδέσμους για να δείτε συμβουλές εργαλείων:
Στενό παντελόνι επόμενου επιπέδου keffiyeh που μάλλον δεν το έχετε ακούσει. Photo booth γενειάδα ακατέργαστη τζιν letterpress vegan messenger τσάντα stumptown. Σεϊτάν από αγρόκτημα μέχρι τραπέζι, αμερικανικά ενδύματα βιώσιμης κινόα 8-bit της mcsweeney's έχουν ένα chambray βινυλίου terry richardson. Beard stumptown, ζακέτες banh mi lomo thundercats. Tofu βιοντίζελ Wiliamsburg marfa, τέσσερα loko mcsweeney's cleanse vegan chambray. Ένας πραγματικά ειρωνικός τεχνίτης , ανεξάρτητα από το keytar , σκηνικό από αγρόκτημα σε τραπέζι, με το twitter του Austin να χειρίζεται freegan cred raw τζιν καφέ μονής προέλευσης.
Είναι διαθέσιμες τέσσερις επιλογές: επάνω, δεξιά, κάτω και αριστερή στοίχιση.
Για λόγους απόδοσης, το Tooltip και το Popover data-api είναι opt-in, που σημαίνει ότι πρέπει να τα αρχικοποιήσετε μόνοι σας .
Ένας τρόπος για να αρχικοποιήσετε όλες τις συμβουλές εργαλείων σε μια σελίδα θα ήταν να τις επιλέξετε με βάση το data-toggle
χαρακτηριστικό τους:
Η προσθήκη συμβουλής εργαλείου δημιουργεί περιεχόμενο και σήμανση κατά απαίτηση και από προεπιλογή τοποθετεί τις συμβουλές εργαλείου μετά το στοιχείο ενεργοποίησης τους.
Ενεργοποιήστε την επεξήγηση εργαλείου μέσω JavaScript:
Η απαιτούμενη σήμανση για μια επεξήγηση εργαλείου είναι μόνο ένα data
χαρακτηριστικό και title
στο στοιχείο HTML θέλετε να έχετε μια επεξήγηση εργαλείου. Η παραγόμενη σήμανση μιας συμβουλής εργαλείου είναι μάλλον απλή, αν και απαιτεί μια θέση (από προεπιλογή, ρυθμισμένη top
από το πρόσθετο).
Μερικές φορές θέλετε να προσθέσετε μια επεξήγηση εργαλείου σε έναν υπερσύνδεσμο που αναδιπλώνει πολλές γραμμές. Η προεπιλεγμένη συμπεριφορά του πρόσθετου συμβουλής εργαλείου είναι να το κεντράρετε οριζόντια και κάθετα. Προσθέστε white-space: nowrap;
στις άγκυρες σας για να το αποφύγετε.
Όταν χρησιμοποιείτε συμβουλές εργαλείων σε στοιχεία μέσα σε ένα .btn-group
ή ένα .input-group
ή σε στοιχεία που σχετίζονται με τον πίνακα ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, <tfoot>
), θα πρέπει να καθορίσετε την επιλογή container: 'body'
(που τεκμηριώνεται παρακάτω) για να αποφύγετε ανεπιθύμητες παρενέργειες (όπως το στοιχείο που μεγαλώνει και/ ή να χάσει τις στρογγυλεμένες γωνίες του όταν ενεργοποιείται το άκρο εργαλείου).
Για χρήστες που πλοηγούνται με πληκτρολόγιο, και ειδικότερα χρήστες υποστηρικτικών τεχνολογιών, θα πρέπει να προσθέτετε συμβουλές εργαλείων μόνο σε στοιχεία με δυνατότητα εστίασης στο πληκτρολόγιο, όπως συνδέσμους, στοιχεία ελέγχου φόρμας ή οποιοδήποτε αυθαίρετο στοιχείο με tabindex="0"
χαρακτηριστικό.
Για να προσθέσετε μια επεξήγηση εργαλείου σε ένα disabled
ή .disabled
στοιχείο, τοποθετήστε το στοιχείο μέσα σε ένα <div>
και εφαρμόστε την επεξήγηση εργαλείου σε αυτό <div>
.
Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-
, όπως στο data-animation=""
.
Ονομα | Τύπος | Προκαθορισμένο | Περιγραφή |
---|---|---|---|
κινουμένων σχεδίων | boolean | αληθής | Εφαρμόστε μια μετάβαση εξαφάνισης CSS στην επεξήγηση εργαλείου |
δοχείο | χορδή | ψευδής | ψευδής | Προσθέτει την επεξήγηση εργαλείου σε ένα συγκεκριμένο στοιχείο. Παράδειγμα: |
καθυστέρηση | αριθμός | αντικείμενο | 0 | Καθυστέρηση εμφάνισης και απόκρυψης της επεξήγησης εργαλείου (ms) - δεν ισχύει για τον τύπο χειροκίνητης σκανδάλης Εάν παρέχεται ένας αριθμός, εφαρμόζεται καθυστέρηση και για την απόκρυψη/εμφάνιση Η δομή του αντικειμένου είναι: |
html | boolean | ψευδής | Εισαγάγετε HTML στην επεξήγηση εργαλείου. Εάν είναι false, η μέθοδος του jQuery text θα χρησιμοποιηθεί για την εισαγωγή περιεχομένου στο DOM. Χρησιμοποιήστε κείμενο εάν ανησυχείτε για επιθέσεις XSS. |
τοποθέτηση | χορδή | λειτουργία | 'μπλουζα' | Πώς να τοποθετήσετε την επεξήγηση εργαλείου - επάνω | κάτω | αριστερά | δεξιά | αυτο. Όταν μια συνάρτηση χρησιμοποιείται για τον προσδιορισμό της τοποθέτησης, καλείται με πρώτο όρισμα τον κόμβο DOM επεξήγησης εργαλείου και δεύτερο τον κόμβο DOM στοιχείο ενεργοποίησης. Το |
εκλέκτορας | σειρά | ψευδής | Εάν παρέχεται ένας επιλογέας, τα αντικείμενα συμβουλής εργαλείου θα εκχωρηθούν στους καθορισμένους στόχους. Στην πράξη, αυτό χρησιμοποιείται για να επιτρέψει στο δυναμικό περιεχόμενο HTML να προστεθούν συμβουλές εργαλείων. Δείτε αυτό και ένα ενημερωτικό παράδειγμα . |
πρότυπο | σειρά | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Βάση HTML για χρήση κατά τη δημιουργία της επεξήγησης εργαλείου. Η συμβουλή εργαλείου
Το πιο εξωτερικό στοιχείο περιτυλίγματος θα πρέπει να έχει την |
τίτλος | χορδή | λειτουργία | '' | Προεπιλεγμένη τιμή τίτλου εάν Εάν δοθεί μια συνάρτηση, θα κληθεί με το |
δώσει το έναυσμα για | σειρά | "εστίαση αιώρησης" | Πώς ενεργοποιείται η συμβουλή εργαλείου - κάντε κλικ στο | αιωρούνται | εστίαση | εγχειρίδιο. Μπορείτε να περάσετε πολλαπλούς ερεθισμούς. χωρίστε τα με ένα κενό. manual δεν μπορεί να συνδυαστεί με καμία άλλη σκανδάλη. |
θέαση | χορδή | αντικείμενο | λειτουργία | { Selector: 'body', padding: 0 } | Διατηρεί την επεξήγηση εργαλείου εντός των ορίων αυτού του στοιχείου. Παράδειγμα: Εάν δοθεί μια συνάρτηση, καλείται με μοναδικό όρισμα τον κόμβο DOM στοιχείου ενεργοποίησης. Το |
Επιλογές για μεμονωμένες συμβουλές εργαλείων μπορούν εναλλακτικά να καθοριστούν μέσω της χρήσης χαρακτηριστικών δεδομένων, όπως εξηγήθηκε παραπάνω.
$().tooltip(options)
Προσαρτά έναν χειριστή συμβουλών εργαλείου σε μια συλλογή στοιχείων.
.tooltip('show')
Αποκαλύπτει την επεξήγηση εργαλείου ενός στοιχείου. Επιστρέφει στον καλούντα πριν εμφανιστεί πραγματικά η συμβουλή εργαλείου (δηλαδή πριν συμβεί το shown.bs.tooltip
συμβάν). Αυτό θεωρείται ως "χειροκίνητη" ενεργοποίηση της συμβουλής εργαλείου. Επεξηγήσεις εργαλείων με τίτλους μηδενικού μήκους δεν εμφανίζονται ποτέ.
.tooltip('hide')
Κρύβει την επεξήγηση εργαλείου ενός στοιχείου. Επιστρέφει στον καλούντα προτού η επεξήγηση εργαλείου έχει πραγματικά κρυφτεί (δηλαδή πριν συμβεί το hidden.bs.tooltip
συμβάν). Αυτό θεωρείται ως "χειροκίνητη" ενεργοποίηση της συμβουλής εργαλείου.
.tooltip('toggle')
Εναλλάσσει την επεξήγηση εργαλείου ενός στοιχείου. Επιστρέφει στον καλούντα πριν εμφανιστεί ή κρυφτεί πραγματικά η συμβουλή εργαλείου (δηλαδή πριν συμβεί το shown.bs.tooltip
ή το hidden.bs.tooltip
συμβάν). Αυτό θεωρείται ως "χειροκίνητη" ενεργοποίηση της συμβουλής εργαλείου.
.tooltip('destroy')
Κρύβει και καταστρέφει την επεξήγηση εργαλείου ενός στοιχείου. Οι επεξηγήσεις εργαλείων που χρησιμοποιούν ανάθεση (οι οποίες δημιουργούνται χρησιμοποιώντας την selector
επιλογή ) δεν μπορούν να καταστραφούν μεμονωμένα σε στοιχεία ενεργοποίησης καταγωγής.
Τύπος συμβάντος | Περιγραφή |
---|---|
show.bs.tooltip | Αυτό το συμβάν ενεργοποιείται αμέσως όταν show καλείται η μέθοδος παρουσίας. |
εμφανίζεται.bs.επεξήγηση εργαλείου | Αυτό το συμβάν ενεργοποιείται όταν η επεξήγηση εργαλείου έχει γίνει ορατή στον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS). |
απόκρυψη.bs.επεξήγηση εργαλείου | Αυτό το συμβάν ενεργοποιείται αμέσως μετά την hide κλήση της μεθόδου παρουσίας. |
hidden.bs.tooltip | Αυτό το συμβάν ενεργοποιείται όταν ολοκληρωθεί η απόκρυψη της επεξήγησης εργαλείου από τον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS). |
εισήχθη.bs.επεξήγηση εργαλείου | Αυτό το συμβάν ενεργοποιείται μετά το show.bs.tooltip συμβάν όταν το πρότυπο συμβουλής εργαλείου έχει προστεθεί στο DOM. |
Προσθέστε μικρές επικαλύψεις περιεχομένου, όπως αυτές στο iPad, σε οποιοδήποτε στοιχείο για τη στέγαση δευτερευουσών πληροφοριών.
Τα popover των οποίων τόσο ο τίτλος όσο και το περιεχόμενο είναι μηδενικού μήκους δεν εμφανίζονται ποτέ.
Τα popovers απαιτούν να συμπεριληφθεί η προσθήκη συμβουλής εργαλείου στην έκδοση του Bootstrap που διαθέτετε.
Για λόγους απόδοσης, το Tooltip και το Popover data-api είναι opt-in, που σημαίνει ότι πρέπει να τα αρχικοποιήσετε μόνοι σας .
Ένας τρόπος για να αρχικοποιήσετε όλα τα popover σε μια σελίδα θα ήταν να τα επιλέξετε με βάση το data-toggle
χαρακτηριστικό τους:
Όταν χρησιμοποιείτε popover σε στοιχεία μέσα σε ένα .btn-group
ή ένα .input-group
ή σε στοιχεία που σχετίζονται με τον πίνακα ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, <tfoot>
), θα πρέπει να καθορίσετε την επιλογή container: 'body'
(που τεκμηριώνεται παρακάτω) για να αποφύγετε ανεπιθύμητες παρενέργειες (όπως το στοιχείο που μεγαλώνει και/ ή χάνει τις στρογγυλεμένες γωνίες του όταν ενεργοποιείται το popover).
Για να προσθέσετε ένα popover σε ένα disabled
ή .disabled
στοιχείο, βάλτε το στοιχείο μέσα σε ένα <div>
και εφαρμόστε το popover σε αυτό <div>
.
Μερικές φορές θέλετε να προσθέσετε ένα popover σε έναν υπερσύνδεσμο που αναδιπλώνει πολλές γραμμές. Η προεπιλεγμένη συμπεριφορά του πρόσθετου popover είναι να το κεντράρετε οριζόντια και κάθετα. Προσθέστε white-space: nowrap;
στις άγκυρες σας για να το αποφύγετε.
Είναι διαθέσιμες τέσσερις επιλογές: επάνω, δεξιά, κάτω και αριστερή στοίχιση.
Αυτή η θέση είναι σε λοβό. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Αυτή η θέση είναι σε λοβό. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Αυτή η θέση είναι σε λοβό. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Αυτή η θέση είναι σε λοβό. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Χρησιμοποιήστε το focus
έναυσμα για να απορρίψετε τα popover στο επόμενο κλικ που κάνει ο χρήστης.
Για σωστή συμπεριφορά μεταξύ προγραμμάτων περιήγησης και πολλαπλών πλατφορμών, πρέπει να χρησιμοποιήσετε την <a>
ετικέτα, όχι την <button>
ετικέτα, και πρέπει επίσης να συμπεριλάβετε τα χαρακτηριστικά role="button"
και tabindex
.
Ενεργοποίηση popovers μέσω JavaScript:
Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-
, όπως στο data-animation=""
.
Ονομα | Τύπος | Προκαθορισμένο | Περιγραφή |
---|---|---|---|
κινουμένων σχεδίων | boolean | αληθής | Εφαρμόστε μια μετάβαση εξαφάνισης CSS στο popover |
δοχείο | χορδή | ψευδής | ψευδής | Προσθέτει το popover σε ένα συγκεκριμένο στοιχείο. Παράδειγμα: |
περιεχόμενο | χορδή | λειτουργία | '' | Προεπιλεγμένη τιμή περιεχομένου εάν Εάν δοθεί μια συνάρτηση, θα κληθεί με το |
καθυστέρηση | αριθμός | αντικείμενο | 0 | Καθυστέρηση εμφάνισης και απόκρυψης του popover (ms) - δεν ισχύει για τον τύπο χειροκίνητης σκανδάλης Εάν παρέχεται ένας αριθμός, εφαρμόζεται καθυστέρηση και για την απόκρυψη/εμφάνιση Η δομή του αντικειμένου είναι: |
html | boolean | ψευδής | Εισαγάγετε HTML στο popover. Εάν είναι false, η μέθοδος του jQuery text θα χρησιμοποιηθεί για την εισαγωγή περιεχομένου στο DOM. Χρησιμοποιήστε κείμενο εάν ανησυχείτε για επιθέσεις XSS. |
τοποθέτηση | χορδή | λειτουργία | 'σωστά' | Πώς να τοποθετήσετε το popover - top | κάτω | αριστερά | δεξιά | αυτο. Όταν μια συνάρτηση χρησιμοποιείται για τον προσδιορισμό της τοποθέτησης, καλείται με πρώτο όρισμα τον κόμβο DOM popover και δεύτερο τον κόμβο DOM στοιχείο ενεργοποίησης. Το |
εκλέκτορας | σειρά | ψευδής | Εάν παρέχεται επιλογέας, τα αντικείμενα popover θα εκχωρηθούν στους καθορισμένους στόχους. Στην πράξη, αυτό χρησιμοποιείται για να επιτρέψει στο δυναμικό περιεχόμενο HTML να προστεθούν popover. Δείτε αυτό και ένα ενημερωτικό παράδειγμα . |
πρότυπο | σειρά | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Βάση HTML για χρήση κατά τη δημιουργία του popover. Το popover's Το popover's
Το πιο εξωτερικό στοιχείο περιτυλίγματος θα πρέπει να έχει την |
τίτλος | χορδή | λειτουργία | '' | Προεπιλεγμένη τιμή τίτλου εάν Εάν δοθεί μια συνάρτηση, θα κληθεί με το |
δώσει το έναυσμα για | σειρά | 'Κάντε κλικ' | Πώς ενεργοποιείται το popover - κάντε κλικ | αιωρούνται | εστίαση | εγχειρίδιο. Μπορείτε να περάσετε πολλαπλούς ερεθισμούς. χωρίστε τα με ένα κενό. manual δεν μπορεί να συνδυαστεί με καμία άλλη σκανδάλη. |
θέαση | χορδή | αντικείμενο | λειτουργία | { Selector: 'body', padding: 0 } | Διατηρεί το popover εντός των ορίων αυτού του στοιχείου. Παράδειγμα: Εάν δοθεί μια συνάρτηση, καλείται με μοναδικό όρισμα τον κόμβο DOM στοιχείου ενεργοποίησης. Το |
Οι επιλογές για μεμονωμένα popover μπορούν εναλλακτικά να καθοριστούν μέσω της χρήσης των χαρακτηριστικών δεδομένων, όπως εξηγείται παραπάνω.
$().popover(options)
Αρχικοποιεί τα popover για μια συλλογή στοιχείων.
.popover('show')
Αποκαλύπτει το popover ενός στοιχείου. Επιστρέφει στον καλούντα πριν εμφανιστεί πραγματικά το popover (δηλαδή πριν συμβεί το shown.bs.popover
συμβάν). Αυτό θεωρείται «χειροκίνητο» έναυσμα του popover. Τα popover των οποίων τόσο ο τίτλος όσο και το περιεχόμενο είναι μηδενικού μήκους δεν εμφανίζονται ποτέ.
.popover('hide')
Κρύβει το popover ενός στοιχείου. Επιστρέφει στον καλούντα πριν από την πραγματική απόκρυψη του popover (δηλαδή πριν συμβεί το hidden.bs.popover
συμβάν). Αυτό θεωρείται «χειροκίνητο» έναυσμα του popover.
.popover('toggle')
Εναλλάσσει το popover ενός στοιχείου. Επιστρέφει στον καλούντα πριν εμφανιστεί ή κρυφτεί πραγματικά το popover (δηλαδή πριν συμβεί το shown.bs.popover
ή το hidden.bs.popover
συμβάν). Αυτό θεωρείται «χειροκίνητο» έναυσμα του popover.
.popover('destroy')
Κρύβει και καταστρέφει το popover ενός στοιχείου. Τα popover που χρησιμοποιούν ανάθεση (τα οποία δημιουργούνται χρησιμοποιώντας την selector
επιλογή ) δεν μπορούν να καταστραφούν μεμονωμένα στα στοιχεία ενεργοποίησης καταγωγής.
Τύπος συμβάντος | Περιγραφή |
---|---|
show.bs.popover | Αυτό το συμβάν ενεργοποιείται αμέσως όταν show καλείται η μέθοδος παρουσίας. |
δεικνύεται.βς.popover | Αυτό το συμβάν ενεργοποιείται όταν το popover έχει γίνει ορατό στον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS). |
απόκρυψη.μπς.popover | Αυτό το συμβάν ενεργοποιείται αμέσως μετά την hide κλήση της μεθόδου παρουσίας. |
κρυφός.β.ποποβερ | Αυτό το συμβάν ενεργοποιείται όταν ολοκληρωθεί η απόκρυψη του popover από τον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS). |
εισήχθη.μπς.popover | Αυτό το συμβάν ενεργοποιείται μετά το show.bs.popover συμβάν όταν το πρότυπο popover έχει προστεθεί στο DOM. |
Προσθέστε τη λειτουργία απόρριψης σε όλα τα μηνύματα ειδοποίησης με αυτήν την προσθήκη.
Όταν χρησιμοποιείτε ένα .close
κουμπί, πρέπει να είναι το πρώτο θυγατρικό του .alert-dismissible
και κανένα περιεχόμενο κειμένου δεν επιτρέπεται να εμφανίζεται πριν από αυτό στη σήμανση.
Αλλάξτε αυτό και αυτό και δοκιμάστε ξανά. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Απλώς προσθέστε data-dismiss="alert"
το στο κουμπί κλεισίματος για να δώσετε αυτόματα μια λειτουργία κλεισίματος ειδοποίησης. Το κλείσιμο μιας ειδοποίησης την αφαιρεί από το DOM.
Για να χρησιμοποιούν οι ειδοποιήσεις σας κινούμενα σχέδια κατά το κλείσιμο, βεβαιωθείτε ότι έχουν το .fade
και.in
οι κλάσεις σε αυτές.
$().alert()
Κάνει μια ειδοποίηση να ακούει για συμβάντα κλικ σε στοιχεία καταγωγής που έχουν το data-dismiss="alert"
χαρακτηριστικό. (Δεν είναι απαραίτητο όταν χρησιμοποιείτε την αυτόματη προετοιμασία του data-api.)
$().alert('close')
Κλείνει μια ειδοποίηση αφαιρώντας την από το DOM. Εάν υπάρχουν οι κλάσεις .fade
και .in
στο στοιχείο, η ειδοποίηση θα εξαφανιστεί πριν αφαιρεθεί.
Η προσθήκη ειδοποίησης του Bootstrap εκθέτει μερικά συμβάντα για σύνδεση στη λειτουργικότητα ειδοποίησης.
Τύπος συμβάντος | Περιγραφή |
---|---|
κλείσιμο.β.ειδοποίηση | Αυτό το συμβάν ενεργοποιείται αμέσως όταν close καλείται η μέθοδος παρουσίας. |
κλειστό.β.συναγερμός | Αυτό το συμβάν ενεργοποιείται όταν η ειδοποίηση έχει κλείσει (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS). |
Κάντε περισσότερα με τα κουμπιά. Ελέγξτε τις καταστάσεις του κουμπιού ή δημιουργήστε ομάδες κουμπιών για περισσότερα στοιχεία όπως γραμμές εργαλείων.
Ο Firefox διατηρείται από καταστάσεις ελέγχου (απενεργοποίηση και έλεγχος) σε όλες τις φορτώσεις σελίδων . Μια λύση για αυτό είναι να χρησιμοποιήσετε autocomplete="off"
. Δείτε το σφάλμα Mozilla #654072 .
Προσθήκη data-loading-text="Loading..."
για χρήση μιας κατάστασης φόρτωσης σε ένα κουμπί.
Αυτή η δυνατότητα έχει καταργηθεί από την έκδοση 3.3.5 και έχει καταργηθεί στην έκδοση 4.
Για χάρη αυτής της επίδειξης, χρησιμοποιούμε data-loading-text
και $().button('loading')
, αλλά αυτή δεν είναι η μόνη κατάσταση που μπορείτε να χρησιμοποιήσετε. Δείτε περισσότερα σχετικά με αυτό παρακάτω στην $().button(string)
τεκμηρίωση .
Προσθήκη data-toggle="button"
για ενεργοποίηση εναλλαγής σε ένα μόνο κουμπί.
.active
καιaria-pressed="true"
Για κουμπιά με προεναλλαγή, πρέπει να προσθέσετε την .active
κλάση και το aria-pressed="true"
χαρακτηριστικό στον button
εαυτό σας.
Προσθέστε data-toggle="buttons"
σε ένα .btn-group
πλαίσιο ελέγχου που περιέχει ή εισόδους ραδιοφώνου για να ενεργοποιήσετε την εναλλαγή στα αντίστοιχα στυλ τους.
.active
Για προεπιλεγμένες επιλογές, πρέπει να προσθέσετε μόνοι σας την .active
κλάση στην είσοδο label
.
Εάν η επιλεγμένη κατάσταση ενός κουμπιού πλαισίου ελέγχου ενημερωθεί χωρίς να ενεργοποιηθεί ένα click
συμβάν στο κουμπί (π.χ. μέσω <input type="reset">
ή μέσω ρύθμισης της checked
ιδιότητας της εισόδου), θα χρειαστεί να αλλάξετε την .active
κλάση στην είσοδο label
μόνοι σας.
$().button('toggle')
Εναλλάσσει την κατάσταση ώθησης. Δίνει στο κουμπί την εμφάνιση ότι έχει ενεργοποιηθεί.
$().button('reset')
Επαναφέρει την κατάσταση του κουμπιού - αλλάζει κείμενο σε αρχικό κείμενο. Αυτή η μέθοδος είναι ασύγχρονη και επιστρέφει πριν ολοκληρωθεί πραγματικά η επαναφορά.
$().button(string)
Εναλλάσσει κείμενο σε οποιαδήποτε κατάσταση κειμένου που ορίζεται από δεδομένα.
Ευέλικτο πρόσθετο που χρησιμοποιεί μια χούφτα κλάσεων για εύκολη συμπεριφορά εναλλαγής.
Η σύμπτυξη απαιτεί να συμπεριληφθεί η προσθήκη μεταβάσεις στην έκδοση του Bootstrap που διαθέτετε.
Κάντε κλικ στα κουμπιά παρακάτω για εμφάνιση και απόκρυψη ενός άλλου στοιχείου μέσω αλλαγών κλάσης:
.collapse
κρύβει περιεχόμενο.collapsing
εφαρμόζεται κατά τις μεταβάσεις.collapse.in
δείχνει περιεχόμενοΜπορείτε να χρησιμοποιήσετε έναν σύνδεσμο με το href
χαρακτηριστικό ή ένα κουμπί με το data-target
χαρακτηριστικό. Και στις δύο περιπτώσεις data-toggle="collapse"
απαιτείται.
Επεκτείνετε την προεπιλεγμένη συμπεριφορά σύμπτυξης για να δημιουργήσετε ένα ακορντεόν με το στοιχείο του πίνακα.
Είναι επίσης δυνατό να ανταλλάξετε .panel-body
s με .list-group
s.
Φροντίστε να προσθέσετε aria-expanded
στο στοιχείο ελέγχου. Αυτό το χαρακτηριστικό ορίζει ρητά την τρέχουσα κατάσταση του πτυσσόμενου στοιχείου σε συσκευές ανάγνωσης οθόνης και παρόμοιες υποστηρικτικές τεχνολογίες. Εάν το πτυσσόμενο στοιχείο είναι κλειστό από προεπιλογή, θα πρέπει να έχει τιμή aria-expanded="false"
. Εάν έχετε ρυθμίσει το πτυσσόμενο στοιχείο να είναι ανοιχτό από προεπιλογή χρησιμοποιώντας την in
κλάση, ορίστε aria-expanded="true"
το στο στοιχείο ελέγχου. Η προσθήκη θα αλλάξει αυτόματα αυτό το χαρακτηριστικό με βάση το εάν το πτυσσόμενο στοιχείο έχει ανοίξει ή κλείσει.
Επιπλέον, εάν το στοιχείο ελέγχου σας στοχεύει ένα μεμονωμένο πτυσσόμενο στοιχείο – δηλαδή το data-target
χαρακτηριστικό δείχνει σε έναν id
επιλογέα – μπορείτε να προσθέσετε ένα πρόσθετο aria-controls
χαρακτηριστικό στο στοιχείο ελέγχου, το οποίο να περιέχει το id
στοιχείο του πτυσσόμενου στοιχείου. Οι σύγχρονες συσκευές ανάγνωσης οθόνης και παρόμοιες υποστηρικτικές τεχνολογίες χρησιμοποιούν αυτό το χαρακτηριστικό για να παρέχουν στους χρήστες πρόσθετες συντομεύσεις για την απευθείας πλοήγηση στο ίδιο το πτυσσόμενο στοιχείο.
Το πρόσθετο κατάρρευσης χρησιμοποιεί μερικές κατηγορίες για να χειριστεί τη βαριά ανύψωση:
.collapse
κρύβει το περιεχόμενο.collapse.in
δείχνει το περιεχόμενο.collapsing
προστίθεται όταν ξεκινά η μετάβαση και αφαιρείται όταν τελειώσειΑυτές οι τάξεις βρίσκονται στο component-animations.less
.
Απλώς προσθέστε data-toggle="collapse"
και a data-target
στο στοιχείο για να εκχωρήσετε αυτόματα τον έλεγχο ενός πτυσσόμενου στοιχείου. Το data-target
χαρακτηριστικό δέχεται έναν επιλογέα CSS για εφαρμογή της σύμπτυξης. Φροντίστε να προσθέσετε την κλάση collapse
στο πτυσσόμενο στοιχείο. Εάν θέλετε να είναι ανοιχτό από προεπιλογή, προσθέστε την πρόσθετη κλάση in
.
Για να προσθέσετε διαχείριση ομάδας που μοιάζει με ακορντεόν σε ένα πτυσσόμενο στοιχείο ελέγχου, προσθέστε το χαρακτηριστικό δεδομένων data-parent="#selector"
. Ανατρέξτε στην επίδειξη για να το δείτε σε δράση.
Ενεργοποίηση μη αυτόματα με:
Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-
, όπως στο data-parent=""
.
Ονομα | τύπος | Προκαθορισμένο | περιγραφή |
---|---|---|---|
μητρική εταιρεία | εκλέκτορας | ψευδής | Εάν παρέχεται ένας επιλογέας, τότε όλα τα πτυσσόμενα στοιχεία κάτω από τον καθορισμένο γονέα θα κλείσουν όταν εμφανιστεί αυτό το πτυσσόμενο στοιχείο. (παρόμοια με την παραδοσιακή συμπεριφορά ακορντεόν - αυτό εξαρτάται από την panel τάξη) |
μεταβάλλω | boolean | αληθής | Εναλλάσσει το πτυσσόμενο στοιχείο κατά την επίκληση |
.collapse(options)
Ενεργοποιεί το περιεχόμενό σας ως πτυσσόμενο στοιχείο. Αποδέχεται μια προαιρετική επιλογή object
.
.collapse('toggle')
Εναλλάσσει ένα πτυσσόμενο στοιχείο σε εμφάνιση ή απόκρυψη. Επιστρέφει στον καλούντα πριν εμφανιστεί ή κρυφτεί το πτυσσόμενο στοιχείο (δηλαδή πριν συμβεί το shown.bs.collapse
ή το hidden.bs.collapse
συμβάν).
.collapse('show')
Εμφανίζει ένα πτυσσόμενο στοιχείο. Επιστρέφει στον καλούντα πριν εμφανιστεί πραγματικά το πτυσσόμενο στοιχείο (δηλαδή πριν συμβεί το shown.bs.collapse
συμβάν).
.collapse('hide')
Κρύβει ένα πτυσσόμενο στοιχείο. Επιστρέφει στον καλούντα πριν από την πραγματική απόκρυψη του πτυσσόμενου στοιχείου (δηλαδή πριν συμβεί το hidden.bs.collapse
συμβάν).
Η κλάση κατάρρευσης του Bootstrap εκθέτει μερικά συμβάντα για σύνδεση στη λειτουργικότητα κατάρρευσης.
Τύπος συμβάντος | Περιγραφή |
---|---|
εμφανίζω.β.κατάρρευση | Αυτό το συμβάν ενεργοποιείται αμέσως όταν show καλείται η μέθοδος παρουσίας. |
φαίνεται.β.σύμπτυξη | Αυτό το συμβάν ενεργοποιείται όταν ένα στοιχείο σύμπτυξης έχει γίνει ορατό στον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS). |
απόκρυψη.β.κατάρρευση | Αυτό το συμβάν ενεργοποιείται αμέσως μετά την hide κλήση της μεθόδου. |
κρυφός.β.σύμπτυξη | Αυτό το συμβάν ενεργοποιείται όταν ένα στοιχείο σύμπτυξης έχει κρυφτεί από τον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS). |
Ένα στοιχείο προβολής διαφανειών για ποδήλατο μέσα από στοιχεία, όπως ένα καρουζέλ. Τα ένθετα καρουζέλ δεν υποστηρίζονται.
Το στοιχείο καρουζέλ γενικά δεν συμμορφώνεται με τα πρότυπα προσβασιμότητας. Εάν πρέπει να συμμορφωθείτε, εξετάστε άλλες επιλογές για την παρουσίαση του περιεχομένου σας.
Το Bootstrap χρησιμοποιεί αποκλειστικά CSS3 για τα κινούμενα σχέδια του, αλλά ο Internet Explorer 8 και 9 δεν υποστηρίζουν τις απαραίτητες ιδιότητες CSS. Έτσι, δεν υπάρχουν κινούμενα σχέδια μετάβασης διαφανειών όταν χρησιμοποιείτε αυτά τα προγράμματα περιήγησης. Αποφασίσαμε σκόπιμα να μην συμπεριλάβουμε εναλλακτικές λύσεις που βασίζονται σε jQuery για τις μεταβάσεις.
Η .active
κλάση πρέπει να προστεθεί σε μία από τις διαφάνειες. Διαφορετικά, το καρουσέλ δεν θα είναι ορατό.
Οι κλάσεις .glyphicon .glyphicon-chevron-left
και .glyphicon .glyphicon-chevron-right
δεν χρειάζονται απαραίτητα για τους ελέγχους. Το Bootstrap παρέχει .icon-prev
και .icon-next
ως απλές εναλλακτικές λύσεις unicode.
Προσθέστε λεζάντες στις διαφάνειές σας εύκολα με το .carousel-caption
στοιχείο μέσα σε οποιοδήποτε .item
. Τοποθετήστε σχεδόν οποιοδήποτε προαιρετικό HTML εκεί και θα ευθυγραμμιστεί και θα μορφοποιηθεί αυτόματα.
Τα καρουζέλ απαιτούν τη χρήση ενός id
στο πιο εξωτερικό δοχείο (το .carousel
) για να λειτουργούν σωστά τα χειριστήρια καρουζέλ. Όταν προσθέτετε πολλά καρουζέλ ή όταν αλλάζετε καρουζέλ id
, φροντίστε να ενημερώσετε τα σχετικά στοιχεία ελέγχου.
Χρησιμοποιήστε χαρακτηριστικά δεδομένων για να ελέγχετε εύκολα τη θέση του καρουζέλ. data-slide
αποδέχεται τις λέξεις-κλειδιά prev
ή next
, το οποίο αλλάζει τη θέση της διαφάνειας σε σχέση με την τρέχουσα θέση της. Εναλλακτικά, χρησιμοποιήστε data-slide-to
το για να περάσετε ένα ακατέργαστο ευρετήριο διαφάνειας στο καρουζέλ data-slide-to="2"
, το οποίο μετατοπίζει τη θέση της διαφάνειας σε ένα συγκεκριμένο ευρετήριο αρχίζοντας με 0
.
Το data-ride="carousel"
χαρακτηριστικό χρησιμοποιείται για την επισήμανση ενός καρουζέλ ως κινούμενης κίνησης ξεκινώντας από τη φόρτωση της σελίδας. Δεν μπορεί να χρησιμοποιηθεί σε συνδυασμό με (περιττή και περιττή) ρητή προετοιμασία JavaScript του ίδιου καρουζέλ.
Κλήση καρουζέλ χειροκίνητα με:
Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-
, όπως στο data-interval=""
.
Ονομα | τύπος | Προκαθορισμένο | περιγραφή |
---|---|---|---|
διάστημα | αριθμός | 5000 | Ο χρόνος καθυστέρησης μεταξύ της αυτόματης ανακύκλωσης ενός αντικειμένου. Εάν είναι false, το καρουζέλ δεν θα ανακυκλωθεί αυτόματα. |
παύση | χορδή | μηδενικό | "φτερουγίζω" | Εάν οριστεί σε "hover" , διακόπτει παύση το cycling του carousel on mouseenter και συνεχίζει το cycling του carousel on mouseleave . Εάν οριστεί σε null , η τοποθέτηση του δείκτη του ποντικιού πάνω από το καρουζέλ δεν θα το κάνει παύση. |
κάλυμμα | boolean | αληθής | Είτε το καρουζέλ πρέπει να κινείται συνεχώς ή να έχει σκληρές στάσεις. |
πληκτρολόγιο | boolean | αληθής | Εάν το καρουζέλ πρέπει να αντιδρά σε συμβάντα πληκτρολογίου. |
.carousel(options)
Αρχικοποιεί το καρουζέλ με προαιρετικές επιλογές object
και ξεκινάει να περιηγείται στα αντικείμενα.
.carousel('cycle')
Κυκλοφορεί μέσα από τα στοιχεία καρουζέλ από αριστερά προς τα δεξιά.
.carousel('pause')
Σταματά το καρουζέλ από το να περνάει με το ποδήλατο μέσα από αντικείμενα.
.carousel(number)
Κυκλοφορεί το καρουζέλ σε ένα συγκεκριμένο πλαίσιο (με βάση το 0, παρόμοιο με έναν πίνακα).
.carousel('prev')
Κύκλοι στο προηγούμενο στοιχείο.
.carousel('next')
Κύκλοι στο επόμενο στοιχείο.
Η κατηγορία καρουζέλ του Bootstrap εκθέτει δύο συμβάντα για σύνδεση στη λειτουργικότητα καρουζέλ.
Και τα δύο συμβάντα έχουν τις ακόλουθες πρόσθετες ιδιότητες:
direction
: Η κατεύθυνση προς την οποία ολισθαίνει το καρουσέλ (είτε "left"
είτε "right"
).relatedTarget
: Το στοιχείο DOM που τοποθετείται στη θέση του ως ενεργό στοιχείο.Όλα τα γεγονότα καρουσέλ πυροβολούνται στο ίδιο το καρουζέλ (δηλ. στο <div class="carousel">
).
Τύπος συμβάντος | Περιγραφή |
---|---|
τσουλήθρα.β.καρουσέλ | Αυτό το συμβάν ενεργοποιείται αμέσως όταν slide γίνεται επίκληση της μεθόδου παρουσίας. |
γλίστρησε.β.καρουσέλ | Αυτό το συμβάν ενεργοποιείται όταν το καρουζέλ έχει ολοκληρώσει τη μετάβασή του. |
Η προσθήκη επιθέματος position: fixed;
ενεργοποιείται και απενεργοποιείται, μιμούμενος το εφέ που βρέθηκε με το position: sticky;
. Η υποπλοήγηση στα δεξιά είναι μια ζωντανή επίδειξη του πρόσθετου affix.
Χρησιμοποιήστε την προσθήκη επιθέματος μέσω χαρακτηριστικών δεδομένων ή μη αυτόματα με τη δική σας JavaScript. Και στις δύο περιπτώσεις, πρέπει να παρέχετε CSS για τη θέση και το πλάτος του επικολλημένου περιεχομένου σας.
Σημείωση: Μην χρησιμοποιείτε την προσθήκη προσάρτησης σε ένα στοιχείο που περιέχεται σε ένα σχετικά τοποθετημένο στοιχείο, όπως μια τραβηγμένη ή ωθημένη στήλη, λόγω σφάλματος απόδοσης του Safari .
Το πρόσθετο επιθέματος εναλλάσσεται μεταξύ τριών κλάσεων, καθεμία από τις οποίες αντιπροσωπεύει μια συγκεκριμένη κατάσταση: .affix
, .affix-top
, και .affix-bottom
. Πρέπει να παρέχετε τα στυλ, με εξαίρεση το position: fixed;
on .affix
, για αυτές τις κλάσεις οι ίδιοι (ανεξάρτητα από αυτήν την προσθήκη) για να χειρίζονται τις πραγματικές θέσεις.
Δείτε πώς λειτουργεί η προσθήκη επιθέματος:
.affix-top
για να υποδείξει ότι το στοιχείο βρίσκεται στην υψηλότερη θέση του. Σε αυτό το σημείο δεν απαιτείται τοποθέτηση CSS..affix
αντικαθιστά .affix-top
και θέτει position: fixed;
(παρέχεται από το CSS του Bootstrap)..affix
με .affix-bottom
. Δεδομένου ότι οι μετατοπίσεις είναι προαιρετικές, η ρύθμιση μίας απαιτεί να ορίσετε το κατάλληλο CSS. Σε αυτή την περίπτωση, προσθέστε position: absolute;
όταν χρειάζεται. Η προσθήκη χρησιμοποιεί το χαρακτηριστικό δεδομένων ή την επιλογή JavaScript για να καθορίσει πού θα τοποθετήσει το στοιχείο από εκεί.Ακολουθήστε τα παραπάνω βήματα για να ρυθμίσετε το CSS σας για οποιαδήποτε από τις παρακάτω επιλογές χρήσης.
Για να προσθέσετε εύκολα συμπεριφορά προσάρτησης σε οποιοδήποτε στοιχείο, απλώς προσθέστε data-spy="affix"
το στο στοιχείο που θέλετε να κατασκοπεύσετε. Χρησιμοποιήστε μετατόπιση για να ορίσετε πότε θα εναλλάσσετε το καρφίτσωμα ενός στοιχείου.
Καλέστε την προσθήκη επιθέματος μέσω JavaScript:
Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-
, όπως στο data-offset-top="200"
.
Ονομα | τύπος | Προκαθορισμένο | περιγραφή |
---|---|---|---|
αντισταθμίζεται | αριθμός | λειτουργία | αντικείμενο | 10 | Pixel για μετατόπιση από την οθόνη κατά τον υπολογισμό της θέσης κύλισης. Εάν παρέχεται ένας μόνο αριθμός, η μετατόπιση θα εφαρμοστεί τόσο στην επάνω όσο και στην κάτω κατεύθυνση. Για να παρέχετε μια μοναδική, κάτω και πάνω μετατόπιση, απλώς δώστε ένα αντικείμενο offset: { top: 10 } ή offset: { top: 10, bottom: 5 } . Χρησιμοποιήστε μια συνάρτηση όταν χρειάζεται να υπολογίσετε δυναμικά μια μετατόπιση. |
στόχος | επιλογέας | κόμβος | στοιχείο jQuery | το window αντικείμενο |
Καθορίζει το στοιχείο προορισμού του επιθέματος. |
.affix(options)
Ενεργοποιεί το περιεχόμενό σας ως επικολλημένο περιεχόμενο. Αποδέχεται μια προαιρετική επιλογή object
.
.affix('checkPosition')
Υπολογίζει εκ νέου την κατάσταση του προσαρτήματος με βάση τις διαστάσεις, τη θέση και τη θέση κύλισης των σχετικών στοιχείων. Οι κλάσεις .affix
, .affix-top
, και .affix-bottom
προστίθενται ή αφαιρούνται από το επικολλημένο περιεχόμενο σύμφωνα με τη νέα κατάσταση. Αυτή η μέθοδος πρέπει να καλείται κάθε φορά που αλλάζουν οι διαστάσεις του επικολλημένου περιεχομένου ή του στοιχείου στόχου, για να διασφαλιστεί η σωστή τοποθέτηση του επικολλημένου περιεχομένου.
Το πρόσθετο επιθέματος του Bootstrap εκθέτει μερικά συμβάντα για σύνδεση στη λειτουργικότητα επιθέματος.
Τύπος συμβάντος | Περιγραφή |
---|---|
επικολλώ.β.σ | Αυτό το συμβάν ενεργοποιείται αμέσως πριν την τοποθέτηση του στοιχείου. |
επικολλήθηκε.β.σ | Αυτό το συμβάν ενεργοποιείται μετά την τοποθέτηση του στοιχείου. |
affix-top.bs.affix | Αυτό το συμβάν ενεργοποιείται αμέσως πριν το στοιχείο τοποθετηθεί στην κορυφή. |
affixed-top.bs.affix | Αυτό το συμβάν ενεργοποιείται αφού το στοιχείο έχει τοποθετηθεί στην κορυφή. |
affix-bottom.bs.affix | Αυτό το συμβάν ενεργοποιείται αμέσως πριν το στοιχείο έχει επικολληθεί στο κάτω μέρος. |
affixed-bottom.bs.affix | Αυτό το συμβάν ενεργοποιείται αφού το στοιχείο έχει επικολληθεί στο κάτω μέρος. |