Source

Popovers

Τεκμηρίωση και παραδείγματα για την προσθήκη popover Bootstrap, όπως αυτά που βρίσκονται στο iOS, σε οποιοδήποτε στοιχείο στον ιστότοπό σας.

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

Πράγματα που πρέπει να γνωρίζετε όταν χρησιμοποιείτε την προσθήκη popover:

  • Τα popover βασίζονται στη βιβλιοθήκη Popper.js τρίτου μέρους για την τοποθέτηση. Πρέπει να συμπεριλάβετε το popper.min.js πριν από το bootstrap.js ή να χρησιμοποιήσετε το bootstrap.bundle.min.js/ bootstrap.bundle.jsπου περιέχει το Popper.js για να λειτουργήσουν τα popovers!
  • Τα popovers απαιτούν την προσθήκη συμβουλής εργαλείου ως εξάρτηση.
  • Εάν δημιουργείτε το JavaScript μας από την πηγή, απαιτείutil.js .
  • Τα popover επιλέγονται για λόγους απόδοσης, επομένως πρέπει να τα αρχικοποιήσετε μόνοι σας .
  • Το μηδενικό μήκος titleκαι contentοι τιμές δεν θα εμφανίσουν ποτέ popover.
  • Καθορίστε container: 'body'για να αποφύγετε την απόδοση προβλημάτων σε πιο σύνθετα στοιχεία (όπως οι ομάδες εισόδου, οι ομάδες κουμπιών κ.λπ.).
  • Η ενεργοποίηση popover σε κρυφά στοιχεία δεν θα λειτουργήσει.
  • Τα popover για .disabledή disabledτα στοιχεία πρέπει να ενεργοποιούνται σε ένα στοιχείο περιτυλίγματος.
  • Όταν ενεργοποιούνται από άγκυρες που τυλίγονται σε πολλές γραμμές, τα popover θα βρίσκονται στο κέντρο μεταξύ του συνολικού πλάτους των αγκυρίων. Χρησιμοποιήστε white-space: nowrap;το στο <a>s σας για να αποφύγετε αυτήν τη συμπεριφορά.
  • Τα popover πρέπει να είναι κρυφά πριν αφαιρεθούν τα αντίστοιχα στοιχεία τους από το DOM.

Συνεχίστε να διαβάζετε για να δείτε πώς λειτουργούν τα popovers με μερικά παραδείγματα.

Παράδειγμα: Ενεργοποιήστε τα popovers παντού

Ένας τρόπος για να αρχικοποιήσετε όλα τα popover σε μια σελίδα θα ήταν να τα επιλέξετε με βάση το data-toggleχαρακτηριστικό τους:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Παράδειγμα: Χρησιμοποιώντας την containerεπιλογή

Όταν έχετε κάποια στυλ σε ένα γονικό στοιχείο που παρεμβαίνουν σε ένα popover, θα θέλετε να καθορίσετε ένα προσαρμοσμένο container, έτσι ώστε το HTML του popover να εμφανίζεται σε αυτό το στοιχείο.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Παράδειγμα

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Τέσσερις κατευθύνσεις

Είναι διαθέσιμες τέσσερις επιλογές: επάνω, δεξιά, κάτω και αριστερή στοίχιση.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

Παράβλεψη στο επόμενο κλικ

Χρησιμοποιήστε το focusέναυσμα για να απορρίψετε τα popover στο επόμενο κλικ του χρήστη σε ένα διαφορετικό στοιχείο από το στοιχείο εναλλαγής.

Απαιτείται συγκεκριμένη σήμανση για την απόρριψη στο επόμενο κλικ

Για σωστή συμπεριφορά μεταξύ προγραμμάτων περιήγησης και μεταξύ πλατφορμών, πρέπει να χρησιμοποιήσετε την <a>ετικέτα, όχι την <button>ετικέτα, και πρέπει επίσης να συμπεριλάβετε ένα tabindexχαρακτηριστικό.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
  trigger: 'focus'
})

Απενεργοποιημένα στοιχεία

Τα στοιχεία με το disabledχαρακτηριστικό δεν είναι διαδραστικά, πράγμα που σημαίνει ότι οι χρήστες δεν μπορούν να τοποθετήσουν το δείκτη του ποντικιού ή να κάνουν κλικ σε αυτά για να ενεργοποιήσουν ένα popover (ή επεξήγηση εργαλείου). Ως λύση, θα θελήσετε να ενεργοποιήσετε το popover από ένα περιτύλιγμα <div>ή <span>και να παρακάμψετε το pointer-eventsστοιχείο στο απενεργοποιημένο στοιχείο.

Για απενεργοποιημένες ενεργοποιήσεις popover, μπορείτε επίσης να προτιμάτε data-trigger="hover"το popover να εμφανίζεται ως άμεση οπτική ανατροφοδότηση στους χρήστες σας, καθώς ενδέχεται να μην περιμένουν να κάνουν κλικ σε ένα απενεργοποιημένο στοιχείο.

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Χρήση

Ενεργοποίηση popovers μέσω JavaScript:

$('#example').popover(options)

Επιλογές

Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-, όπως στο data-animation="".

Ονομα Τύπος Προκαθορισμένο Περιγραφή
κινουμένων σχεδίων boolean αληθής Εφαρμόστε μια μετάβαση εξαφάνισης CSS στο popover
δοχείο χορδή | στοιχείο | ψευδής ψευδής

Προσθέτει το popover σε ένα συγκεκριμένο στοιχείο. Παράδειγμα: container: 'body'. Αυτή η επιλογή είναι ιδιαίτερα χρήσιμη καθώς σας επιτρέπει να τοποθετήσετε το popover στη ροή του εγγράφου κοντά στο στοιχείο ενεργοποίησης - το οποίο θα εμποδίσει το popover να μετακινηθεί μακριά από το στοιχείο ενεργοποίησης κατά τη διάρκεια μιας αλλαγής μεγέθους παραθύρου.

περιεχόμενο χορδή | στοιχείο | λειτουργία ''

Προεπιλεγμένη τιμή περιεχομένου εάν data-contentτο χαρακτηριστικό δεν υπάρχει.

Εάν δοθεί μια συνάρτηση, θα κληθεί με το thisσύνολο αναφοράς της στο στοιχείο στο οποίο είναι συνδεδεμένο το popover.

καθυστέρηση αριθμός | αντικείμενο 0

Καθυστέρηση εμφάνισης και απόκρυψης του popover (ms) - δεν ισχύει για τον τύπο χειροκίνητης σκανδάλης

Εάν παρέχεται ένας αριθμός, εφαρμόζεται καθυστέρηση και για την απόκρυψη/εμφάνιση

Η δομή του αντικειμένου είναι:delay: { "show": 500, "hide": 100 }

html boolean ψευδής Εισαγάγετε HTML στο popover. Εάν είναι false, η μέθοδος του jQuery textθα χρησιμοποιηθεί για την εισαγωγή περιεχομένου στο DOM. Χρησιμοποιήστε κείμενο εάν ανησυχείτε για επιθέσεις XSS.
τοποθέτηση χορδή | λειτουργία 'σωστά'

Πώς να τοποθετήσετε το popover - auto | κορυφή | κάτω | αριστερά | σωστά.
Όταν autoκαθοριστεί, θα αναπροσανατολίσει δυναμικά το popover.

Όταν μια συνάρτηση χρησιμοποιείται για τον προσδιορισμό της τοποθέτησης, καλείται με πρώτο όρισμα τον κόμβο DOM popover και δεύτερο τον κόμβο DOM στοιχείο ενεργοποίησης. Το thisπλαίσιο ορίζεται στην περίπτωση popover.

εκλέκτορας χορδή | ψευδής ψευδής Εάν παρέχεται επιλογέας, τα αντικείμενα popover θα εκχωρηθούν στους καθορισμένους στόχους. Στην πράξη, αυτό χρησιμοποιείται για να επιτρέψει στο δυναμικό περιεχόμενο HTML να προστεθούν popover. Δείτε αυτό και ένα ενημερωτικό παράδειγμα .
πρότυπο σειρά '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Βάση HTML για χρήση κατά τη δημιουργία του popover.

Το popover's titleθα εγχυθεί στο .popover-header.

Το popover's contentθα εγχυθεί στο .popover-body.

.arrowθα γίνει το βέλος του popover.

Το πιο εξωτερικό στοιχείο περιτυλίγματος θα πρέπει να έχει την .popoverκλάση.

τίτλος χορδή | στοιχείο | λειτουργία ''

Προεπιλεγμένη τιμή τίτλου εάν titleτο χαρακτηριστικό δεν υπάρχει.

Εάν δοθεί μια συνάρτηση, θα κληθεί με το thisσύνολο αναφοράς της στο στοιχείο στο οποίο είναι συνδεδεμένο το popover.

δώσει το έναυσμα για σειρά 'Κάντε κλικ' Πώς ενεργοποιείται το popover - κάντε κλικ | αιωρούνται | εστίαση | εγχειρίδιο. Μπορείτε να περάσετε πολλαπλούς ερεθισμούς. χωρίστε τα με ένα κενό. Το "εγχειρίδιο" δεν μπορεί να συνδυαστεί με κανένα άλλο έναυσμα.
αντισταθμίζεται αριθμός | σειρά 0 Αντιστάθμιση του popover σε σχέση με τον στόχο του. Για περισσότερες πληροφορίες, ανατρέξτε στα έγγραφα μετατόπισης του Popper.js .
εναλλακτική τοποθέτηση χορδή | πίνακας 'αναρρίπτω' Επιτρέψτε να καθορίσετε ποια θέση θα χρησιμοποιήσει ο Popper στην εναλλακτική. Για περισσότερες πληροφορίες, ανατρέξτε στα έγγραφα συμπεριφοράς του Popper.js
Όριο χορδή | στοιχείο 'scrollParent' Όριο περιορισμού υπερχείλισης του popover. Αποδέχεται τις τιμές του 'viewport', 'window', 'scrollParent'ή μιας αναφοράς HTMLElement (μόνο JavaScript). Για περισσότερες πληροφορίες, ανατρέξτε στα έγγραφα preventOverflow του Popper.js .

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

Οι επιλογές για μεμονωμένα popover μπορούν εναλλακτικά να καθοριστούν μέσω της χρήσης των χαρακτηριστικών δεδομένων, όπως εξηγείται παραπάνω.

Μέθοδοι

Ασύγχρονες μέθοδοι και μεταβάσεις

Όλες οι μέθοδοι API είναι ασύγχρονες και ξεκινούν μια μετάβαση . Επιστρέφουν στον καλούντα μόλις ξεκινήσει η μετάβαση αλλά πριν τελειώσει . Επιπλέον, μια κλήση μεθόδου σε ένα στοιχείο μετάβασης θα αγνοηθεί .

Δείτε την τεκμηρίωση JavaScript για περισσότερες πληροφορίες.

$().popover(options)

Αρχικοποιεί τα popover για μια συλλογή στοιχείων.

.popover('show')

Αποκαλύπτει το popover ενός στοιχείου. Επιστρέφει στον καλούντα πριν εμφανιστεί πραγματικά το popover (δηλαδή πριν συμβεί το shown.bs.popoverσυμβάν). Αυτό θεωρείται μια «χειροκίνητη» ενεργοποίηση του popover. Τα popover των οποίων τόσο ο τίτλος όσο και το περιεχόμενο είναι μηδενικού μήκους δεν εμφανίζονται ποτέ.

$('#element').popover('show')

.popover('hide')

Κρύβει το popover ενός στοιχείου. Επιστρέφει στον καλούντα πριν από την πραγματική απόκρυψη του popover (δηλαδή πριν συμβεί το hidden.bs.popoverσυμβάν). Αυτό θεωρείται μια «χειροκίνητη» ενεργοποίηση του popover.

$('#element').popover('hide')

.popover('toggle')

Εναλλάσσει το popover ενός στοιχείου. Επιστρέφει στον καλούντα πριν εμφανιστεί ή κρυφτεί πραγματικά το popover (δηλαδή πριν συμβεί το shown.bs.popoverή το hidden.bs.popoverσυμβάν). Αυτό θεωρείται μια «χειροκίνητη» ενεργοποίηση του popover.

$('#element').popover('toggle')

.popover('dispose')

Κρύβει και καταστρέφει το popover ενός στοιχείου. Τα popover που χρησιμοποιούν ανάθεση (τα οποία δημιουργούνται χρησιμοποιώντας την selectorεπιλογή ) δεν μπορούν να καταστραφούν μεμονωμένα στα στοιχεία ενεργοποίησης καταγωγής.

$('#element').popover('dispose')

.popover('enable')

Δίνει στο popover ενός στοιχείου τη δυνατότητα να εμφανίζεται. Τα popover είναι ενεργοποιημένα από προεπιλογή.

$('#element').popover('enable')

.popover('disable')

Καταργεί τη δυνατότητα εμφάνισης του popover ενός στοιχείου. Το popover θα μπορεί να εμφανιστεί μόνο εάν ενεργοποιηθεί ξανά.

$('#element').popover('disable')

.popover('toggleEnabled')

Εναλλάσσει τη δυνατότητα εμφάνισης ή απόκρυψης του popover ενός στοιχείου.

$('#element').popover('toggleEnabled')

.popover('update')

Ενημερώνει τη θέση του popover ενός στοιχείου.

$('#element').popover('update')

Εκδηλώσεις

Τύπος συμβάντος Περιγραφή
show.bs.popover Αυτό το συμβάν ενεργοποιείται αμέσως όταν showκαλείται η μέθοδος παρουσίας.
δεικνύεται.βς.popover Αυτό το συμβάν ενεργοποιείται όταν το popover έχει γίνει ορατό στον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS).
απόκρυψη.μπς.popover Αυτό το συμβάν ενεργοποιείται αμέσως μετά την hideκλήση της μεθόδου παρουσίας.
κρυφός.β.ποποβερ Αυτό το συμβάν ενεργοποιείται όταν ολοκληρωθεί η απόκρυψη του popover από τον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS).
εισήχθη.μπς.popover Αυτό το συμβάν ενεργοποιείται μετά το show.bs.popoverσυμβάν όταν το πρότυπο popover έχει προστεθεί στο DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})