Unser Modal-Plug-in ist eine superschlanke Variante des traditionellen Modal-js-Plug-ins, wobei besonders darauf geachtet wird, nur die bloße Funktionalität einzuschließen, die wir hier bei Twitter benötigen.

Download

Verwenden von Bootstrap-Modal

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

Optionen

Name	Typ	Ursprünglich	Bezeichnung
Hintergrund	boolesch, Zeichenfolge	FALSCH	Enthält ein modales Hintergrundelement. Stellen Sie den Hintergrund auf ein, "static"wenn das Modal nicht geschlossen werden soll, wenn auf den Hintergrund geklickt wird.
Klaviatur	boolesch	FALSCH	Schließt das Modal, wenn die Escape-Taste gedrückt wird
Show	boolesch	FALSCH	Öffnet modal bei der Klasseninitialisierung

Markierung

Sie können Modals auf Ihrer Seite einfach aktivieren, ohne eine einzige Zeile Javascript schreiben zu müssen. Geben Sie einem Element einfach ein data-controls-modalAttribut, das einer modalen Element-ID entspricht, und wenn Sie darauf klicken, wird Ihr Modal gestartet. Um modale Optionen hinzuzufügen, schließen Sie sie einfach auch als Datenattribute ein.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Modal starten </a>    

Hinweis Wenn Sie möchten, dass Ihr Modal ein- und ausgeht, fügen Sie einfach eine .fadeKlasse zu Ihrem .modalElement hinzu (siehe Demo, um dies in Aktion zu sehen).

Methoden

.modal (Optionen)

Aktiviert Ihren Inhalt als Modal. Akzeptiert optionale Optionen object.

$ ( '#my-modal' ). modal ({
  Tastatur : stimmt 
})

.modal('umschalten')

Schaltet ein Modal manuell um.

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

.modal('zeigen')

Öffnet manuell ein Modal.

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

.modal('ausblenden')

Blendet ein Modal manuell aus.

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

.modal(wahr)

Gibt eine modale Elementklasseninstanz zurück.

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

Hinweis Alternativ kann diese auch mit abgerufen werden $().data('modal').

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).

$ ( '#my-modal' ). bind ( 'versteckt' , function () {   
  // etwas tun ...
})

Demo

Starten Sie Modal

Dieses Plugin dient zum Hinzufügen von Dropdown-Interaktionen zur Bootstrap-Topbar oder zu Registerkarten-Navigationen.

Download

Verwenden von bootstrap-dropdown.js

$ ( '#topbar' ). Dropdown ()

Markierung

data-dropdownVerwenden Sie das Attribut , um jedem Navigationselement schnell eine Dropdown-Funktionalität hinzuzufügen . Jedes gültige Bootstrap-Dropdown wird automatisch aktiviert.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Startseite </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Dropdown </a>  
    <ul class = "Dropdown-Menü" > 
      <li><a href = "#" > Sekundärer Link </a></li> 
      <li><a href = "#" > Etwas anderes hier </a></li> 
      <li class = "Teiler" ></li> 
      <li><a href = "#" > Ein weiterer Link </a></li> 
    </ul>
  </li>
</ul>

Hinweisdata-dropdown Wenn Ihre Benutzeroberfläche über mehrere Dropdown-Menüs verfügt, sollten Sie das Attribut einem wichtigeren Containerelement wie .tabsoder hinzufügen .topbar.

Methoden

$().dropdown()

Eine programmatische API zum Aktivieren von Menüs für eine bestimmte obere Leiste oder Registerkartennavigation.

Demo

Dieses Plugin dient zum Hinzufügen der Scrollspy-Interaktion (automatische Aktualisierung des Navis) zur Bootstrap-Topbar.

Download

Verwenden von bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

Markierung

Um Ihrem Navi einfach Scrollspy-Verhalten hinzuzufügen, fügen Sie einfach das data-scrollspyAttribut zur .topbar.

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

Methoden

$().scrollSpy()

Aktiviert die Navigationsschaltflächen automatisch anhand der Bildlaufposition des Benutzers.

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

Beachten Sie , dass Topbar-Anchor-Tags auflösbare ID-Ziele haben müssen. Zum Beispiel <a href="#home">home</a>muss a etwas im Dom entsprechen wie <div id="home"></div>.

.scrollSpy('aktualisieren')

Der Scrollspy speichert Navigationsschaltflächen und Abschnittskoordinaten für die Leistung. Wenn Sie diesen Cache aktualisieren müssen (wahrscheinlich, wenn Sie dynamische Inhalte haben), rufen Sie einfach diese Aktualisierungsmethode auf. Wenn Sie das data-Attribut verwendet haben, um Ihren Scrollspy zu definieren, rufen Sie einfach refresh für den Body auf.

$ ( 'Körper' ). scrollSpy ( 'aktualisieren' )

Demo

Sehen Sie sich die Topbar-Navigation auf dieser Seite an.

Dieses Plugin bietet zusätzliche Funktionen zum Verwalten des Schaltflächenstatus.

Download

Verwenden von bootstrap-buttons.js

$ ( '.tabs' ). Knopf ()

Methoden

$().button('umschalten')

Schaltet den Push-Status um. Gibt btn den Eindruck, dass es aktiviert wurde.

Hinweis Sie können das automatische Umschalten einer Schaltfläche aktivieren, indem Sie das data-toggleAttribut verwenden.

<button class = "btn" data-toggle = "toggle" > ... </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.

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

$().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.

<button class = "btn" data-complete-text = "fertig!" > ... </button>   
<Skript>
  $('.btn').button('complete')
</scrip>

Demo

Demo wird geladen Demo umschalten

Dieses Plugin fügt schnelle, dynamische Registerkarten- und Pillenfunktionen hinzu.

Download

Verwenden von bootstrap-tabs.js

$ ( '.tabs' ). Registerkarten ()

Markierung

Sie können eine Registerkarten- oder Pillennavigation aktivieren, ohne Javascript zu schreiben, indem Sie ihnen einfach ein data-tabsoder data-pills-Attribut zuweisen.

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

Methoden

$().tabs oder $().pills

Aktiviert die Tab- und Pille-Funktionalität für einen bestimmten Behälter. Tab-Links sollten auf IDs im Dokument verweisen.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#home" > Startseite </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Nachrichten </a></li> 
  <li><a href = "#settings" > Einstellungen </a></li> 
</ul>
 
<div class = "Pilleninhalt" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profil" > ... </div> 
  <div id = "Nachrichten" > ... </div> 
  <div id = "Einstellungen" > ... </div> 
</div>
 
<Skript>
  $ ( Funktion () {  
    $ ( '.tabs' ). Registerkarten ()
  })
</script>

Veranstaltungen

Vorfall	Beschreibung
Rückgeld	Dieses Ereignis wird beim Tab-Wechsel ausgelöst. Verwenden Sie event.targetund event.relatedTarget, um auf die aktive Registerkarte bzw. die vorherige aktive Registerkarte zu zielen.

$ ( '#.tabs' ). bind ( 'change' , function ( e ) {   
  e . Ziel // aktivierte Registerkarte
  e . relatedTarget // vorheriger Tab
})

Demo

• Heim
• Profil
• Mitteilungen
• Einstellungen
• Dropdown-Liste
  • @fett
  • @mdo

Basierend auf dem hervorragenden Plugin jQuery.tipsy, geschrieben von Jason Frame; twipsy ist eine aktualisierte Version, die nicht auf Bilder angewiesen ist, CSS3 für Animationen und Datenattribute für die Titelspeicherung verwendet!

Download

Verwenden von bootstrap-twipsy.js

$ ( '#beispiel' ). twipsy ( Optionen )

Optionen

Name	Typ	Ursprünglich	Bezeichnung
animieren	boolesch	Stimmt	Wenden Sie einen CSS-Fade-Übergang auf den Tooltip an
Verzögerung in	Nummer	0	Verzögerung vor Anzeige des Tooltips (ms)
delayOut	Nummer	0	Verzögerung vor dem Ausblenden des Tooltips (ms)
Zurückfallen	Schnur	''	Text, der verwendet werden soll, wenn kein QuickInfo-Titel vorhanden ist
Platzierung	Schnur	'Oben'	So positionieren Sie den Tooltip - oben | unten | links | Rechts
html	boolesch	FALSCH	ermöglicht HTML-Inhalte im Tooltip
live	boolesch	FALSCH	Verwenden Sie die Ereignisdelegierung anstelle einzelner Ereignishandler
versetzt	Nummer	0	Pixel-Offset des Tooltips vom Zielelement
Titel	Zeichenfolge, Funktion	'Titel'	Attribut oder Methode zum Abrufen von Titeltext
Abzug	Schnur	'schweben'	wie der Tooltip ausgelöst wird - Hover | Fokus | Handbuch
Schablone	Schnur	[Standard-Markup]	Die HTML-Vorlage, die zum Rendern eines Twipsy verwendet wird.

Hinweis Einzelne Twipsy-Instanzoptionen können alternativ auch durch die Verwendung von Datenattributen angegeben werden.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Some title text' > text </a>    

Methoden

$().twipsy(Optionen)

Hängt einen Twipsy-Handler an eine Elementsammlung an.

.twipsy('zeigen')

Zeigt ein twipsy Element an.

$ ( '#element' ). twipsy ( 'zeigen' )

.twipsy('ausblenden')

Versteckt ein Element twipsy.

$ ( '#element' ). twipsy ( 'verstecken' )

.twipsy(wahr)

Gibt eine Elements-Twipsy-Klasseninstanz zurück.

$ ( '#element' ). zwielichtig ( wahr )

Hinweis Alternativ kann diese auch mit abgerufen werden $().data('twipsy').

Demo

Das Popover-Plugin bietet eine einfache Schnittstelle zum Hinzufügen von Popovers zu Ihrer Anwendung. Es erweitert das Bootstrap-twipsy.js- Plugin, also stellen Sie sicher, dass Sie auch diese Datei verwenden, wenn Sie Popovers in Ihr Projekt einfügen!

Hinweis Sie müssen die Datei bootstrap-twipsy.js vor bootstrap-popover.js einfügen.

Download

Bootstrap-popover.js verwenden

$ ( '#beispiel' ). popover ( Optionen )

Optionen

Name	Typ	Ursprünglich	Bezeichnung
animieren	boolesch	Stimmt	Wenden Sie einen CSS-Fade-Übergang auf den Tooltip an
Verzögerung in	Nummer	0	Verzögerung vor Anzeige des Tooltips (ms)
delayOut	Nummer	0	Verzögerung vor dem Ausblenden des Tooltips (ms)
Zurückfallen	Schnur	''	Text, der verwendet werden soll, wenn kein QuickInfo-Titel vorhanden ist
Platzierung	Schnur	'Rechts'	So positionieren Sie den Tooltip - oben | unten | links | Rechts
html	boolesch	FALSCH	ermöglicht HTML-Inhalte im Tooltip
live	boolesch	FALSCH	Verwenden Sie die Ereignisdelegierung anstelle einzelner Ereignishandler
versetzt	Nummer	0	Pixel-Offset des Tooltips vom Zielelement
Titel	Zeichenfolge, Funktion	'Titel'	Attribut oder Methode zum Abrufen von Titeltext
Inhalt	Zeichenfolge, Funktion	'Dateninhalt'	eine Zeichenfolge oder Methode zum Abrufen von Inhaltstext. Wenn keine angegeben sind, wird der Inhalt aus einem Dateninhaltsattribut bezogen.
Abzug	Schnur	'schweben'	wie der Tooltip ausgelöst wird - Hover | Fokus | Handbuch
Schablone	Schnur	[Standard-Markup]	Die HTML-Vorlage, die zum Rendern eines Popovers verwendet wird.

Hinweis Einzelne Popover-Instanzoptionen können alternativ durch die Verwendung von Datenattributen angegeben werden.

<a data-placement = "below" href = "#" class = "btn warning" rel = "popover" > text </a>    

Methoden

$().popover(Optionen)

Initialisiert Popover für eine Elementsammlung.

.popover('zeigen')

Zeigt ein Elemente-Popover an.

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

.popover('ausblenden')

Blendet ein Elemente-Popover aus.

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

Demo

Bewegen Sie den Mauszeiger für Popover

Das Alert-Plugin ist eine superkleine Klasse zum Hinzufügen von Close-Funktionen zu Alerts.

Download

Verwenden von bootstrap-alerts.js

$ ( ".alert-message" ). Alarm ()

Markierung

data-alertFügen Sie Ihren Warnmeldungen einfach ein Attribut hinzu , um ihnen automatisch eine Schließfunktion zu geben.

Optionen

Name	Typ	Ursprünglich	Bezeichnung
Wähler	Schnur	'.nah dran'	Welcher Selektor zum Schließen einer Warnung verwendet werden soll.

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.

$ ( ".alert-message" ). Alarm ( 'Schließen' )

Demo