JavaScript

Δώστε ζωή στα στοιχεία του Bootstrap—τώρα με 13 προσαρμοσμένα πρόσθετα jQuery.

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

Τα πρόσθετα μπορούν να συμπεριληφθούν μεμονωμένα (αν και ορισμένα απαιτούν εξαρτήσεις) ή όλα ταυτόχρονα. Τόσο το bootstrap.js όσο και το bootstrap.min.js περιέχουν όλες τις προσθήκες σε ένα μόνο αρχείο.

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

Μπορείτε να χρησιμοποιήσετε όλα τα πρόσθετα Bootstrap αποκλειστικά μέσω του API σήμανσης χωρίς να γράψετε ούτε μια γραμμή JavaScript. Αυτό είναι το API πρώτης κατηγορίας του Bootstrap και θα πρέπει να είναι η πρώτη σας σκέψη όταν χρησιμοποιείτε μια προσθήκη.

Τούτου λεχθέντος, σε ορισμένες περιπτώσεις μπορεί να είναι επιθυμητό να απενεργοποιήσετε αυτήν τη λειτουργία. Επομένως, παρέχουμε επίσης τη δυνατότητα απενεργοποίησης του API χαρακτηριστικού δεδομένων αποδεσμεύοντας όλα τα συμβάντα στον χώρο ονομάτων σώματος με "data-api"". Αυτό μοιάζει με αυτό:

  1. $ ( «σώμα» ). απενεργοποιημένο ( '.data-api' )

Εναλλακτικά, για να στοχεύσετε μια συγκεκριμένη προσθήκη, απλώς συμπεριλάβετε το όνομα της προσθήκης ως χώρο ονομάτων μαζί με τον χώρο ονομάτων του data-api ως εξής:

  1. $ ( «σώμα» ). off ( '.alert.data-api' )

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

Πιστεύουμε επίσης ότι θα πρέπει να μπορείτε να χρησιμοποιείτε όλα τα πρόσθετα Bootstrap αποκλειστικά μέσω του JavaScript API. Όλα τα δημόσια API είναι απλές, αλυσιδωτές μέθοδοι και επιστρέφουν τη συλλογή που έχει γίνει.

  1. $ ( ".btn.danger" ). κουμπί ( "εναλλαγή" ). addClass ( "λίπος" )

Όλες οι μέθοδοι πρέπει να δέχονται ένα αντικείμενο προαιρετικών επιλογών, μια συμβολοσειρά που στοχεύει μια συγκεκριμένη μέθοδο ή τίποτα (που εκκινεί μια προσθήκη με προεπιλεγμένη συμπεριφορά):

  1. $ ( "#myModal" ). modal () // αρχικοποιήθηκε με προεπιλογές
  2. $ ( "#myModal" ). modal ({ keyboard : false }) // αρχικοποιήθηκε χωρίς πληκτρολόγιο
  3. $ ( "#myModal" ). modal ( 'show' ) // αρχικοποιεί και επικαλείται την εμφάνιση αμέσως

Κάθε πρόσθετο εκθέτει επίσης τον ακατέργαστο κατασκευαστή του σε μια ιδιότητα "Constructor": $.fn.popover.Constructor. Εάν θέλετε να λάβετε μια συγκεκριμένη παρουσία προσθήκης, ανακτήστε την απευθείας από ένα στοιχείο: $('[rel=popover]').data('popover').

Καμία σύγκρουση

Μερικές φορές είναι απαραίτητο να χρησιμοποιήσετε πρόσθετα Bootstrap με άλλα πλαίσια διεπαφής χρήστη. Σε αυτές τις περιπτώσεις, ενδέχεται να προκύψουν περιστασιακά συγκρούσεις χώρου ονομάτων. Εάν συμβεί αυτό, μπορείτε να καλέσετε .noConflictτην προσθήκη που θέλετε να επαναφέρετε την τιμή της.

  1. var bootstrapButton = $ . fn . κουμπί . noConflict () // επιστροφή $.fn.button στην τιμή που είχε εκχωρηθεί προηγουμένως
  2. $ . fn . bootstrapBtn = bootstrapButton // δώσει $().bootstrapBtn τη λειτουργία εκκίνησης

Εκδηλώσεις

Το Bootstrap παρέχει προσαρμοσμένα συμβάντα για τις περισσότερες μοναδικές ενέργειες της προσθήκης. Γενικά, αυτά έρχονται σε αόριστο και παρελθοντικό - όπου το αόριστο (π.χ. show) ενεργοποιείται στην αρχή ενός γεγονότος και η παρελθοντική του μορφή (π. shown) ενεργοποιείται κατά την ολοκλήρωση μιας ενέργειας.

Όλα τα άπειρα συμβάντα παρέχουν λειτουργία preventDefault. Αυτό παρέχει τη δυνατότητα διακοπής της εκτέλεσης μιας ενέργειας πριν ξεκινήσει.

  1. $ ( '#myModal' ). on ( 'show' , function ( e ) {
  2. εάν (! δεδομένα ) επιστρέψουν e . preventDefault () // σταματά την εμφάνιση του modal
  3. })

Σχετικά με τις μεταβάσεις

Για απλά εφέ μετάβασης, συμπεριλάβετε το bootstrap-transition.js μαζί με τα άλλα αρχεία JS. Εάν χρησιμοποιείτε το μεταγλωττισμένο (ή ελαχιστοποιημένο) bootstrap.js , δεν χρειάζεται να το συμπεριλάβετε — είναι ήδη εκεί.

Θήκες χρήσης

Μερικά παραδείγματα της προσθήκης μετάβασης:

  • Ολίσθηση ή ξεθώριασμα στα modals
  • Ξεθώριασμα καρτελών
  • Εξασθένιση των ειδοποιήσεων
  • Συρόμενα τζάμια καρουζέλ

Παραδείγματα

Τα modal είναι βελτιωμένα, αλλά ευέλικτα, μηνύματα διαλόγου με την ελάχιστη απαιτούμενη λειτουργικότητα και έξυπνες προεπιλογές.

Στατικό παράδειγμα

Ένα αποδοθέν modal με κεφαλίδα, σώμα και σύνολο ενεργειών στο υποσέλιδο.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  4. <h3> Modal header </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Ένα ωραίο σώμα… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > Κλείσιμο </a>
  11. <a href = "#" class = "btn btn-primary" > Αποθήκευση αλλαγών </a>
  12. </div>
  13. </div>

Ζωντανή επίδειξη

Εναλλάξτε ένα modal μέσω JavaScript κάνοντας κλικ στο κουμπί παρακάτω. Θα γλιστρήσει προς τα κάτω και θα ξεθωριάσει από την κορυφή της σελίδας.

  1. <!-- Κουμπί ενεργοποίησης modal -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Έναρξη λειτουργίας επίδειξης </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Modal header </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Ένα ωραίο σώμα… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Κλείσιμο </button>
  15. <button class = "btn btn-primary" > Αποθήκευση αλλαγών </button>
  16. </div>
  17. </div>

Χρήση

Μέσω χαρακτηριστικών δεδομένων

Ενεργοποιήστε ένα modal χωρίς εγγραφή JavaScript. Ρυθμίστε data-toggle="modal"σε ένα στοιχείο ελεγκτή, όπως ένα κουμπί, μαζί με ένα data-target="#foo"ή href="#foo"για να στοχεύσετε ένα συγκεκριμένο modal για εναλλαγή.

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > Εκκίνηση τρόπου λειτουργίας </button>

Μέσω JavaScript

Κλήση ενός modal με αναγνωριστικό myModalμε μία μόνο γραμμή JavaScript:

  1. $ ( '#myModal' ). modal ( επιλογές )

Επιλογές

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

Ονομα τύπος Προκαθορισμένο περιγραφή
σκηνικό boolean αληθής Περιλαμβάνει ένα στοιχείο modal-backdrop. Εναλλακτικά, καθορίστε staticένα φόντο που δεν κλείνει το modal όταν κάνετε κλικ.
πληκτρολόγιο boolean αληθής Κλείνει το modal όταν πατηθεί το πλήκτρο escape
προβολή boolean αληθής Εμφανίζει το modal όταν αρχικοποιηθεί.
μακρινός μονοπάτι ψευδής

Εάν παρέχεται μια απομακρυσμένη διεύθυνση url, το περιεχόμενο θα φορτωθεί μέσω της loadμεθόδου του jQuery και θα εγχυθεί στο .modal-body. Εάν χρησιμοποιείτε το api δεδομένων, μπορείτε εναλλακτικά να χρησιμοποιήσετε την hrefετικέτα για να καθορίσετε την απομακρυσμένη πηγή. Ένα παράδειγμα αυτού φαίνεται παρακάτω:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Μέθοδοι

.modal(επιλογές)

Ενεργοποιεί το περιεχόμενό σας ως τρόπο λειτουργίας. Αποδέχεται μια προαιρετική επιλογή object.

  1. $ ( '#myModal' ). τροπικό ({
  2. πληκτρολόγιο : ψευδής
  3. })

.modal('εναλλαγή')

Εναλλάσσει χειροκίνητα ένα modal.

  1. $ ( '#myModal' ). modal ( 'εναλλαγή' )

.modal('show')

Ανοίγει χειροκίνητα ένα modal.

  1. $ ( '#myModal' ). modal ( 'show' )

.modal('απόκρυψη')

Χειροκίνητα κρύβει ένα modal.

  1. $ ( '#myModal' ). modal ( «απόκρυψη» )

Εκδηλώσεις

Η κλάση modal του Bootstrap εκθέτει μερικά συμβάντα για σύνδεση στη λειτουργικότητα του modal.

Εκδήλωση Περιγραφή
προβολή Αυτό το συμβάν ενεργοποιείται αμέσως όταν showκαλείται η μέθοδος παρουσίας.
απεικονίζεται Αυτό το συμβάν ενεργοποιείται όταν το modal έχει γίνει ορατό στον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις css).
κρύβω Αυτό το συμβάν ενεργοποιείται αμέσως μετά την hideκλήση της μεθόδου παρουσίας.
κρυμμένος Αυτό το συμβάν ενεργοποιείται όταν τελειώσει η απόκρυψη του modal από τον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις css).
  1. $ ( '#myModal' ). on ( 'κρυφό' , συνάρτηση () {
  2. // Κάνε κάτι…
  3. })

Παράδειγμα στο navbar

Η προσθήκη 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.

@mdo

Σκέιτμπορντ με μουστάκι 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.

three

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.


Χρήση

Μέσω χαρακτηριστικών δεδομένων

Για να προσθέσετε εύκολα τη συμπεριφορά scrollspy στην πλοήγησή σας στην επάνω γραμμή, απλώς προσθέστε data-spy="scroll"στο στοιχείο που θέλετε να κατασκοπεύσετε (συνήθως αυτό θα ήταν το σώμα) και data-target=".navbar"για να επιλέξετε ποια πλοήγηση θα χρησιμοποιήσετε. Θα θέλετε να χρησιμοποιήσετε το scrollspy με ένα .navστοιχείο.

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </body>

Μέσω JavaScript

Καλέστε το scrollspy μέσω JavaScript:

  1. $ ( '#navbar' ). scrollspy ()
Ψηλά το κεφάλι! Οι σύνδεσμοι της γραμμής πλοήγησης πρέπει να έχουν επιλύσιμους στόχους αναγνωριστικού. Για παράδειγμα, το <a href="#home">home</a>must αντιστοιχεί σε κάτι στο dom όπως <div id="home"></div>.

Μέθοδοι

.scrollspy('refresh')

Όταν χρησιμοποιείτε το scrollspy σε συνδυασμό με την προσθήκη ή την αφαίρεση στοιχείων από το DOM, θα πρέπει να καλέσετε τη μέθοδο ανανέωσης ως εξής:

  1. $ ( '[data-spy="scroll"]' ). καθεμία ( συνάρτηση () {
  2. var $spy = $ ( αυτό ). scrollspy ( «ανανέωση» )
  3. });

Επιλογές

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

Ονομα τύπος Προκαθορισμένο περιγραφή
αντισταθμίζεται αριθμός 10 Pixel για μετατόπιση από την κορυφή κατά τον υπολογισμό της θέσης κύλισης.

Εκδηλώσεις

Εκδήλωση Περιγραφή
θέτω εις ενέργειαν Αυτό το συμβάν ενεργοποιείται κάθε φορά που ένα νέο στοιχείο ενεργοποιείται από το 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.


Χρήση

Ενεργοποίηση καρτελών με καρτέλες μέσω JavaScript (κάθε καρτέλα πρέπει να ενεργοποιηθεί ξεχωριστά):

  1. $ ( '#myTab a' ). κλικ ( συνάρτηση ( e ) {
  2. ε . preventDefault ();
  3. $ ( αυτό ). καρτέλα ( 'εμφάνιση' );
  4. })

Μπορείτε να ενεργοποιήσετε μεμονωμένες καρτέλες με διάφορους τρόπους:

  1. $ ( '#myTab a[href="#profile"]' ). καρτέλα ( 'εμφάνιση' ); // Επιλέξτε καρτέλα με όνομα
  2. $ ( '#myTab a:first' ). καρτέλα ( 'εμφάνιση' ); // Επιλέξτε την πρώτη καρτέλα
  3. $ ( '#myTab a:last' ). καρτέλα ( 'εμφάνιση' ); // Επιλέξτε την τελευταία καρτέλα
  4. $ ( '#myTab li:eq(2) a' ). καρτέλα ( 'εμφάνιση' ); // Επιλέξτε τρίτη καρτέλα (με ευρετήριο 0)

Σήμανση

Μπορείτε να ενεργοποιήσετε μια καρτέλα ή ένα χάπι πλοήγησης χωρίς να γράψετε JavaScript προσδιορίζοντας απλά data-toggle="tab"ή data-toggle="pill"σε ένα στοιχείο. Η προσθήκη των κλάσεων navκαι nav-tabsστην καρτέλα ulθα εφαρμόσει το στυλ της καρτέλας Bootstrap.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Αρχική σελίδα </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Προφίλ </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Μηνύματα </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Ρυθμίσεις </a></li>
  6. </ul>

Μέθοδοι

καρτέλα $().

Ενεργοποιεί ένα στοιχείο καρτέλας και ένα κοντέινερ περιεχομένου. Η καρτέλα πρέπει να έχει είτε έναν data-targetείτε έναν hrefκόμβο στόχευσης κοντέινερ στο DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Αρχική σελίδα </a></li>
  3. <li><a href = "#profile" > Προφίλ </a></li>
  4. <li><a href = "#messages" > Μηνύματα </a></li>
  5. <li><a href = "#settings" > Ρυθμίσεις </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane ενεργό" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <σενάριο>
  16. $ ( συνάρτηση () {
  17. $ ( '#myTab a:last' ). καρτέλα ( 'εμφάνιση' );
  18. })
  19. </script>

Εκδηλώσεις

Εκδήλωση Περιγραφή
προβολή Αυτό το συμβάν ενεργοποιείται στην εμφάνιση καρτελών, αλλά πριν εμφανιστεί η νέα καρτέλα. Χρησιμοποιήστε event.targetκαι event.relatedTargetγια να στοχεύσετε την ενεργή καρτέλα και την προηγούμενη ενεργή καρτέλα (αν είναι διαθέσιμη) αντίστοιχα.
απεικονίζεται Αυτό το συμβάν ενεργοποιείται στην εμφάνιση καρτελών μετά την εμφάνιση μιας καρτέλας. Χρησιμοποιήστε event.targetκαι event.relatedTargetγια να στοχεύσετε την ενεργή καρτέλα και την προηγούμενη ενεργή καρτέλα (αν είναι διαθέσιμη) αντίστοιχα.
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'shown' , function ( e ) {
  2. ε . στόχος // ενεργοποιημένη καρτέλα
  3. ε . relatedTarget // προηγούμενη καρτέλα
  4. })

Παραδείγματα

Εμπνευσμένο από το εξαιρετικό πρόσθετο jQuery.tipsy γραμμένο από τον Jason Frame. Οι συμβουλές εργαλείων είναι μια ενημερωμένη έκδοση, η οποία δεν βασίζεται σε εικόνες, χρησιμοποιεί CSS3 για κινούμενα σχέδια και χαρακτηριστικά δεδομένων για τοπική αποθήκευση τίτλων.

Για λόγους απόδοσης, η επεξήγηση εργαλείου και το popover data-apis επιλέγονται, πράγμα που σημαίνει ότι πρέπει να τα αρχικοποιήσετε μόνοι σας .

Τοποθετήστε το δείκτη του ποντικιού στους παρακάτω συνδέσμους για να δείτε συμβουλές εργαλείων:

Στενό παντελόνι επόμενου επιπέδου 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 τζιν καφέ μονής προέλευσης.

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

Συμβουλές εργαλείων σε ομάδες εισόδου

Όταν χρησιμοποιείτε συμβουλές εργαλείων και popovers με τις ομάδες εισόδου Bootstrap, θα πρέπει να ορίσετε την containerεπιλογή (που τεκμηριώνεται παρακάτω) για να αποφύγετε ανεπιθύμητες παρενέργειες.


Χρήση

Ενεργοποιήστε την επεξήγηση εργαλείου μέσω JavaScript:

  1. $ ( '#example' ). συμβουλή εργαλείου ( επιλογές )

Επιλογές

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

Ονομα τύπος Προκαθορισμένο περιγραφή
κινουμένων σχεδίων boolean αληθής εφαρμόστε μια μετάβαση css fade στην επεξήγηση εργαλείου
html boolean ψευδής Εισαγάγετε html στην επεξήγηση εργαλείου. Εάν είναι false, η μέθοδος του jquery textθα χρησιμοποιηθεί για την εισαγωγή περιεχομένου στο dom. Χρησιμοποιήστε κείμενο εάν ανησυχείτε για επιθέσεις XSS.
τοποθέτηση χορδή | λειτουργία 'μπλουζα' πώς να τοποθετήσετε την επεξήγηση εργαλείου - επάνω | κάτω | αριστερά | σωστά
εκλέκτορας σειρά ψευδής Εάν παρέχεται ένας επιλογέας, τα αντικείμενα συμβουλής εργαλείου θα εκχωρηθούν στους καθορισμένους στόχους.
τίτλος χορδή | λειτουργία '' προεπιλεγμένη τιμή τίτλου εάν δεν υπάρχει η ετικέτα "τίτλος".
δώσει το έναυσμα για σειρά "εστίαση αιώρησης" πώς ενεργοποιείται η συμβουλή εργαλείου - κάντε κλικ στο | αιωρούνται | εστίαση | εγχειρίδιο. Σημειώστε ότι πολλαπλή σκανδάλη περασμάτων, χωριστό διάστημα, τύποι σκανδάλης.
καθυστέρηση αριθμός | αντικείμενο 0

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

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

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

δοχείο χορδή | ψευδής ψευδής

Προσθέτει την επεξήγηση εργαλείου σε ένα συγκεκριμένο στοιχείοcontainer: 'body'

Ψηλά το κεφάλι! Οι επιλογές για μεμονωμένες συμβουλές εργαλείων μπορούν εναλλακτικά να καθοριστούν μέσω της χρήσης χαρακτηριστικών δεδομένων.

Σήμανση

  1. <a href = "#" data-toggle = "tooltip" title = "first tooltip" > τοποθετήστε το δείκτη του ποντικιού πάνω μου </a>

Μέθοδοι

$().tooltip(επιλογές)

Προσαρτά έναν χειριστή συμβουλών εργαλείου σε μια συλλογή στοιχείων.

.tooltip('show')

Αποκαλύπτει την επεξήγηση εργαλείου ενός στοιχείου.

  1. $ ( '#στοιχείο' ). επεξήγηση εργαλείου ( 'εμφάνιση' )

.tooltip('απόκρυψη')

Κρύβει την επεξήγηση εργαλείου ενός στοιχείου.

  1. $ ( '#στοιχείο' ). επεξήγηση εργαλείου ( «απόκρυψη» )

.tooltip('εναλλαγή')

Εναλλάσσει την επεξήγηση εργαλείου ενός στοιχείου.

  1. $ ( '#στοιχείο' ). επεξήγηση εργαλείου ( 'εναλλαγή' )

.tooltip('destroy')

Κρύβει και καταστρέφει την επεξήγηση εργαλείου ενός στοιχείου.

  1. $ ( '#στοιχείο' ). συμβουλή εργαλείου ( «καταστρέφω» )

Παραδείγματα

Προσθέστε μικρές επικαλύψεις περιεχομένου, όπως αυτές στο iPad, σε οποιοδήποτε στοιχείο για τη στέγαση δευτερευουσών πληροφοριών. Τοποθετήστε το δείκτη του ποντικιού πάνω από το κουμπί για να ενεργοποιήσετε το popover. Απαιτείται να συμπεριληφθεί επεξήγηση εργαλείου .

Στατικό popover

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

Popover top

Αυτή η θέση είναι σε λοβό. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover δεξιά

Αυτή η θέση είναι σε λοβό. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover κάτω

Αυτή η θέση είναι σε λοβό. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Έφυγε το Popover

Αυτή η θέση είναι σε λοβό. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Καμία σήμανση που εμφανίζεται ως popover δεν δημιουργείται από JavaScript και περιεχόμενο εντός ενός dataχαρακτηριστικού.

Ζωντανή επίδειξη

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


Χρήση

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

  1. $ ( '#example' ). popover ( επιλογές )

Επιλογές

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

Ονομα τύπος Προκαθορισμένο περιγραφή
κινουμένων σχεδίων boolean αληθής εφαρμόστε μια μετάβαση css fade στην επεξήγηση εργαλείου
html boolean ψευδής Εισαγάγετε html στο popover. Εάν είναι false, η μέθοδος του jquery textθα χρησιμοποιηθεί για την εισαγωγή περιεχομένου στο dom. Χρησιμοποιήστε κείμενο εάν ανησυχείτε για επιθέσεις XSS.
τοποθέτηση χορδή | λειτουργία 'σωστά' πώς να τοποθετήσετε το popover - top | κάτω | αριστερά | σωστά
εκλέκτορας σειρά ψευδής Εάν παρέχεται ένας επιλογέας, τα αντικείμενα συμβουλής εργαλείου θα εκχωρηθούν στους καθορισμένους στόχους
δώσει το έναυσμα για σειρά 'Κάντε κλικ' πώς ενεργοποιείται το popover - κάντε κλικ | αιωρούνται | εστίαση | εγχειρίδιο
τίτλος χορδή | λειτουργία '' προεπιλεγμένη τιμή τίτλου εάν το χαρακτηριστικό «title» δεν υπάρχει
περιεχόμενο χορδή | λειτουργία '' προεπιλεγμένη τιμή περιεχομένου εάν το χαρακτηριστικό "data-content" δεν υπάρχει
καθυστέρηση αριθμός | αντικείμενο 0

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

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

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

δοχείο χορδή | ψευδής ψευδής

Προσθέτει το popover σε ένα συγκεκριμένο στοιχείοcontainer: 'body'

Ψηλά το κεφάλι! Οι επιλογές για μεμονωμένα popovers μπορούν εναλλακτικά να καθοριστούν μέσω της χρήσης των χαρακτηριστικών δεδομένων.

Σήμανση

Για λόγους απόδοσης, το Tooltip και το Popover data-apis επιλέγονται. Εάν θέλετε να τα χρησιμοποιήσετε, απλώς καθορίστε μια επιλογή επιλογέα.

Μέθοδοι

$().popover(επιλογές)

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

.popover('show')

Αποκαλύπτει ένα popover στοιχείων.

  1. $ ( '#στοιχείο' ). popover ( 'show' )

.popover ('απόκρυψη')

Κρύβει ένα popover στοιχείων.

  1. $ ( '#στοιχείο' ). popover ( «απόκρυψη» )

.popover ('εναλλαγή')

Εναλλάσσει ένα popover στοιχείων.

  1. $ ( '#στοιχείο' ). popover ( «εναλλαγή» )

.popover ('καταστρέφω')

Κρύβει και καταστρέφει το popover ενός στοιχείου.

  1. $ ( '#στοιχείο' ). popover ( «καταστρέφω» )

Παραδείγματα ειδοποιήσεων

Προσθέστε τη λειτουργία απόρριψης σε όλα τα μηνύματα ειδοποίησης με αυτήν την προσθήκη.

Ιερό γουακαμόλε! Ελέγξτε καλύτερα, δεν φαίνεστε πολύ καλά.

Ω snap! Έχετε ένα σφάλμα!

Αλλάξτε αυτό και αυτό και δοκιμάστε ξανά. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Κάντε αυτήν την ενέργεια Ή κάντε αυτό


Χρήση

Ενεργοποίηση απόρριψης μιας ειδοποίησης μέσω JavaScript:

  1. $ ( ".alert" ). ειδοποίηση ()

Σήμανση

Απλώς προσθέστε data-dismiss="alert"το στο κουμπί κλεισίματος για να δώσετε αυτόματα μια λειτουργία κλεισίματος ειδοποίησης.

  1. <a class = "close" data-dismiss = "alert" href = "#" > × </a>

Μέθοδοι

$().alert()

Αναδιπλώνει όλες τις ειδοποιήσεις με λειτουργία κλεισίματος. Για να ενεργοποιήσετε τις ειδοποιήσεις σας όταν είναι κλειστές, βεβαιωθείτε ότι έχουν ήδη εφαρμοστεί το .fadeκαι η .inκλάση σε αυτές.

.alert('close')

Κλείνει μια ειδοποίηση.

  1. $ ( ".alert" ). ειδοποίηση ( «κλείσιμο» )

Εκδηλώσεις

Η κατηγορία ειδοποιήσεων του Bootstrap εκθέτει μερικά συμβάντα για σύνδεση στη λειτουργικότητα ειδοποίησης.

Εκδήλωση Περιγραφή
Κλείσε Αυτό το συμβάν ενεργοποιείται αμέσως όταν closeκαλείται η μέθοδος παρουσίας.
κλειστό Αυτό το συμβάν ενεργοποιείται όταν η ειδοποίηση έχει κλείσει (θα περιμένει να ολοκληρωθούν οι μεταβάσεις css).
  1. $ ( '#my-alert' ). bind ( 'κλειστό' , συνάρτηση () {
  2. // Κάνε κάτι…
  3. })

Παραδείγματα χρήσεων

Κάντε περισσότερα με τα κουμπιά. Ελέγξτε τις καταστάσεις του κουμπιού ή δημιουργήστε ομάδες κουμπιών για περισσότερα στοιχεία όπως γραμμές εργαλείων.

Πολιτειακός

Προσθήκη data-loading-text="Loading..."για χρήση μιας κατάστασης φόρτωσης σε ένα κουμπί.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > Κατάσταση φόρτωσης </button>

Μονή εναλλαγή

Προσθήκη data-toggle="button"για ενεργοποίηση εναλλαγής σε ένα μόνο κουμπί.

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > Μεμονωμένη εναλλαγή </button>

Πλαίσιο ελέγχου

Προσθήκη data-toggle="buttons-checkbox"για εναλλαγή στυλ πλαισίου ελέγχου στην ομάδα btn.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Αριστερά </button>
  3. <button type = "button" class = "btn btn-primary" > Μεσαία </button>
  4. <button type = "button" class = "btn btn-primary" > Δεξιά </button>
  5. </div>

Ραδιόφωνο

Προσθήκη data-toggle="buttons-radio"για εναλλαγή στυλ ραδιοφώνου στο btn-group.

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > Αριστερά </button>
  3. <button type = "button" class = "btn btn-primary" > Μεσαία </button>
  4. <button type = "button" class = "btn btn-primary" > Δεξιά </button>
  5. </div>

Χρήση

Ενεργοποίηση κουμπιών μέσω JavaScript:

  1. $ ( '.nav-tabs' ). κουμπί ()

Σήμανση

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

Επιλογές

Κανένας

Μέθοδοι

$().button('toggle')

Εναλλάσσει την κατάσταση ώθησης. Δίνει στο κουμπί την εμφάνιση ότι έχει ενεργοποιηθεί.

Ψηλά το κεφάλι! Μπορείτε να ενεργοποιήσετε την αυτόματη εναλλαγή ενός κουμπιού χρησιμοποιώντας το data-toggleχαρακτηριστικό.
  1. <button type = "button" class = "btn" data-toggle = "button" > </button>

$().button('loading')

Ορίζει την κατάσταση του κουμπιού σε φόρτωση - απενεργοποιεί το κουμπί και εναλλάσσει το κείμενο σε κείμενο φόρτωσης. Η φόρτωση κειμένου θα πρέπει να οριστεί στο στοιχείο κουμπιού χρησιμοποιώντας το χαρακτηριστικό data data-loading-text.

  1. <button type = "button" class = "btn" data-loading-text = "loading stuff..." > ... </button>
Ψηλά το κεφάλι! Ο Firefox διατηρεί την κατάσταση απενεργοποιημένης κατά τη φόρτωση σελίδων . Μια λύση για αυτό είναι να χρησιμοποιήσετε autocomplete="off".

$().button('reset')

Επαναφέρει την κατάσταση του κουμπιού - αλλάζει κείμενο σε αρχικό κείμενο.

$().button(string)

Επαναφέρει την κατάσταση του κουμπιού - αλλάζει κείμενο σε οποιαδήποτε κατάσταση κειμένου που ορίζεται από δεδομένα.

  1. <button type = "button" class = "btn" data-complete-text = "ολοκληρώθηκε!" > ... </button>
  2. <σενάριο>
  3. $ ( '.btn' ). κουμπί ( "ολοκλήρωση" )
  4. </script>

Σχετικά με

Αποκτήστε στυλ βάσης και ευέλικτη υποστήριξη για πτυσσόμενα εξαρτήματα όπως ακορντεόν και πλοήγηση.

* Απαιτεί να συμπεριληφθεί το πρόσθετο Transitions.

Παράδειγμα ακορντεόν

Χρησιμοποιώντας το πρόσθετο σύμπτυξης, δημιουργήσαμε ένα απλό widget στυλ ακορντεόν:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Φορτηγό τροφίμων quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua βάλε ένα πουλί πάνω του καλαμάρι μονής προέλευσης καφέ nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore Wes Anderson cred nesciunt sapiente ea proident. Ad vegan exclusiveeur χασάπης vice lomo. Κολάν occaecat craft μπύρα από φάρμα σε τραπέζι, ακατέργαστο τζιν αισθητικής synth nesciunt που μάλλον δεν έχετε ακούσει για αυτά accusamus labore βιώσιμη VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Φορτηγό τροφίμων quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua βάλε ένα πουλί πάνω του καλαμάρι μονής προέλευσης καφέ nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore Wes Anderson cred nesciunt sapiente ea proident. Ad vegan exclusiveeur χασάπης vice lomo. Κολάν occaecat craft μπύρα από φάρμα σε τραπέζι, ακατέργαστο τζιν αισθητικής synth nesciunt που μάλλον δεν έχετε ακούσει για αυτά accusamus labore βιώσιμη VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Φορτηγό τροφίμων quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua βάλε ένα πουλί πάνω του καλαμάρι μονής προέλευσης καφέ nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore Wes Anderson cred nesciunt sapiente ea proident. Ad vegan exclusiveeur χασάπης vice lomo. Κολάν occaecat craft μπύρα από φάρμα σε τραπέζι, ακατέργαστο τζιν αισθητικής synth nesciunt που μάλλον δεν έχετε ακούσει για αυτά accusamus labore βιώσιμη VHS.
  1. <div class = "ακορντεόν" id = "ακορντεόν2" >
  2. <div class = "ομάδα ακορντεόν" >
  3. <div class = "ακορντεόν-επικεφαλίδα" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Πτυσσόμενο στοιχείο ομάδας #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "συμπίεση σώματος ακορντεόν μέσα" >
  9. <div class = "ακορντεόν-εσωτερικό" >
  10. Κλισέ ζωγραφικής...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "ομάδα ακορντεόν" >
  15. <div class = "ακορντεόν-επικεφαλίδα" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Πτυσσόμενο στοιχείο ομάδας #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "κατάρρευση σώματος ακορντεόν" >
  21. <div class = "ακορντεόν-εσωτερικό" >
  22. Κλισέ ζωγραφικής...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

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

  1. <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. απλό πτυσσόμενο
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>

Χρήση

Μέσω χαρακτηριστικών δεδομένων

Απλώς προσθέστε data-toggle="collapse"και ένα data-targetστοιχείο για να εκχωρήσετε αυτόματα τον έλεγχο ενός πτυσσόμενου στοιχείου. Το data-targetχαρακτηριστικό δέχεται έναν επιλογέα css στον οποίο εφαρμόζεται η σύμπτυξη. Φροντίστε να προσθέσετε την κλάση collapseστο πτυσσόμενο στοιχείο. Εάν θέλετε να είναι ανοιχτό από προεπιλογή, προσθέστε την πρόσθετη κλάση in.

Για να προσθέσετε διαχείριση ομάδας που μοιάζει με ακορντεόν σε ένα πτυσσόμενο στοιχείο ελέγχου, προσθέστε το χαρακτηριστικό δεδομένων data-parent="#selector". Ανατρέξτε στην επίδειξη για να το δείτε σε δράση.

Μέσω JavaScript

Ενεργοποίηση μη αυτόματα με:

  1. $ ( ".collapse" ). κατάρρευση ()

Επιλογές

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

Ονομα τύπος Προκαθορισμένο περιγραφή
μητρική εταιρεία εκλέκτορας ψευδής Εάν ο επιλογέας, τότε όλα τα πτυσσόμενα στοιχεία κάτω από τον καθορισμένο γονέα θα κλείσουν όταν εμφανιστεί αυτό το πτυσσόμενο στοιχείο. (παρόμοια με την παραδοσιακή συμπεριφορά ακορντεόν)
μεταβάλλω boolean αληθής Εναλλάσσει το πτυσσόμενο στοιχείο κατά την επίκληση

Μέθοδοι

.collapse(επιλογές)

Ενεργοποιεί το περιεχόμενό σας ως πτυσσόμενο στοιχείο. Αποδέχεται μια προαιρετική επιλογή object.

  1. $ ( '#myCollapsible' ). κατάρρευση ({
  2. εναλλαγή : ψευδής
  3. })

.collapse ('εναλλαγή')

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

.collapse ('show')

Εμφανίζει ένα πτυσσόμενο στοιχείο.

.collapse ('απόκρυψη')

Κρύβει ένα πτυσσόμενο στοιχείο.

Εκδηλώσεις

Η κλάση κατάρρευσης του Bootstrap εκθέτει μερικά συμβάντα για σύνδεση στη λειτουργικότητα κατάρρευσης.

Εκδήλωση Περιγραφή
προβολή Αυτό το συμβάν ενεργοποιείται αμέσως όταν showκαλείται η μέθοδος παρουσίας.
απεικονίζεται Αυτό το συμβάν ενεργοποιείται όταν ένα στοιχείο σύμπτυξης έχει γίνει ορατό στον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις css).
κρύβω Αυτό το συμβάν ενεργοποιείται αμέσως μετά την hideκλήση της μεθόδου.
κρυμμένος Αυτό το συμβάν ενεργοποιείται όταν ένα στοιχείο σύμπτυξης έχει κρυφτεί από τον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις css).
  1. $ ( '#myCollapsible' ). on ( 'κρυφό' , συνάρτηση () {
  2. // Κάνε κάτι…
  3. })

Παράδειγμα

Μια βασική, εύκολα επεκτεινόμενη προσθήκη για γρήγορη δημιουργία κομψών κεφαλίδων με οποιαδήποτε εισαγωγή κειμένου.

  1. <input type = "text" data- provide = "typeahead" >

Θα θέλετε να ρυθμίσετε autocomplete="off"ώστε να αποτρέπεται η εμφάνιση των προεπιλεγμένων μενού του προγράμματος περιήγησης στο αναπτυσσόμενο μενού πληκτρολόγησης Bootstrap.


Χρήση

Μέσω χαρακτηριστικών δεδομένων

Προσθέστε χαρακτηριστικά δεδομένων για να καταχωρίσετε ένα στοιχείο με λειτουργία κεφαλίδας τύπου όπως φαίνεται στο παραπάνω παράδειγμα.

Μέσω JavaScript

Καλέστε τον πληκτρολόγιο χειροκίνητα με:

  1. $ ( '.typeahead' ). γραμματοσειρά ()

Επιλογές

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

Ονομα τύπος Προκαθορισμένο περιγραφή
πηγή πίνακας, συνάρτηση [ ] Η προέλευση δεδομένων προς αναζήτηση. Μπορεί να είναι μια σειρά από συμβολοσειρές ή μια συνάρτηση. Στη συνάρτηση μεταβιβάζονται δύο ορίσματα, η queryτιμή στο πεδίο εισαγωγής και η processεπανάκληση. Η συνάρτηση μπορεί να χρησιμοποιηθεί συγχρονισμένα επιστρέφοντας την πηγή δεδομένων απευθείας ή ασύγχρονα μέσω processτου μοναδικού ορίσματος της επανάκλησης.
είδη αριθμός 8 Ο μέγιστος αριθμός στοιχείων προς εμφάνιση στο αναπτυσσόμενο μενού.
λεπτοΜήκος αριθμός 1 Το ελάχιστο μήκος χαρακτήρων που απαιτείται πριν από την ενεργοποίηση προτάσεων αυτόματης συμπλήρωσης
ταίριασμα λειτουργία χωρίς διάκριση πεζών-κεφαλαίων Η μέθοδος που χρησιμοποιείται για να προσδιοριστεί εάν ένα ερώτημα ταιριάζει με ένα στοιχείο. Δέχεται ένα μεμονωμένο όρισμα, itemέναντι του οποίου θα ελεγχθεί το ερώτημα. Πρόσβαση στο τρέχον ερώτημα με this.query. Επιστρέψτε ένα boolean trueεάν το ερώτημα ταιριάζει.
ταξινομών λειτουργία ακριβής αντιστοίχιση, διάκριση πεζών-κεφαλαίων
,
διάκριση πεζών-κεφαλαίων
Μέθοδος που χρησιμοποιείται για την ταξινόμηση των αποτελεσμάτων αυτόματης συμπλήρωσης. Αποδέχεται ένα μεμονωμένο όρισμα itemsκαι έχει το εύρος του στιγμιότυπου πληκτρολογίου. Αναφέρετε το τρέχον ερώτημα με this.query.
ενημερωτής λειτουργία επιστρέφει επιλεγμένο στοιχείο Η μέθοδος που χρησιμοποιείται για την επιστροφή του επιλεγμένου αντικειμένου. Αποδέχεται ένα μεμονωμένο όρισμα, το itemκαι έχει το εύρος του στιγμιότυπου πληκτρολογίου.
highlighter λειτουργία επισημαίνει όλες τις προεπιλεγμένες αντιστοιχίσεις Μέθοδος που χρησιμοποιείται για την επισήμανση των αποτελεσμάτων αυτόματης συμπλήρωσης. Αποδέχεται ένα μεμονωμένο όρισμα itemκαι έχει το εύρος του στιγμιότυπου πληκτρολογίου. Θα πρέπει να επιστρέψει html.

Μέθοδοι

.typeahead(επιλογές)

Αρχικοποιεί μια είσοδο με κεφαλίδα.

Παράδειγμα

Η υποπλοήγηση στα αριστερά είναι μια ζωντανή επίδειξη του πρόσθετου affix.


Χρήση

Μέσω χαρακτηριστικών δεδομένων

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

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Ψηλά το κεφάλι! Πρέπει να διαχειριστείτε τη θέση ενός καρφιτσωμένου στοιχείου και τη συμπεριφορά του άμεσου γονέα του. Η θέση ελέγχεται από affix, affix-top, και affix-bottom. Θυμηθείτε να ελέγξετε εάν υπάρχει δυνητικά συμπτυγμένος γονέας όταν εμφανίζεται το επίθεμα καθώς αφαιρεί περιεχόμενο από την κανονική ροή της σελίδας.

Μέσω JavaScript

Καλέστε την προσθήκη επιθέματος μέσω JavaScript:

  1. $ ( '#navbar' ). επικολλώ ()

Επιλογές

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

Ονομα τύπος Προκαθορισμένο περιγραφή
αντισταθμίζεται αριθμός | λειτουργία | αντικείμενο 10 Pixel για μετατόπιση από την οθόνη κατά τον υπολογισμό της θέσης κύλισης. Εάν παρέχεται ένας μόνο αριθμός, η μετατόπιση θα εφαρμοστεί τόσο στην επάνω όσο και στην αριστερή κατεύθυνση. Για να ακούσετε μια μεμονωμένη κατεύθυνση ή πολλαπλές μοναδικές μετατοπίσεις, απλώς δώστε ένα αντικείμενο offset: { x: 10 }. Χρησιμοποιήστε μια συνάρτηση όταν χρειάζεται να παρέχετε δυναμικά μια μετατόπιση (χρήσιμη για ορισμένα σχέδια με απόκριση).