Eise Modal Plugin ass e super schlanken Take on the traditionnelle modal js Plugin, besonnesch oppassen fir nëmmen déi blo Funktionalitéit ze enthalen déi mir hei um Twitter erfuerderen.

Download

Benotzt Bootstrap-Modal

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

Optiounen

Numm	Typ	Default	Beschreiwung
Kuliss	boolesch	falsch	Ëmfaasst e modal-Kulisse-Element
Tastatur	boolesch	falsch	Maacht de Modal zou wann d'Escape-Taste gedréckt gëtt
weisen	boolesch	falsch	Opgemaach Modal op Klass Initialiséierung

Markup

Dir kënnt Modalen op Ärer Säit einfach aktivéieren ouni eng eenzeg Zeil vu Javascript ze schreiwen. Gitt just engem Element en data-controls-modalAttribut dat entsprécht enger Modal Element ID, a wann Dir klickt, lancéiert et Äre Modal. Fir modal Optiounen ze addéieren, gitt se och als Dateattributter.

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

Notiz Wann Dir wëllt datt Äre Modal an an eraus animéiert, füügt just eng .fadeKlass un Äert .modalElement (kuckt op d'Demo fir dëst an Aktioun ze gesinn).

Methoden

.modal (Optiounen)

Aktivéiert Ären Inhalt als Modal. Akzeptéiert eng fakultativ Optiounen object.

$ ( '#my-modal' ). modal ({
  closeOnEscape : richteg 
})

.modal('toggle')

Manuell wiesselt e Modal.

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

.modal('show')

Manuell mécht e Modal op.

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

.modal('verstoppen')

Manuell verstoppt e Modal.

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

.modal(true)

Gëtt eng Elementer modal Klass Instanz zréck.

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

Notiz Alternativ kann dëst mat $().data('modal').

Evenementer

Dem Bootstrap seng modal Klass weist e puer Eventer fir an d'modal Funktionalitéit unzehaken.

Event	Beschreiwung
weisen	Dëst Event brennt direkt wann d' showInstanzmethod genannt gëtt.
gewisen	Dëst Evenement gëtt ausgeléist wann de Modal fir de Benotzer siichtbar gemaach gouf (waart op d'CSS Iwwergäng fir ze kompletéieren).
verstoppen	Dëst Evenement gëtt direkt gebrannt wann d' hideInstanzmethod genannt gouf.
verstoppt	Dëst Evenement gëtt ausgeléist wann de Modal fäerdeg ass vum Benotzer verstoppt ze ginn (waart op d'CSS Iwwergäng fir ze kompletéieren).

$ ( '#my-modal' ). bind ( 'verstoppt' , Funktioun () {   
  // maach eppes ...
})

Demo

Modal starten

Dëse Plugin ass fir Dropdown Interaktioun op d'Bootstrap Topbar oder Tabbed Navigatioun ze addéieren.

Download

Benotzt boostrap-dropdown.js

$ ( '#topbar' ). dropdown ()

Markup

Fir séier Dropdown-Funktionalitéit un all nav-Element ze addéieren, benotzt d' data-dropdownAttribut. All valabel Bootstrap Dropdown gëtt automatesch aktivéiert.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li class = "Dropdown" data-dropdown = "Dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Dropdown </a>  
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Secondaire Link </a></li> 
      <li><a href = "#" > Soss eppes hei </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > En anere Link </a></li> 
    </ul>
  </li>
</ul>

Notiz Wann Är Ui e puer Dropdowns huet, betruecht d' data-dropdownAttribut fir e méi bedeitend Containerelement wéi .tabsoder .topbar.

Methoden

$().dropdown()

E programmateschen API fir d'Menüe fir eng gegebene Topbar oder Tabbed Navigatioun ze aktivéieren.

Demo

Dëse Plugin ass fir d'Scrollspy (Automatesch Aktualiséierung nav) Interaktioun op d'Bootstrap Topbar ze addéieren.

Download

Benotzt boostrap-scrollspy.js

$ ( '#topbar' ). dropdown ()

Markup

Fir einfach scrollspy Verhalen op Är nav ze addéieren, füügt just d' data-scrollspyAttribut un d' .topbar.

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

Methoden

$().scrollspy()

Auto aktivéiert Navigatiounsknäpper no Benotzer Scroll Positioun.

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

Notiz Topbar Anker Tags mussen opléisbar ID Ziler hunn. Zum Beispill, e <a href="#home">home</a>Must entspriechen eppes am Dom wéi <div id="home"></div>.

.scrollspy('refresh')

D'scrollspy cache nav Knäppercher an Rubrik Koordinate fir Leeschtung. Wann Dir dëse Cache muss aktualiséieren (wahrscheinlech wann Dir dynameschen Inhalt hutt) rufft einfach dës Erfrëschungsmethod un. Wann Dir d'Daten Attribut benotzt Är scrollspy ze definéieren, just ruffen refresh op de Kierper.

$ ( 'Kierper' ). scrollspy ( 'erfrëschen' )

Demo

Kuckt d'Topbar Navigatioun op dëser Säit.

Dëse Plugin füügt séier, dynamesch Tab a Pille Funktionalitéit.

Download

Benotzt boostrap-tabs.js

$ ( '.tabs' ). Tabs ()

Markup

Dir kënnt eng Tab oder Pille Navigatioun aktivéieren ouni Javascript ze schreiwen andeems Dir hinnen einfach en data-tabsAttribut data-pillsgëtt.

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

Methoden

$().tabs oder $().pills

Aktivéiert Tab a Pille Funktionalitéit fir e bestëmmte Container. Tab Linken sollen d'ID's am Dokument referenzéieren.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Messagen </a></li> 
  <li><a href = "#settings" > Astellungen </a></li> 
</ul>
 
<div class = "pill-content" > 
  <div class = "active" id = "doheem" ​​> ... </div>  
  <div id = "Profil" > ... </div> 
  <div id = "Messagen" > ... </div> 
  <div id = "Astellungen" > ... </div> 
</ul>
 
<script>
  $ ( Funktioun () {  
    $ ( '.tabs' ). Tabs ()
  })
</script>

Demo

• Doheem
• Profil
• Messagen
• Astellungen

Baséiert op der excellent jQuery.tipsy Plugin geschriwwen vum Jason Frame; twipsy ass eng aktualiséiert Versioun, déi net op Biller vertraut, css3 fir Animatiounen benotzt, an Datenattributer fir Titellagerung!

Download

Benotzt bootstrap-twipsy.js

$ ( '#Beispill' ). twipsy ( Optiounen )

Optiounen

Numm	Typ	Default	Beschreiwung
animéieren	boolesch	wouer	gëllen eng css Fade Iwwergank op den Tooltip
Délaie In	Zuel	0	Verzögerung ier Tooltip weist (ms)
Délaie Aus	Zuel	0	Verzögerung virum Verstoppen Tooltip (ms)
zréckfalen	String	''	Text fir ze benotzen wann keen Tooltip-Titel präsent ass
Placement	String	'uewen'	wéi de Tooltip ze positionéieren - uewen | drënner | lénks | riets
html	boolesch	falsch	erlaabt HTML Inhalt bannent Tooltip
liewen	boolesch	falsch	benotzen Event Delegatioun amplaz individuell Event Handler
offset	Zuel	0	Pixel Offset vum Tooltip vum Zilelement
Titel	streng | Funktioun	'Titel'	Attribut oder Method fir den Titeltext zréckzekommen
ausléisen	String	'schwiewen'	wéi Tooltip ausgeléist gëtt - hover | konzentréieren | manuell

Methoden

$().twipsy(optiounen)

Befestegt engem twipsy Handler zu engem Element Kollektioun.

.twipsy('weisen')

Entdeckt en Elementer twipsy.

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

.twipsy('verstoppen')

Verstoppt en Element twipsy.

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

.twipsy(true)

Gëtt eng Elementer twipsy Klass Instanz zréck.

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

Notiz Alternativ kann dëst mat $().data('twipsy').

Demo

De Popover Plugin bitt en einfachen Interface fir Popovers op Är Applikatioun ze addéieren. Et verlängert de boostrap-twipsy.js Plugin, also gitt sécher dës Datei och ze gräifen wann Dir Popovers an Ärem Projet enthält!

Download

Benotzt boostrap-popover.js

$ ( '#Beispill' ). Popover ( Optiounen )

Optiounen

Numm	Typ	Default	Beschreiwung
animéieren	boolesch	wouer	gëllen eng css Fade Iwwergank op den Tooltip
Délaie In	Zuel	0	Verzögerung ier Tooltip weist (ms)
Délaie Aus	Zuel	0	Verzögerung virum Verstoppen Tooltip (ms)
zréckfalen	String	''	Text fir ze benotzen wann keen Tooltip-Titel präsent ass
Placement	String	'riets'	wéi de Tooltip ze positionéieren - uewen | drënner | lénks | riets
html	boolesch	falsch	erlaabt HTML Inhalt bannent Tooltip
liewen	boolesch	falsch	benotzen Event Delegatioun amplaz individuell Event Handler
offset	Zuel	0	Pixel Offset vum Tooltip vum Zilelement
Titel	streng | Funktioun	'Titel'	Attribut oder Method fir den Titeltext zréckzekommen
Inhalt	streng | Funktioun	'Daten Inhalt'	Attribut oder Method fir Inhalt Text zréckzekommen
ausléisen	String	'schwiewen'	wéi Tooltip ausgeléist gëtt - hover | konzentréieren | manuell

Methoden

$().popover(optiounen)

Initializes Popovers fir eng Element Kollektioun.

.popover('weisen')

Entdeckt en Elementer Popover.

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

.popover('verstoppen')

Verstoppt eng Elementer Popover.

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

Demo

hover fir Popover

Den Alarm Plugin ass eng super kleng Klass fir eng enk Funktionalitéit un Alarmer ze addéieren.

Download

Benotzt bootstrap-alerts.js

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

Markup

Füügt just en data-alertAttribut un Är Alarmmeldungen un fir hinnen automatesch eng Funktionalitéit ze ginn.

Methoden

$().alert()

Wraps all Alarmer mat enker Funktionalitéit. Fir Är Alarmer ze animéieren wann se zougemaach sinn, gitt sécher datt se d' Klass .fadean d' .inKlasse scho fir si applizéiert hunn.

.alert('close')

Maacht eng Alarm zou.

$ ( ".alert-message" ). alert ( 'zoumaachen' )

Demo