Javascript für Bootstrap

Erwecken Sie Bootstrap-Komponenten zum Leben – jetzt mit 12 benutzerdefinierten jQuery - Plug-ins.

Modale

Eine optimierte, aber flexible Version des traditionellen Javascript-Modal-Plugins mit nur der minimal erforderlichen Funktionalität und intelligenten Standardeinstellungen.

Dropdowns

Fügen Sie mit diesem einfachen Plugin Dropdown-Menüs zu fast allem in Bootstrap hinzu. Bootstrap bietet vollständige Unterstützung für Dropdown-Menüs in der Navigationsleiste, Registerkarten und Pillen.

Scrollspy

Verwenden Sie scrollspy, um die Links in Ihrer Navigationsleiste automatisch zu aktualisieren, um den aktuell aktiven Link basierend auf der Scroll-Position anzuzeigen.

Umschaltbare Registerkarten

Verwenden Sie dieses Plug-in, um Registerkarten und Pillen nützlicher zu machen, indem Sie ihnen ermöglichen, durch Tabulatorfenster mit lokalen Inhalten zu wechseln.

Kurzinfos

Tooltips sind eine neue Version des jQuery-Plug-Ins Tipsy und verlassen sich nicht auf Bilder – sie verwenden CSS3 für Animationen und Datenattribute für die lokale Titelspeicherung.

Popovers *

Fügen Sie jedem Element kleine Inhaltsüberlagerungen wie auf dem iPad hinzu, um sekundäre Informationen aufzunehmen.

* Erfordert die Einbeziehung von Tooltips

Warnmeldungen

Das Alert-Plugin ist eine winzige Klasse, um Alerts eine Close-Funktionalität hinzuzufügen.

Tasten

Machen Sie mehr mit Tasten. Steuern Sie Schaltflächenzustände oder erstellen Sie Gruppen von Schaltflächen für weitere Komponenten wie Symbolleisten.

Zusammenbruch

Holen Sie sich Basisstile und flexible Unterstützung für zusammenklappbare Komponenten wie Akkordeons und Navigation.

Karussell

Erstellen Sie ein Karussell aus beliebigen Inhalten, die Sie als interaktive Diashow mit Inhalten bereitstellen möchten.

Tippe voraus

Ein einfaches, leicht erweiterbares Plug-in zum schnellen Erstellen eleganter Textvervollständigungen mit beliebigen Formulartexteingaben.

Übergänge *

Fügen Sie für einfache Übergangseffekte einmal bootstrap-transition.js hinzu, um Modale einzufügen oder Warnungen auszublenden.

* Erforderlich für Animationen in Plugins

Kopf hoch! Alle Javascript-Plugins erfordern die neueste Version von jQuery.

Über Modale

Eine optimierte, aber flexible Version des traditionellen Javascript-Modal-Plugins mit nur der minimal erforderlichen Funktionalität und intelligenten Standardeinstellungen.

Download-Datei

Statisches Beispiel

Unten ist ein statisch gerendertes Modal.

Live-Demo

Schalten Sie ein Modal über Javascript um, indem Sie auf die Schaltfläche unten klicken. Es gleitet nach unten und wird vom oberen Rand der Seite eingeblendet.

Starten Sie das Demo-Modal

Verwenden von Bootstrap-Modal

Rufen Sie das Modal über Javascript auf:

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

Optionen

Name Typ Ursprünglich Bezeichnung
Hintergrund boolesch Stimmt Enthält ein modales Hintergrundelement. Geben Sie alternativ staticeinen Hintergrund an, der das Modal beim Klicken nicht schließt.
Klaviatur boolesch Stimmt Schließt das Modal, wenn die Escape-Taste gedrückt wird
Show boolesch Stimmt Zeigt das Modal bei der Initialisierung an.

Markierung

Sie können Modals auf Ihrer Seite einfach aktivieren, ohne eine einzige Zeile Javascript schreiben zu müssen. Legen Sie einfach data-toggle="modal"ein Controller-Element mit einem data-target="#foo"oder fest href="#foo", das einer modalen Element-ID entspricht, und wenn Sie darauf klicken, wird Ihr Modal gestartet.

Um Optionen zu Ihrer modalen Instanz hinzuzufügen, fügen Sie diese einfach als zusätzliche Datenattribute entweder in das Steuerelement oder in das modale Markup selbst ein.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Starte Modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Modaler Header </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Ein schöner Körper… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Schließen </a>
  11. <a href = "#" class = "btn btn-primary" > Änderungen speichern </a>
  12. </div>
  13. </div>
Kopf hoch! Wenn Sie möchten, dass Ihr Modal ein- und ausgeht, fügen Sie .fadedem Element einfach eine Klasse hinzu .modal(sehen Sie sich die Demo an, um dies in Aktion zu sehen) und schließen Sie bootstrap-transition.js ein.

Methoden

.modal (Optionen)

Aktiviert Ihren Inhalt als Modal. Akzeptiert optionale Optionen object.

  1. $ ( '#myModal' ). modal ({
  2. Tastatur : falsch
  3. })

.modal('umschalten')

Schaltet ein Modal manuell um.

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

.modal('zeigen')

Öffnet manuell ein Modal.

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

.modal('ausblenden')

Blendet ein Modal manuell aus.

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

Veranstaltungen

Die modale Klasse von Bootstrap macht einige Ereignisse verfügbar, um sich in die modale Funktionalität einzuklinken.

Vorfall Beschreibung
Show Dieses Ereignis wird sofort ausgelöst, wenn die showInstanzmethode aufgerufen wird.
gezeigt Dieses Ereignis wird ausgelöst, wenn das Modal für den Benutzer sichtbar gemacht wurde (wartet auf den Abschluss der CSS-Übergänge).
ausblenden Dieses Ereignis wird sofort ausgelöst, wenn die hideInstanzmethode aufgerufen wurde.
versteckt Dieses Ereignis wird ausgelöst, wenn das Modal vollständig vor dem Benutzer ausgeblendet wurde (wartet auf den Abschluss der CSS-Übergänge).
  1. $ ( '#myModal' ). on ( 'versteckt' , function () {
  2. // etwas tun…
  3. })

Das ScrollSpy-Plugin dient zum automatischen Aktualisieren von Navigationszielen basierend auf der Scroll-Position.

Download-Datei

Beispiel-Navigationsleiste mit Scrollspy

Scrollen Sie im unteren Bereich und sehen Sie sich das Navigations-Update an. Die Dropdown-Unterelemente werden ebenfalls hervorgehoben. Versuch es!

@fett

Anzeigen-Leggings Keytar, Brunch-ID-Kunstparty Dolor Labore. Pitchfork yr enim lo-fi, bevor sie ausverkauft sind. Tumblr Farm-to-Table-Fahrradrechte was auch immer. Anim Keffiyeh Carles Strickjacke. Velit Seitan Mcsweeneys Fotoautomat 3 Wolfsmond irure. Cosby-Pullover Lomo-Jeans-Shorts, Williamsburg-Hoodie-Minim, von denen Sie wahrscheinlich noch nichts gehört haben, und Cardigan Trust Fund Culpa Biodiesel Wes Anderson-Ästhetik. Nihil tätowiert Accusamus, Cred Ironie Biodiesel Keffiyeh Handwerker Ullamco Consequat.

@mdo

Veniam Marfa Schnurrbart-Skateboard, Adipisicing Fugiat Velit Mistgabelbart. Freegan Bart aliqua cupidatat mcsweeney's vero. Cupidatat vier loko nisi, ea helvetica nulla carles. Tätowierter Cosby Pullover Food Truck, Mcsweeney's Quis Non Freegan Vinyl. Lo-fi wes anderson +1 sartorial. Carles nicht ästhetische Übung quis gentrify. Brooklyn Adipising Craft Beer Vice Keytar Deserunt.

eines

Occaecat commodo aliqua delectus. Fap Craft Beer Deserunt Skateboard Ea. Lomo-Fahrradrechte adipisicing banh mi, velit ea sunt Next Level Locavore Single-Origin-Kaffee in Magna Veniam. High Life id Vinyl, Echo Park consequat quis aliquip banh mi Pitchfork. Vero VHS est adipising. Consectetur nisi Mini-Umhängetasche zum Selbermachen. Cred ex in, nachhaltige Bauchtasche von delectus consectetur iphone.

zwei

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 Umhängetasche marfa was auch immer delectus Imbisswagen. Sapiente synth id angenommen. Locavore sed helvetica Klischee-Ironie, Thundercats, von denen Sie wahrscheinlich noch nichts gehört haben, consequat Hoodie glutenfrei lo-fi fap aliquip. Labore elit placeat bevor sie ausverkauft sind, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan Craft Beer Seitan Fertig Velit. VHS Chambray Laboris Tempor Veniam. Anim Mollit Minim Commodo Ullamco Donnerkatzen.


Verwenden von bootstrap-scrollspy.js

Rufen Sie den Scrollspy über Javascript auf:

  1. $ ( '#Navigationsleiste' ). scrollspy ()

Markierung

Um einfach Scrollspy-Verhalten zu Ihrer Topbar-Navigation hinzuzufügen, fügen data-spy="scroll"Sie einfach das Element hinzu, das Sie ausspionieren möchten (normalerweise wäre dies der Körper).

  1. <body data-spy = "scroll" > ... </body>
Kopf hoch! Navbar-Links müssen auflösbare ID-Ziele haben. Zum Beispiel <a href="#home">home</a>muss a etwas im Dom entsprechen wie <div id="home"></div>.

Methoden

.scrollspy('aktualisieren')

Wenn Sie scrollspy in Verbindung mit dem Hinzufügen oder Entfernen von Elementen aus dem DOM verwenden, müssen Sie die Aktualisierungsmethode wie folgt aufrufen:

  1. $ ( '[data-spy="scroll"]' ). jeweils ( funktion () {
  2. var $spy = $ ( this ). scrollspy ( 'aktualisieren' )
  3. });

Optionen

Name Typ Ursprünglich Bezeichnung
versetzt Nummer 10 Pixel, die bei der Berechnung der Bildlaufposition vom oberen Rand versetzt werden sollen.

Veranstaltungen

Vorfall Beschreibung
aktivieren Sie Dieses Ereignis wird immer dann ausgelöst, wenn ein neuer Gegenstand vom Scrollspy aktiviert wird.

Dieses Plugin fügt schnelle, dynamische Tab- und Pill-Funktionen für den Übergang durch lokale Inhalte hinzu.

Download-Datei

Beispiel-Tabs

Klicken Sie auf die Registerkarten unten, um zwischen ausgeblendeten Fenstern umzuschalten, sogar über Dropdown-Menüs.

Raw Denim Sie haben wahrscheinlich noch nie von den Jeansshorts Austin gehört. Nesciunt Tofu Stumptown Aliqua, Retro-Synth-Master-Reinigung. Schnurrbartklischee tempor, williamsburg carles vegan helvetica. Reprehenderit Metzger Retro Keffiyeh Dreamcatcher Synth. Cosby-Pullover eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis Strickjacke amerikanische Kleidung, Metzger 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.


Verwenden von bootstrap-tab.js

Aktivieren Sie Tabs über Javascript (jede Registerkarte muss einzeln aktiviert werden):

  1. $ ( '#myTab a' ). klick ( Funktion ( e ) {
  2. e . PreventDefault ();
  3. $ ( dies ). tab ( 'zeigen' );
  4. })

Sie können einzelne Registerkarten auf verschiedene Arten aktivieren:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'zeigen' ); // Registerkarte nach Name auswählen
  2. $ ( '#myTab a:first' ). tab ( 'zeigen' ); // Erste Registerkarte auswählen
  3. $ ( '#myTab a:last' ). tab ( 'zeigen' ); // Letzten Tab auswählen
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'zeigen' ); // Dritten Tab auswählen (0-indiziert)

Markierung

Sie können eine Registerkarten- oder Pillennavigation aktivieren, ohne Javascript zu schreiben, indem Sie einfach data-toggle="tab"oder data-toggle="pill"für ein Element angeben. Durch das Hinzufügen der Klassen navund nav-tabszur Registerkarte ulwird das Styling der Bootstrap-Registerkarte angewendet.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Startseite </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Nachrichten </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Einstellungen </a></li>
  6. </ul>

Methoden

$().tab

Aktiviert ein Registerkartenelement und einen Inhaltscontainer. Tab sollte entweder ein data-targetoder ein haben href, das auf einen Container-Knoten im DOM abzielt.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Startseite </a></li>
  3. <li><a href = "#profile" > Profil </a></li>
  4. <li><a href = "#messages" > Nachrichten </a></li>
  5. <li><a href = "#settings" > Einstellungen </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" 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. <Skript>
  16. $ ( Funktion () {
  17. $ ( '#myTab a:last' ). tab ( 'zeigen' );
  18. })
  19. </script>

Veranstaltungen

Vorfall Beschreibung
Show Dieses Ereignis wird bei der Registerkartenanzeige ausgelöst, aber bevor die neue Registerkarte angezeigt wurde. Verwenden Sie event.targetund event.relatedTarget, um auf die aktive Registerkarte bzw. die vorherige aktive Registerkarte (falls verfügbar) abzuzielen.
gezeigt Dieses Ereignis wird beim Anzeigen von Registerkarten ausgelöst, nachdem eine Registerkarte angezeigt wurde. Verwenden Sie event.targetund event.relatedTarget, um auf die aktive Registerkarte bzw. die vorherige aktive Registerkarte (falls verfügbar) abzuzielen.
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'angezeigt' , function ( e ) {
  2. e . Ziel // aktivierte Registerkarte
  3. e . relatedTarget // vorheriger Tab
  4. })

Über QuickInfos

Inspiriert von dem exzellenten jQuery.tipsy-Plugin, das von Jason Frame geschrieben wurde; Tooltips sind eine aktualisierte Version, die nicht auf Bilder angewiesen ist, CSS3 für Animationen und Datenattribute für die lokale Titelspeicherung verwendet.

Download-Datei

Beispiel für die Verwendung von Tooltips

Bewegen Sie den Mauszeiger über die folgenden Links, um QuickInfos anzuzeigen:

Enge Hosen der nächsten Stufe, keffiyeh , von denen hast du wahrscheinlich noch nie gehört. Photo Booth Beard Raw Denim Buchdruck vegane Umhängetasche stumptown. Farm-to-Table-Seitan, Mcsweeney's Fixie Sustainable Quinoa 8-Bit American Apparel haben einen Frottee-Richardson-Vinyl-Chabray. Bart Stumptown, Cardigans banh mi lomo Thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chabray. Ein wirklich ironischer Handwerker wie auch immer Keytar , Scenester Farm-to-Table Banksy Austin Twitter-Handle Freegan Cred Raw Denim Single-Origin-Kaffee viral.


Verwenden von bootstrap-tooltip.js

Lösen Sie den Tooltip über Javascript aus:

  1. $ ( '#beispiel' ). Kurzinfo ( Optionen )

Optionen

Name Typ Ursprünglich Bezeichnung
Animation boolesch Stimmt Wenden Sie einen CSS-Fade-Übergang auf den Tooltip an
Platzierung Zeichenkette|Funktion 'oben' So positionieren Sie den Tooltip - oben | unten | links | Rechts
Wähler Schnur FALSCH Wenn ein Selektor bereitgestellt wird, werden QuickInfo-Objekte an die angegebenen Ziele delegiert.
Titel Zeichenfolge | Funktion '' Standardwert für den Titel, wenn das `title`-Tag nicht vorhanden ist
Abzug Schnur 'schweben' wie der Tooltip ausgelöst wird - Hover | Fokus | Handbuch
Verzögerung Zahl | Objekt 0

Verzögerung beim Anzeigen und Ausblenden des Tooltips (ms) - gilt nicht für den manuellen Triggertyp

Wenn eine Nummer angegeben wird, wird die Verzögerung sowohl auf das Ausblenden als auch auf das Anzeigen angewendet

Objektstruktur ist:delay: { show: 500, hide: 100 }

Kopf hoch! Optionen für individuelle Tooltips können alternativ durch die Verwendung von Datenattributen angegeben werden.

Markierung

Aus Leistungsgründen sind die Tooltip- und Popover-Daten-APIs optional. Wenn Sie sie verwenden möchten, geben Sie einfach eine Auswahloption an.

  1. <a href = "#" rel = "tooltip" title = "first tooltip" > Bewegen Sie den Mauszeiger über mich </a>

Methoden

$().tooltip(Optionen)

Fügt einen Tooltip-Handler an eine Elementsammlung an.

.tooltip('zeigen')

Zeigt den Tooltip eines Elements an.

  1. $ ( '#element' ). Tooltip ( 'zeigen' )

.tooltip('ausblenden')

Blendet den Tooltip eines Elements aus.

  1. $ ( '#element' ). Tooltip ( 'ausblenden' )

.tooltip('umschalten')

Schaltet den Tooltip eines Elements um.

  1. $ ( '#element' ). Tooltip ( 'umschalten' )

Über Popover

Fügen Sie jedem Element kleine Inhaltsüberlagerungen wie auf dem iPad hinzu, um sekundäre Informationen aufzunehmen.

* Tooltip muss enthalten sein

Download-Datei

Beispiel Hover-Popover

Bewegen Sie den Mauszeiger über die Schaltfläche, um das Popover auszulösen.


Bootstrap-popover.js verwenden

Popover über Javascript aktivieren:

  1. $ ( '#beispiel' ). Popover ( Optionen )

Optionen

Name Typ Ursprünglich Bezeichnung
Animation boolesch Stimmt Wenden Sie einen CSS-Fade-Übergang auf den Tooltip an
Platzierung Zeichenkette|Funktion 'Rechts' So positionieren Sie das Popover - top | unten | links | Rechts
Wähler Schnur FALSCH Wenn ein Selektor bereitgestellt wird, werden QuickInfo-Objekte an die angegebenen Ziele delegiert
Abzug Schnur 'schweben' wie der Tooltip ausgelöst wird - Hover | Fokus | Handbuch
Titel Zeichenfolge | Funktion '' Standardwert für den Titel, wenn das Attribut "Titel" nicht vorhanden ist
Inhalt Zeichenfolge | Funktion '' Standardwert für den Inhalt, wenn das Attribut "data-content" nicht vorhanden ist
Verzögerung Zahl | Objekt 0

Verzögerung beim Anzeigen und Ausblenden des Popovers (ms) – gilt nicht für den manuellen Triggertyp

Wenn eine Nummer angegeben wird, wird die Verzögerung sowohl auf das Ausblenden als auch auf das Anzeigen angewendet

Objektstruktur ist:delay: { show: 500, hide: 100 }

Kopf hoch! Optionen für einzelne Popover können alternativ durch die Verwendung von Datenattributen angegeben werden.

Markierung

Aus Leistungsgründen sind die Tooltip- und Popover-Daten-APIs optional. Wenn Sie sie verwenden möchten, geben Sie einfach eine Auswahloption an.

Methoden

$().popover(Optionen)

Initialisiert Popover für eine Elementsammlung.

.popover('zeigen')

Zeigt ein Elemente-Popover an.

  1. $ ( '#element' ). popover ( 'zeigen' )

.popover('ausblenden')

Blendet ein Elemente-Popover aus.

  1. $ ( '#element' ). popover ( 'ausblenden' )

.popover('umschalten')

Schaltet ein Elemente-Popover um.

  1. $ ( '#element' ). popover ( 'umschalten' )

Über Benachrichtigungen

Das Alert-Plugin ist eine winzige Klasse, um Alerts eine Close-Funktionalität hinzuzufügen.

Download

Beispielwarnungen

Das Alerts-Plug-in funktioniert mit regulären Warnmeldungen und Blockmeldungen.

Heilige Guacamole! Überprüfe am besten dich selbst, du siehst nicht allzu gut aus.

Oh verdammt! Sie haben einen Fehler!

Ändern Sie dies und das und versuchen Sie es erneut. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Führen Sie diese Aktion durch Oder tun Sie dies


Verwenden von bootstrap-alert.js

Ablehnen einer Warnung per Javascript aktivieren:

  1. $ ( ".alarm" ). Alarm ()

Markierung

Fügen Sie einfach data-dismiss="alert"Ihre Schließen-Schaltfläche hinzu, um automatisch eine Warnmeldung zum Schließen zu erhalten.

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

Methoden

$().alarm()

Umschließt alle Warnungen mit Schließfunktion. Damit Ihre Benachrichtigungen beim Schließen animiert werden, stellen Sie sicher, dass ihnen die Klasse .fadeund .inbereits zugewiesen wurde.

.alert('Schließen')

Schließt eine Warnung.

  1. $ ( ".alarm" ). Alarm ( 'Schließen' )

Veranstaltungen

Die Alert-Klasse von Bootstrap stellt einige Ereignisse bereit, um sich in die Alert-Funktionalität einzuklinken.

Vorfall Beschreibung
nah dran Dieses Ereignis wird sofort ausgelöst, wenn die closeInstanzmethode aufgerufen wird.
abgeschlossen Dieses Ereignis wird ausgelöst, wenn die Warnung geschlossen wurde (wartet, bis die CSS-Übergänge abgeschlossen sind).
  1. $ ( '#my-alert' ). bind ( 'geschlossen' , function () {
  2. // etwas tun…
  3. })

Um

Machen Sie mehr mit Tasten. Steuern Sie Schaltflächenzustände oder erstellen Sie Gruppen von Schaltflächen für weitere Komponenten wie Symbolleisten.

Download-Datei

Beispielanwendungen

Verwenden Sie das Schaltflächen-Plugin für Zustände und Schalter.

Staatsbürgerlich
Einzelner Schalter
Kontrollkästchen
Radio

Verwenden von bootstrap-button.js

Schaltflächen per Javascript aktivieren:

  1. $ ( '.nav-tabs' ). Knopf ()

Markierung

Datenattribute sind integraler Bestandteil des Schaltflächen-Plugins. Sehen Sie sich den Beispielcode unten für die verschiedenen Markup-Typen an.

  1. <!-- Fügen Sie data-toggle="button" hinzu, um das Umschalten auf einer einzelnen Schaltfläche zu aktivieren -->
  2. <button class = "btn" data-toggle = "button" > Einzelner Schalter </button>
  3.  
  4. <!-- Data-toggle="buttons-checkbox" zum Umschalten des Kontrollkästchenstils in der btn-Gruppe hinzufügen -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Links </button>
  7. <button class = "btn" > Mittel </button>
  8. <button class = "btn" > Rechts </button>
  9. </div>
  10.  
  11. <!-- Data-toggle="buttons-radio" zum Umschalten des Radiostils auf btn-group hinzufügen -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Links </button>
  14. <button class = "btn" > Mittel </button>
  15. <button class = "btn" > Rechts </button>
  16. </div>

Methoden

$().button('umschalten')

Schaltet den Push-Status um. Verleiht der Schaltfläche den Eindruck, dass sie aktiviert wurde.

Kopf hoch! Sie können das automatische Umschalten einer Schaltfläche aktivieren, indem Sie das data-toggleAttribut verwenden.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('Laden')

Setzt den Schaltflächenstatus auf Laden – deaktiviert die Schaltfläche und tauscht Text gegen Ladetext aus. Der Ladetext sollte auf dem Schaltflächenelement mit dem Datenattribut definiert werden data-loading-text.

  1. <button class = "btn" data-loading-text = "loading stuff ..." > ... </button>
Kopf hoch! Firefox behält den deaktivierten Zustand über das Laden von Seiten bei . Eine Problemumgehung hierfür ist die Verwendung von autocomplete="off".

$().button('zurücksetzen')

Setzt den Schaltflächenstatus zurück - tauscht den Text gegen den ursprünglichen Text aus.

$().button(Zeichenfolge)

Setzt den Schaltflächenstatus zurück - tauscht den Text in einen beliebigen datendefinierten Textstatus aus.

  1. <button class = "btn" data-complete-text = "fertig!" > ... </button>
  2. <Skript>
  3. $ ( '.btn' ). Schaltfläche ( 'Fertig' )
  4. </script>

Um

Holen Sie sich Basisstile und flexible Unterstützung für zusammenklappbare Komponenten wie Akkordeons und Navigation.

Download-Datei

* Erfordert die Einbeziehung des Transitions-Plugins.

Beispiel Akkordeon

Mit dem Collapse-Plugin haben wir ein einfaches Akkordeon-Widget erstellt:

Anim pariatur clische reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 Wolfsmond officia aute, non cupidatat skateboard dolor brunch. Foodtruck Quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it tintenfisch sortenreiner kaffee nulla angenommenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Anzeige veganer Ausnahme Metzger Vice Lomo. Leggings occaecat Craft Beer Farm-to-Table, Raw-Denim-Ästhetik-Synth nesciunt Sie haben wahrscheinlich noch nichts von ihnen gehört accusamus labore sustainable VHS.
Anim pariatur clische reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 Wolfsmond officia aute, non cupidatat skateboard dolor brunch. Foodtruck Quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it tintenfisch sortenreiner kaffee nulla angenommenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Anzeige veganer Ausnahme Metzger Vice Lomo. Leggings occaecat Craft Beer Farm-to-Table, Raw-Denim-Ästhetik-Synth nesciunt Sie haben wahrscheinlich noch nichts von ihnen gehört accusamus labore sustainable VHS.
Anim pariatur clische reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 Wolfsmond officia aute, non cupidatat skateboard dolor brunch. Foodtruck Quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it tintenfisch sortenreiner kaffee nulla angenommenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Anzeige veganer Ausnahme Metzger Vice Lomo. Leggings occaecat Craft Beer Farm-to-Table, Raw-Denim-Ästhetik-Synth nesciunt Sie haben wahrscheinlich noch nichts von ihnen gehört accusamus labore sustainable VHS.

Verwenden von bootstrap-collapse.js

Per Javascript aktivieren:

  1. $ ( ".collapse" ). zusammenbrechen ()

Optionen

Name Typ Ursprünglich Bezeichnung
Elternteil Wähler FALSCH Wenn Selektor, dann werden alle reduzierbaren Elemente unter dem angegebenen übergeordneten Element geschlossen, wenn dieses reduzierbare Element angezeigt wird. (ähnlich dem traditionellen Akkordeonverhalten)
Umschalten boolesch Stimmt Schaltet das reduzierbare Element beim Aufruf um

Markierung

Fügen Sie einfach data-toggle="collapse"ein und ein data-targetto-Element hinzu, um automatisch die Steuerung eines reduzierbaren Elements zuzuweisen. Das data-targetAttribut akzeptiert einen CSS-Selektor, auf den die Reduzierung angewendet wird. Stellen Sie sicher, dass Sie die Klasse collapsedem zusammenklappbaren Element hinzufügen. Wenn Sie möchten, dass es standardmäßig geöffnet ist, fügen Sie die zusätzliche Klasse hinzu in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. einfach zusammenklappbar
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
Kopf hoch! Um einem reduzierbaren Steuerelement eine akkordeonartige Gruppenverwaltung hinzuzufügen, fügen Sie das Datenattribut hinzu data-parent="#selector". Sehen Sie sich die Demo an, um dies in Aktion zu sehen.

Methoden

.collapse(Optionen)

Aktiviert Ihren Inhalt als zusammenklappbares Element. Akzeptiert optionale Optionen object.

  1. $ ( '#myCollapsible' ). zusammenbrechen ({
  2. umschalten : falsch
  3. })

.collapse('umschalten')

Blendet ein reduzierbares Element ein oder aus.

.collapse('zeigen')

Zeigt ein zusammenklappbares Element.

.collapse('ausblenden')

Blendet ein zusammenklappbares Element aus.

Veranstaltungen

Die Collapse-Klasse von Bootstrap macht einige Ereignisse verfügbar, um sich in die Collapse-Funktionalität einzuklinken.

Vorfall Beschreibung
Show Dieses Ereignis wird sofort ausgelöst, wenn die showInstanzmethode aufgerufen wird.
gezeigt Dieses Ereignis wird ausgelöst, wenn ein Kollapselement für den Benutzer sichtbar gemacht wurde (wartet, bis die CSS-Übergänge abgeschlossen sind).
ausblenden Dieses Ereignis wird sofort ausgelöst, wenn die hideMethode aufgerufen wurde.
versteckt Dieses Ereignis wird ausgelöst, wenn ein Collapse-Element vor dem Benutzer ausgeblendet wurde (wartet, bis die CSS-Übergänge abgeschlossen sind).
  1. $ ( '#myCollapsible' ). on ( 'versteckt' , function () {
  2. // etwas tun…
  3. })

Um

Ein einfaches, leicht erweiterbares Plug-in zum schnellen Erstellen eleganter Textvervollständigungen mit beliebigen Formulartexteingaben.

Download-Datei

Beispiel

Beginnen Sie mit der Eingabe in das Feld unten, um die Ergebnisse der Schnellvervollständigung anzuzeigen.


Verwenden von bootstrap-typeahead.js

Rufen Sie die Vervollständigung per Javascript auf:

  1. $ ( '.tippen' ). tippen ()

Optionen

Name Typ Ursprünglich Bezeichnung
Quelle Reihe [ ] Die abzufragende Datenquelle.
Artikel Nummer 8 Die maximale Anzahl von Elementen, die in der Dropdown-Liste angezeigt werden.
Matcher Funktion Groß-/Kleinschreibung egal Die Methode, mit der bestimmt wird, ob eine Abfrage mit einem Element übereinstimmt. Akzeptiert ein einzelnes Argument, itemgegen das die Abfrage getestet werden soll. Rufen Sie die aktuelle Abfrage mit auf this.query. Gibt einen booleschen Wert zurück true, wenn die Abfrage eine Übereinstimmung ist.
Sorter Funktion exakte Übereinstimmung,
Groß-/Kleinschreibung beachten, Groß-/
Kleinschreibung nicht beachten
Methode zum Sortieren von Autocomplete-Ergebnissen. Akzeptiert ein einzelnes Argument itemsund hat den Gültigkeitsbereich der Typeahead-Instanz. Referenzieren Sie die aktuelle Abfrage mit this.query.
Textmarker Funktion hebt alle Standardübereinstimmungen hervor Methode zum Hervorheben von Ergebnissen der automatischen Vervollständigung. Akzeptiert ein einzelnes Argument itemund hat den Gültigkeitsbereich der Typeahead-Instanz. Sollte HTML zurückgeben.

Markierung

Fügen Sie Datenattribute hinzu, um ein Element mit der Schnellvervollständigungsfunktion zu registrieren.

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

Methoden

.typeahead (Optionen)

Initialisiert eine Eingabe mit einer Schnellvervollständigung.