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

Κατεβάστε

Χρήση bootstrap-modal

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

Επιλογές

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

Σήμανση

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

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

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

Μέθοδοι

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

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

$ ( '#my-modal' ). τροπικό ({
  πληκτρολόγιο : αληθινό 
})

.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

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

Κατεβάστε

Χρησιμοποιώντας bootstrap-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.

Κατεβάστε

Χρήση bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

Σήμανση

Για να προσθέσετε εύκολα τη συμπεριφορά κύλισης στην περιήγησή σας, απλώς προσθέστε το 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 ( 'ανανέωση' )

Διαδήλωση

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

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

Κατεβάστε

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

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

Μέθοδοι

$().button('toggle')

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

Σημείωση Μπορείτε να ενεργοποιήσετε την αυτόματη εναλλαγή ενός κουμπιού χρησιμοποιώντας το data-toggleχαρακτηριστικό.

<button class = "btn" data-toggle = "toggle" > ... </button>   

$().button('loading')

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

<button class = "btn" data-loading-text = "loading stuff..." > ... </button>   

$().button('reset')

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

$().button(string)

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

<button class = "btn" data-complete-text = "ολοκληρώθηκε!" > ... </button>   
<σενάριο>
  $('.btn').button('complete')
</scrip>

Διαδήλωση

Φόρτωση επίδειξης Εναλλαγή επίδειξης

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

Κατεβάστε

Χρήση bootstrap-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> 
</div>
 
<σενάριο>
  $ ( συνάρτηση () {  
    $ ( '.tabs' ). καρτέλες ()
  })
</script>

Εκδηλώσεις

Εκδήλωση	Περιγραφή
αλλαγή	Αυτό το συμβάν ενεργοποιείται κατά την αλλαγή καρτέλας. Χρησιμοποιήστε event.targetκαι event.relatedTargetγια να στοχεύσετε την ενεργή καρτέλα και την προηγούμενη ενεργή καρτέλα αντίστοιχα.

$ ( '#.tabs' ). bind ( 'αλλαγή' , συνάρτηση ( e ) {   
  ε . στόχος // ενεργοποιημένη καρτέλα
  ε . relatedTarget // προηγούμενη καρτέλα
})

Διαδήλωση

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

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

Κατεβάστε

Χρήση bootstrap-twipsy.js

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

Επιλογές

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

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

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Κείμενο τίτλου' > κείμενο </a>    

Μέθοδοι

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

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

.twipsy('show')

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

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

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

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

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

.twipsy (αληθές)

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

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

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

Διαδήλωση

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

Σημείωση Πρέπει να συμπεριλάβετε το αρχείο bootstrap-twipsy.js πριν από το bootstrap-popover.js.

Κατεβάστε

Χρήση bootstrap-popover.js

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

Επιλογές

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

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

<a data-placement = "below" href = "#" class = "btn danger" rel = "popover" > κείμενο </a>    

Μέθοδοι

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

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

.popover('show')

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

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

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

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

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

Διαδήλωση

hover για popover

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

Κατεβάστε

Χρήση bootstrap-alerts.js

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

Σήμανση

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

Επιλογές

Ονομα	τύπος	Προκαθορισμένο	περιγραφή
εκλέκτορας	σειρά	'.Κλείσε'	Τι επιλογέα να στοχεύσετε για το κλείσιμο μιας ειδοποίησης.

Μέθοδοι

$().alert()

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

.alert('close')

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

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

Διαδήλωση