Το πρόσθετο Modal είναι μια εξαιρετικά λεπτή εκδοχή της παραδοσιακής προσθήκης modal js, προσέχοντας ιδιαίτερα να περιλαμβάνει μόνο τη γυμνή λειτουργικότητα που χρειαζόμαστε εδώ στο twitter.

Κατεβάστε

Χρήση bootstrap-modal

$ ( '#my-modal' ). modal ( επιλογές )

Επιλογές

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

Σήμανση

Μπορείτε να ενεργοποιήσετε τα modals στη σελίδα σας εύκολα χωρίς να χρειάζεται να γράψετε ούτε μια γραμμή javascript. Απλώς δώστε σε ένα στοιχείο μια data-controls-modalιδιότητα που αντιστοιχεί σε ένα αναγνωριστικό στοιχείου και, όταν κάνετε κλικ, θα εκκινήσει το modal σας. Για να προσθέσετε εναλλακτικές επιλογές, απλώς συμπεριλάβετέ τις και ως χαρακτηριστικά δεδομένων.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > Εκκίνηση Modal </a>    

Σημείωση Εάν θέλετε το modal σας να κινείται μέσα και έξω, απλώς προσθέστε μια .fadeκλάση στο .modalστοιχείο σας (ανατρέξτε στην επίδειξη για να το δείτε σε δράση).

Μέθοδοι

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

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

$ ( '#my-modal' ). τροπικό ({
  closeOnEscape : αλήθεια 
})

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

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

$ ( '#my-modal' ). modal ( 'εναλλαγή' )

.modal('show')

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

$ ( '#my-modal' ). modal ( 'show' )

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

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

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

.modal(true)

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

$ ( '#my-modal' ). τροπικό ( αληθές )

Σημείωση Εναλλακτικά, αυτό μπορεί να ανακτηθεί με $().data('modal').

Εκδηλώσεις

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

Εκδήλωση	Περιγραφή
προβολή	Αυτό το συμβάν ενεργοποιείται αμέσως όταν showκαλείται η μέθοδος παρουσίας.
απεικονίζεται	Αυτό το συμβάν ενεργοποιείται όταν το modal έχει γίνει ορατό στον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις css).
κρύβω	Αυτό το συμβάν ενεργοποιείται αμέσως μετά την hideκλήση της μεθόδου παρουσίας.
κρυμμένος	Αυτό το συμβάν ενεργοποιείται όταν τελειώσει η απόκρυψη του modal από τον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις css).

$ ( '#my-modal' ). bind ( 'κρυφό' , συνάρτηση () {   
  // Κάνε κάτι ...
})

Διαδήλωση

Εκκίνηση Modal

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

Κατεβάστε

Χρησιμοποιώντας το boostrap-dropdown.js

$ ( '#topbar' ). αναπτυσσόμενο μενού ()

Σήμανση

Για να προσθέσετε γρήγορα αναπτυσσόμενη λειτουργικότητα σε οποιοδήποτε στοιχείο πλοήγησης, χρησιμοποιήστε το data-dropdownχαρακτηριστικό. Οποιοδήποτε έγκυρο αναπτυσσόμενο μενού εκκίνησης θα ενεργοποιηθεί αυτόματα.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Αρχική σελίδα </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Αναπτυσσόμενο μενού </a>  
    <ul class = "αναπτυσσόμενο μενού" > 
      <li><a href = "#" > Δευτερεύων σύνδεσμος </a></li> 
      <li><a href = "#" > Κάτι άλλο εδώ </a></li> 
      <li class = "διαιρέτης" ></li> 
      <li><a href = "#" > Ένας άλλος σύνδεσμος </a></li> 
    </ul>
  </li>
</ul>

Σημείωση Εάν η διεπαφή χρήστη σας έχει πολλά αναπτυσσόμενα μενού, σκεφτείτε να προσθέσετε το data-dropdownχαρακτηριστικό σε ένα πιο σημαντικό στοιχείο κοντέινερ όπως .tabsή .topbar.

Μέθοδοι

$().dropdown()

Ένα προγραμματικό api για την ενεργοποίηση μενού για μια δεδομένη επάνω γραμμή ή πλοήγηση με καρτέλες.

Διαδήλωση

Αυτή η προσθήκη προορίζεται για την προσθήκη της αλληλεπίδρασης scrollspy (αυτόματη ενημέρωση πλοήγησης) στην επάνω γραμμή του bootstrap.

Κατεβάστε

Χρησιμοποιώντας το boostrap-scrollspy.js

$ ( '#topbar' ). αναπτυσσόμενο μενού ()

Σήμανση

Για να προσθέσετε εύκολα τη συμπεριφορά κύλισης στην περιήγησή σας, απλώς προσθέστε το data-scrollspyχαρακτηριστικό στο .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

Μέθοδοι

$().scrollspy()

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

$ ( 'body > .topbar' ). scrollSpy ()

Σημείωση Οι ετικέτες αγκύρωσης επάνω γραμμής πρέπει να έχουν επιλύσιμους στόχους αναγνωριστικού. Για παράδειγμα, το <a href="#home">home</a>must αντιστοιχεί σε κάτι στο dom όπως <div id="home"></div>.

.scrollspy('refresh')

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

$ ( «σώμα» ). scrollspy ( «ανανέωση» )

Διαδήλωση

Ελέγξτε την πλοήγηση στην επάνω γραμμή σε αυτήν τη σελίδα.

Αυτό το πρόσθετο προσθέτει γρήγορη, δυναμική λειτουργία καρτελών και χαπιών.

Κατεβάστε

Χρήση boostrap-tabs.js

$ ( '.tabs' ). καρτέλες ()

Σήμανση

Μπορείτε να ενεργοποιήσετε μια πλοήγηση σε μια καρτέλα ή ένα χάπι χωρίς να γράψετε javascript δίνοντάς τους απλώς ένα χαρακτηριστικό data-tabsή data-pillsχαρακτηριστικό.

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>   

Μέθοδοι

$().tabs ή $().

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

<ul class = "tabs" > 
  <li class = "active" ><a href = "#home" > Αρχική σελίδα </a></li>  
  <li><a href = "#profile" > Προφίλ </a></li> 
  <li><a href = "#messages" > Μηνύματα </a></li> 
  <li><a href = "#settings" > Ρυθμίσεις </a></li> 
</ul>
 
<div class = "χάπι-περιεχόμενο" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "προφίλ" > ... </div> 
  <div id = "μηνύματα" > ... </div> 
  <div id = "ρυθμίσεις" > ... </div> 
</ul>
 
<σενάριο>
  $ ( συνάρτηση () {  
    $ ( '.tabs' ). καρτέλες ()
  })
</script>

Διαδήλωση

• Σπίτι
• Προφίλ
• Μηνύματα
• Ρυθμίσεις

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

Κατεβάστε

Χρήση bootstrap-twipsy.js

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

Επιλογές

Ονομα	τύπος	Προκαθορισμένο	περιγραφή
έμψυχος	boolean	αληθής	εφαρμόστε μια μετάβαση css fade στην επεξήγηση εργαλείου
καθυστέρηση σε	αριθμός	0	καθυστέρηση πριν από την εμφάνιση συμβουλής εργαλείου (ms)
DelayOut	αριθμός	0	καθυστέρηση πριν από την απόκρυψη συμβουλής εργαλείου (ms)
εναλλακτική	σειρά	''	κείμενο για χρήση όταν δεν υπάρχει τίτλος συμβουλής εργαλείου
τοποθέτηση	σειρά	'πάνω από'	πώς να τοποθετήσετε την επεξήγηση εργαλείου - παραπάνω | παρακάτω | αριστερά | σωστά
html	boolean	ψευδής	επιτρέπει περιεχόμενο html μέσα στην επεξήγηση εργαλείου
ζω	boolean	ψευδής	χρησιμοποιήστε την ανάθεση συμβάντων αντί για μεμονωμένους χειριστές συμβάντων
αντισταθμίζεται	αριθμός	0	μετατόπιση εικονοστοιχείων της επεξήγησης εργαλείου από το στοιχείο προορισμού
τίτλος	χορδή | λειτουργία	'τίτλος'	χαρακτηριστικό ή μέθοδο για την ανάκτηση του κειμένου τίτλου
δώσει το έναυσμα για	σειρά	'φτερουγίζω'	πώς ενεργοποιείται η συμβουλή εργαλείου - τοποθετήστε το δείκτη του ποντικιού | εστίαση | εγχειρίδιο

Μέθοδοι

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

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

.twipsy('show')

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

$ ( '#στοιχείο' ). twipsy ( "εμφάνιση" )

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

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

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

.twipsy (αληθές)

Επιστρέφει μια παρουσία κλάσης twipsy στοιχείων.

$ ( '#στοιχείο' ). twipsy ( αληθινό )

Σημείωση Εναλλακτικά, αυτό μπορεί να ανακτηθεί με $().data('twipsy').

Διαδήλωση

Το πρόσθετο popover παρέχει μια απλή διεπαφή για την προσθήκη popover στην εφαρμογή σας. Επεκτείνει την προσθήκη boostrap-twipsy.js , οπότε φροντίστε να πάρετε και αυτό το αρχείο όταν συμπεριλαμβάνετε popover στο έργο σας!

Κατεβάστε

Χρησιμοποιώντας το boostrap-popover.js

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

Επιλογές

Ονομα	τύπος	Προκαθορισμένο	περιγραφή
έμψυχος	boolean	αληθής	εφαρμόστε μια μετάβαση css fade στην επεξήγηση εργαλείου
καθυστέρηση σε	αριθμός	0	καθυστέρηση πριν από την εμφάνιση συμβουλής εργαλείου (ms)
DelayOut	αριθμός	0	καθυστέρηση πριν από την απόκρυψη συμβουλής εργαλείου (ms)
εναλλακτική	σειρά	''	κείμενο για χρήση όταν δεν υπάρχει τίτλος συμβουλής εργαλείου
τοποθέτηση	σειρά	'σωστά'	πώς να τοποθετήσετε την επεξήγηση εργαλείου - παραπάνω | παρακάτω | αριστερά | σωστά
html	boolean	ψευδής	επιτρέπει περιεχόμενο html μέσα στην επεξήγηση εργαλείου
ζω	boolean	ψευδής	χρησιμοποιήστε την ανάθεση συμβάντων αντί για μεμονωμένους χειριστές συμβάντων
αντισταθμίζεται	αριθμός	0	μετατόπιση εικονοστοιχείων της επεξήγησης εργαλείου από το στοιχείο προορισμού
τίτλος	χορδή | λειτουργία	'τίτλος'	χαρακτηριστικό ή μέθοδο για την ανάκτηση του κειμένου τίτλου
περιεχόμενο	χορδή | λειτουργία	'περιεχόμενο δεδομένων'	χαρακτηριστικό ή μέθοδο για την ανάκτηση κειμένου περιεχομένου
δώσει το έναυσμα για	σειρά	'φτερουγίζω'	πώς ενεργοποιείται η συμβουλή εργαλείου - τοποθετήστε το δείκτη του ποντικιού | εστίαση | εγχειρίδιο

Μέθοδοι

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

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

.popover('show')

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

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

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

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

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

Διαδήλωση

αιωρούνται για popover

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

Κατεβάστε

Χρήση bootstrap-alerts.js

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

Σήμανση

Απλώς προσθέστε ένα data-alertχαρακτηριστικό στα μηνύματα ειδοποίησης για να τους προσφέρετε αυτόματα στενή λειτουργικότητα.

Μέθοδοι

$().alert()

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

.alert('close')

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

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

Διαδήλωση