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	FALSCH	Enthält ein modales Hintergrundelement
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 = "true" > 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 ({
  closeOnEscape : wahr 
})

.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 boostrap-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 boostrap-scrollspy.js

$ ( '#topbar' ). Dropdown ()

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 fügt schnelle, dynamische Registerkarten- und Pillenfunktionen hinzu.

Download

Verwenden von boostrap-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> 
</ul>
 
<Skript>
  $ ( Funktion () {  
    $ ( '.tabs' ). Registerkarten ()
  })
</script>

Demo

• Heim
• Profil
• Mitteilungen
• Einstellungen

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

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 Plugin boostrap-twipsy.js , also stellen Sie sicher, dass Sie diese Datei auch verwenden, wenn Sie Popovers in Ihr Projekt einfügen!

Download

Verwenden von boostrap-popover.js

$ ( '#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'	Attribut oder Methode zum Abrufen von Inhaltstext
Abzug	Schnur	'schweben'	wie der Tooltip ausgelöst wird - Hover | Fokus | Handbuch

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.

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