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	boolean, streng	falsch	Ëmfaasst e modal-Kulisse-Element. Setzt den Hannergrond op "static"wann Dir de Modal net wëllt zoumaachen wann d'Kulisse geklickt gëtt.
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 = "statesch" > 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 ({
  Keyboard : wouer 
})

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

$ ( '#topbar' ). scrollSpy ()

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 ( 'refresh' )

Demo

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

Dëse Plugin bitt zousätzlech Funktionalitéit fir d'Gestioun vum Knäppchenstaat.

Download

Benotzt bootstrap-buttons.js

$ ( '.tabs' ). Knäppchen ()

Methoden

$().button('toggle')

Wiesselt Push Staat. Gëtt btn de Look datt et aktivéiert ass.

Notiz Dir kënnt den automateschen Toggling vun engem Knäppchen aktivéieren andeems Dir den data-toggleAttribut benotzt.

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

$().button('loading')

Setzt de Knäppchenzoustand fir d'Luede ze setzen - deaktivéiert de Knäppchen an wiesselt Text op d'Luede vum Text. Luede Text soll op de Knäppchen Element definéiert ginn mat der Daten Attribut data-loading-text.

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

$().button('reset')

Reset Knäppchen Staat - wiesselt Text op Originaltext.

$().button(string)

Reset Knäppchen Staat - tauscht Text an all Daten definéiert Text Staat.

<button class = "btn" data-complete-text = "fäerdeg!" > ... </button>   
<script>
  $('.btn').button('komplett')
</script>

Demo

Lueden Demo Toggle Demo

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

Download

Benotzt bootstrap-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> 
</div>
 
<script>
  $ ( Funktioun () {  
    $ ( '.tabs' ). Tabs ()
  })
</script>

Evenementer

Event	Beschreiwung
änneren	Dëst Event brennt op Tab änneren. Benotzt event.targeta event.relatedTargetfir den aktiven Tab an déi viregt aktive Tab respektiv ze zielen.

$ ( '#.tabs' ). binden ( 'Ännerung' , Funktioun ( e ) {   
  e . Zil // Tab aktivéiert
  e . relatedTarget // virdrun Tab
})

Demo

• Doheem
• Profil
• Messagen
• Astellungen
• Fale loossen
  • @fett
  • @mdo

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	string, 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
Schabloun	String	[Standard Markup]	D'html Schabloun benotzt fir eng twipsy ze maachen.

Notiz Individuell twipsy Instanz Optiounen kënnen alternativ duerch d'Benotzung vun Datenattributer spezifizéiert ginn.

<a href = "#" data-placement = "ënner" rel = 'twipsy' title = 'E puer Titeltext' > Text </a>    

Methoden

$().twipsy(optiounen)

Befestegt engem twipsy Handler zu engem Element Kollektioun.

.twipsy('weisen')

Entdeckt en Element 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 Bootstrap-twipsy.js Plugin, also gitt sécher dës Datei och ze gräifen wann Dir Popovers an Ärem Projet enthält!

Notiz Dir musst d'Bootstrap-twipsy.js Datei virum bootstrap-popover.js enthalen.

Download

Benotzt bootstrap-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	string, Funktioun	'Titel'	Attribut oder Method fir den Titeltext zréckzekommen
Inhalt	string, Funktioun	'Daten Inhalt'	eng String oder Method fir Inhaltstext zréckzekommen. wa keng gëtt geliwwert, gëtt den Inhalt vun engem Date-Inhalt Attribut kritt.
ausléisen	String	'schwiewen'	wéi Tooltip ausgeléist gëtt - hover | konzentréieren | manuell
Schabloun	String	[Standard Markup]	D'html Template benotzt fir e Popover ze maachen.

Notiz Individuell Popover Instanz Optiounen kënnen alternativ duerch d'Benotzung vun Datenattributer spezifizéiert ginn.

<a data-placement = "ënner" href = "#" class = "btn Gefor" rel = "popover" > Text </a>    

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.

Optiounen

Numm	Typ	Default	Beschreiwung
selector	String	'.close'	Wéi eng Selektioun fir ze zielen fir eng Alarm ze schloen.

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