Javascript fir Bootstrap

Bréngt d'Komponente vum Bootstrap zum Liewen - elo mat 12 personaliséierte jQuery Plugins.

Modal

E streamlined, awer flexibel, iwwerhëlt den traditionelle Javascript Modal Plugin mat nëmmen déi minimal erfuerderlech Funktionalitéit a Smart Defaults.

Dropdowns

Füügt Dropdown-Menüe fir bal alles am Bootstrap mat dësem einfache Plugin. Bootstrap huet voll Dropdown-Menü Ënnerstëtzung an der Navbar, Tabs a Pillen.

Scrollspy

Benotzt Scrollspy fir automatesch d'Links an Ärer Navbar ze aktualiséieren fir den aktuellen aktive Link op Basis vun der Scrollpositioun ze weisen.

Togglable Tabs

Benotzt dëse Plugin fir Tabs a Pëllen méi nëtzlech ze maachen andeems se se duerch Tabbbare Panele vum lokalen Inhalt wiesselen.

Tooltips

En neien Take on the jQuery Tipsy Plugin, Tooltips vertrauen net op Biller - si benotzen CSS3 fir Animatiounen an Datenattributer fir lokal Titellagerung.

Popovers *

Füügt kleng Iwwerlagerunge vum Inhalt, wéi déi um iPad, un all Element fir sekundär Informatioun ze wunnen.

* Verlaangt Tooltipps fir abegraff ze sinn

Alarmmeldungen

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

Knäppercher

Maacht méi mat Knäppercher. Kontroll Knäppchen Staaten oder Gruppe vu Knäppercher erstellen fir méi Komponenten wéi Toolbaren.

Zesummebroch

Kritt Basisstiler a flexibel Ënnerstëtzung fir zesummeklappbare Komponenten wéi Akkordeonen a Navigatioun.

Karussell

Erstellt e Merry-Go-Round vun all Inhalt deen Dir wëllt eng interaktiv Diashow mat Inhalt ubidden.

Typeahead

E Basis, liicht erweiderten Plugin fir séier elegant Schreifweis mat all Form Textinput ze kreéieren.

Iwwergäng *

Fir einfach Iwwergangseffekter, enthalen bootstrap-transition.js eemol fir an Modalen ze rutschen oder Alarmer ze verschwannen.

* Obligatoresch fir Animatioun a Plugins

Kapp erop! All Javascript Plugins erfuerderen déi lescht Versioun vu jQuery.

Iwwert Modal

E streamlined, awer flexibel, iwwerhëlt den traditionelle Javascript Modal Plugin mat nëmmen déi minimal erfuerderlech Funktionalitéit a Smart Defaults.

Download Datei

Statescht Beispill

Drënner ass e statesch rendered Modal.

Live Demo

Toggle e Modal iwwer Javascript andeems Dir op de Knäppchen hei drënner klickt. Et rutscht erof a verschwannen vun uewen op der Säit.

Start Demo Modal

Benotzt Bootstrap-Modal

Rufft de Modal iwwer Javascript un:

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

Optiounen

Numm Typ Default Beschreiwung
Kuliss boolesch wouer Ëmfaasst e modal Kuliss Element. Alternativ, spezifizéiert staticfir eng Kuliss déi de Modal net op Klick zoumaacht.
Tastatur boolesch wouer Maacht de Modal zou wann de Fluchtschlëssel gedréckt gëtt
weisen boolesch wouer Weist de Modal wann initialiséiert.

Markup

Dir kënnt Modalen op Ärer Säit einfach aktivéieren ouni eng eenzeg Zeil vu Javascript ze schreiwen. Setzt just data-toggle="modal"op e Controllerelement mat engem data-target="#foo"oder href="#foo"wat mat enger Modal Element ID entsprécht, a wann Dir klickt, lancéiert et Äre Modal.

Och, fir Optiounen op Är modal Instanz ze addéieren, gitt se just als zousätzlech Datenattributer op entweder de Kontrollelement oder de modale Markup selwer.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Modal starten </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> Modal Header </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Ee schéine Kierper ... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Zoumaachen </a>
  11. <a href = "#" class = "btn btn-primary" > Ännerungen späicheren </a>
  12. </div>
  13. </div>
Kapp erop! Wann Dir wëllt datt Äre Modal an an aus animéiert, füügt just eng .fadeKlass un d' .modalElement (kuckt op d'Demo fir dëst an Aktioun ze gesinn) an enthält bootstrap-transition.js.

Methoden

.modal (Optiounen)

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

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

.modal('toggle')

Manuell wiesselt e Modal.

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

.modal('show')

Manuell mécht e Modal op.

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

.modal('verstoppen')

Manuell verstoppt e Modal.

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

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).
  1. $ ( '#myModal' ). op ( 'verstoppt' , Funktioun () {
  2. // maach eppes…
  3. })

De ScrollSpy Plugin ass fir automatesch Aktualiséierung vun Nav Ziler baséiert op Scroll Positioun.

Download Datei

Beispill navbar mat scrollspy

Scroll d'Géigend hei drënner a kuckt d'Navigatiounsupdate. D'Dropdown Ënnerartikele ginn och markéiert. Versich et!

@fett

Ad Leggings Keytar, Brunch ID Art Party Dolor Laboure. Pitchfork yr enim lo-fi ier se ausverkaaft qui. Tumblr Bauerenhaff-zu-Dësch Vëlo Rechter egal. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's Photo Stand 3 Wolf Moon irure. Cosby Pullover Lomo Jean Shorts, Williamsburg Hoodie minim qui Dir hutt wahrscheinlech net vun hinnen héieren et Cardigan Trust Fund culpa Biodiesel Wes Anderson Aesthetic. Nihil tattooed accusamus, cred Ironie Biodiesel keffiyeh Handwierker ullamco consequat.

@mdo

Veniam Marfa Moustache Skateboard, adipising Fugiat Velit Pitchfork Baart. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat véier loko nisi, ea helvetica nulla carles. Tattooed Cosby Sweater Food Truck, Mcsweeney's quis non freegan Vinyl. Lo-fi wes anderson +1 sartorial. Carles net ästhetesch Übung quis gentrify. Brooklyn adipisicing Handwierksbetrieb Vice Keytar deserunt.

eent

Occaecat commodo aliqua delectus. Fap craft beer deserunt Skateboard ea. Lomo Vëlo Rechter adipisicing banh mi, velit ea sunt nächsten Niveau locavore Single-Origine Kaffi zu Magna Veniam. High Life ID Vinyl, Echo Park consequat quis aliquip banh mi pitchfork. Vero VHS ass adipisicing. Consectetur nisi DIY minim Messenger Bag. Cred ex in, nohalteg Delectus Consectetur Fanny Pack iPhone.

zwee

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 Messenger Bag marfa wat och ëmmer delectus Food Truck. Sapiente synth id assumenda. Locavore sed helvetica cliche ironie, thundercats Dir wahrscheinlech net vun hinnen héieren hunn consequat Hoodie gluten-gratis lo-fi fap aliquip. Labore Elit Placeat ier se ausverkaaft hunn, Terry Richardson proident Brunch nesciunt quis Cosby Pullover pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Benotzt bootstrap-scrollspy.js

Rufft de Scrollspy iwwer Javascript un:

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

Markup

Fir einfach scrollspy Verhalen op Är Topbar Navigatioun ze addéieren, füügt just data-spy="scroll"un d'Element un op déi Dir wëllt spionéieren (meeschtens wier dëst de Kierper).

  1. <body data-spy = "scroll" > ... </body>
Kapp erop! Navbar Linken 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>.

Methoden

.scrollspy('refresh')

Wann Dir Scrollspy benotzt a Verbindung mat der Zousatz oder Ewechhuele vun Elementer aus der DOM, musst Dir d'Erfrëschungsmethod sou nennen:

  1. $ ( '[data-spy="scroll"]' ). all ( Funktioun () {
  2. var $spion = $ ( dëser ). scrollspy ( 'erfrëschen' )
  3. });

Optiounen

Numm Typ Default Beschreiwung
offset Zuel 10 Pixel fir vun uewen ze kompenséieren wann Dir d'Positioun vun der Scroll berechnen.

Evenementer

Event Beschreiwung
aktivéieren Dëst Event brennt wann en neit Element vum Scrollspy aktivéiert gëtt.

Dëse Plugin füügt séier, dynamesch Tab a Pille Funktionalitéit fir den Iwwergank duerch lokalen Inhalt.

Download Datei

Beispill Tabs

Klickt op d'Tabs hei drënner fir tëscht verstoppte Panelen ze wiesselen, och iwwer Dropdown-Menüen.

Raw Denim Dir hutt wahrscheinlech net vun hinnen héieren Jean Shorts Austin. Nesciunt Tofu Stumptown Aliqua, Retro Synth Master Cleanse. Moustache Cliche Temper, Williamsburg Carles Vegan Helvetica. Reprehenderit Metzler Retro Keffiyeh Dreamcatcher Synth. Cosby Pullover eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan Aliquip quis Cardigan American Apparel, Metzler 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.


Benotzt bootstrap-tab.js

Aktivéiert Tabbar Tabs iwwer Javascript (all Tab muss individuell aktivéiert ginn):

  1. $ ( '#myTab a' ). klickt ( Funktioun ( e ) {
  2. e . verhënnerenDefault ();
  3. $ ( dëst ). tab ( 'weisen' );
  4. })

Dir kënnt eenzel Tabs op verschidde Manéieren aktivéieren:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'weisen' ); // Wielt Tab mam Numm
  2. $ ( '#myTab a:first' ). tab ( 'weisen' ); // Wielt éischt Tab
  3. $ ( '#myTab a:lescht' ). tab ( 'weisen' ); // Wielt lescht Tab
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'weisen' ); // Wielt drëtt Tab (0-indexéiert)

Markup

Dir kënnt eng Tab oder Pille Navigatioun aktivéieren ouni Javascript ze schreiwen andeems Dir einfach spezifizéiert data-toggle="tab"oder data-toggle="pill"op en Element. D'Addéieren vun den nava nav-tabsKlassen op d'Tab ulwäert de Bootstrap Tab Styling uwenden.

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

Methoden

$().tab

Aktivéiert e Tabelement an Inhaltsbehälter. Tab soll entweder en data-targetoder e hrefgezielt e Container Node am DOM hunn.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Home </a></li>
  3. <li><a href = "#profile" > Profil </a></li>
  4. <li><a href = "#messages" > Messagen </a></li>
  5. <li><a href = "#settings" > Astellungen </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 = "Profil" > ... </div>
  11. <div class = "tab-pane" id = "Messagen" > ... </div>
  12. <div class = "tab-pane" id = "Astellungen" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( Funktioun () {
  17. $ ( '#myTab a:lescht' ). tab ( 'weisen' );
  18. })
  19. </script>

Evenementer

Event Beschreiwung
weisen Dëst Event brennt op Tab Show, awer ier déi nei Tab gewisen gouf. Benotzt event.targeta event.relatedTargetfir den aktiven Tab an déi viregt aktive Tab (wann verfügbar) respektiv ze zielen.
gewisen Dëst Event brennt op Tab Show nodeems eng Tab gewisen gouf. Benotzt event.targeta event.relatedTargetfir den aktiven Tab an déi viregt aktive Tab (wann verfügbar) respektiv ze zielen.
  1. $ ( 'a[data-toggle="tab"]' ). op ( 'gewise' , Funktioun ( e ) {
  2. e . Zil // Tab aktivéiert
  3. e . relatedTarget // virdrun Tab
  4. })

Iwwer Tooltips

Inspiréiert vum exzellente jQuery.tipsy Plugin geschriwwen vum Jason Frame; Tooltips sinn eng aktualiséiert Versioun, déi net op Biller vertrauen, css3 fir Animatiounen benotzen, an Datenattributer fir lokal Titellagerung.

Download Datei

Beispill Benotzung vun Tooltips

Hover iwwer d'Links hei drënner fir Tooltipps ze gesinn:

Knapp Hosen nächste Level keffiyeh Dir hutt wahrscheinlech net vun hinnen héieren. Photo Stand Baart Raw Denim Letterpress Vegan Messenger Bag Stumptown. Farm-to-Table Seitan, Mcsweeney's Fixie nohalteg Quinoa 8-Bit amerikanesch Kleedung hunn e Terry Richardson Vinyl Chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu Biodiesel Williamsburg Marfa, véier Loko Mcsweeney's botzen vegan Chambray. Eng wierklech ironesch Handwierker egal Keytar , scenester Bauerenhaff-ze-Dësch banksy Austin Twitter Handle freegan cred rau Denim Single-Origine Kaffi viral.


Benotzt bootstrap-tooltip.js

Ausléiser den Tooltip iwwer Javascript:

  1. $ ( '#Beispill' ). Tooltip ( Optiounen )

Optiounen

Numm Typ Default Beschreiwung
Animatioun boolesch wouer gëllen eng css Fade Iwwergank op den Tooltip
Placement string|Funktioun 'top' wéi de Tooltip ze positionéieren - Top | ënnen | lénks | riets
selector String falsch Wann e Selektor zur Verfügung gestallt gëtt, ginn Tooltip-Objeten op déi spezifizéiert Ziler delegéiert.
Titel streng | Funktioun '' Standard Titelwäert wann den 'Titel' Tag net präsent ass
ausléisen String 'schwiewen' wéi Tooltip ausgeléist gëtt - hover | konzentréieren | manuell
Retard Zuel | Objet 0

Verzögerung fir den Tooltip (ms) ze weisen an ze verstoppen - gëllt net fir manuell Ausléisertyp

Wann eng Zuel geliwwert gëtt, gëtt Verspéidung fir béid verstoppen / weisen applizéiert

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

Kapp erop! Optiounen fir eenzel Tooltips kënnen alternativ duerch d'Benotzung vun Datenattributer spezifizéiert ginn.

Markup

Aus Leeschtungsgrënn sinn d'Tooltip an d'Popover Data-Apis optéiert. Wann Dir se benotze wëllt, gitt einfach eng Selektiounsoptioun un.

  1. <a href = "#" rel = "tooltip" title = "éischt Tooltip" > hänk iwwer mech </a>

Methoden

$().tooltip(optiounen)

Befestegt e Tooltip-Handler op eng Elementsammlung.

.tooltip('weisen')

Entdeckt den Tooltip vun engem Element.

  1. $ ( '#element' ). tooltip ( 'weisen' )

.tooltip('verstoppen')

Verstoppt den Tooltip vun engem Element.

  1. $ ( '#element' ). tooltip ( 'verstoppen' )

.tooltip('toggle')

Wiesselt den Tooltip vun engem Element.

  1. $ ( '#element' ). tooltip ( 'toggle' )

Iwwer Popovers

Füügt kleng Iwwerlagerunge vum Inhalt, wéi déi um iPad, un all Element fir sekundär Informatioun ze wunnen.

* Verlaangt Tooltip abegraff ze sinn

Download Datei

Beispill Hover Popover

Hover iwwer de Knäppchen fir de Popover auszeléisen.


Benotzt bootstrap-popover.js

Aktivéiert Popovers iwwer Javascript:

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

Optiounen

Numm Typ Default Beschreiwung
Animatioun boolesch wouer gëllen eng css Fade Iwwergank op den Tooltip
Placement string|Funktioun 'riets' wéi de Popover ze positionéieren - Top | ënnen | lénks | riets
selector String falsch wann e selector gëtt, Tooltip Objete ginn un déi spezifizéiert Ziler delegéiert
ausléisen String 'schwiewen' wéi Tooltip ausgeléist gëtt - hover | konzentréieren | manuell
Titel streng | Funktioun '' Standard Titelwäert wann den 'Titel' Attribut net präsent ass
Inhalt streng | Funktioun '' Standardinhaltswäert wann den Attribut "Dateninhalt" net präsent ass
Retard Zuel | Objet 0

Verspéidung weist a verstoppt de Popover (ms) - gëllt net fir manuell Ausléisertyp

Wann eng Zuel geliwwert gëtt, gëtt Verspéidung fir béid verstoppen / weisen applizéiert

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

Kapp erop! Optiounen fir eenzel Popovers kënnen alternativ duerch d'Benotzung vun Datenattributer spezifizéiert ginn.

Markup

Aus Leeschtungsgrënn sinn d'Tooltip an d'Popover Data-Apis optéiert. Wann Dir se benotze wëllt, gitt einfach eng Selektiounsoptioun un.

Methoden

$().popover(optiounen)

Initializes Popovers fir eng Element Kollektioun.

.popover('weisen')

Entdeckt en Elementer Popover.

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

.popover('verstoppen')

Verstoppt eng Elementer Popover.

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

.popover('toggle')

Wiesselt en Element Popover.

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

Iwwer Alarmer

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

Download

Beispill Alarmer

Den Alarm Plugin funktionnéiert op regelméisseg Alarmmeldungen, a blockéiert Messagen.

Hellege guacamole! Beschte kontrolléiert Iech selwer, Dir sicht net ze gutt.

Oh snap! Dir hutt e Feeler!

Ännert dat an dat a probéiert nach eng Kéier. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Huelt dës Aktioun Oder maachen dëst


Benotzt bootstrap-alert.js

Aktivéiert d'Entloossung vun enger Alarm iwwer Javascript:

  1. $ ( ".alert" ). alert ()

Markup

Füügt just data-dismiss="alert"un Äre Zoumaache Knäppchen fir automatesch eng Alarm Zoumaache Funktionalitéit ze ginn.

  1. <a class = "close" data-dismiss = "alarm" href = "#"> & Zäiten; </a>

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.

  1. $ ( ".alert" ). alert ( 'zoumaachen' )

Evenementer

Dem Bootstrap seng Alarmklasse weist e puer Eventer aus fir an d'Alarmfunktionalitéit unzekoppelen.

Event Beschreiwung
zoumaachen Dëst Event brennt direkt wann d' closeInstanzmethod genannt gëtt.
zougemaach Dëst Evenement gëtt ausgeléist wann d'Alarm zougemaach gouf (waart op d'CSS Iwwergäng fir fäerdeg ze sinn).
  1. $ ( '#my-alert' ). binden ( 'zougemaach' , Funktioun () {
  2. // maach eppes…
  3. })

Iwwer

Maacht méi mat Knäppercher. Kontroll Knäppchen Staaten oder Gruppe vu Knäppercher erstellen fir méi Komponenten wéi Toolbaren.

Download Datei

Beispill benotzt

Benotzen d'Knäppercher Plugin fir Staaten an toggles.

Staatlech
Eenzel Këscht
Checkbox
Radio

Benotzt bootstrap-button.js

Aktivéiert Knäppchen iwwer Javascript:

  1. $ ( '.nav-tabs' ). Knäppchen ()

Markup

Donnéeën Attributer sinn integral un de Knäppchen Plugin. Kuckt de Beispillcode hei ënnen fir déi verschidde Markuptypen.

  1. <!-- Füügt data-toggle="Button" derbäi fir den Toggling op engem eenzege Knäppchen ze aktivéieren -->
  2. <button class = "btn" data-toggle = "button" > Single Toggle </button>
  3.  
  4. <!-- Füügt data-toggle="buttons-checkbox" fir d'Checkbox-Stil ze wiesselen op btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Lénks </button>
  7. <button class = "btn" > Mëtt </button>
  8. <button class = "btn" > Richteg </button>
  9. </div>
  10.  
  11. <!-- Füügt data-toggle="buttons-radio" fir de Radiostil ze wiesselen op btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Lénks </button>
  14. <button class = "btn" > Mëtt </button>
  15. <button class = "btn" > Richteg </button>
  16. </div>

Methoden

$().button('toggle')

Wiesselt Push Staat. Gëtt de Knäppchen d'Erscheinung datt et aktivéiert gouf.

Kapp erop! Dir kënnt den automateschen Toggling vun engem Knäppchen aktivéieren andeems Dir den data-toggleAttribut benotzt.
  1. <button class = "btn" data-toggle = "button" > </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.

  1. <button class = "btn" data-loading-text = "Saachen lueden..." > ... </button>
Kapp erop! Firefox behält den behënnerte Staat iwwer d'Säitladungen . Eng Léisung fir dëst ass ze benotzen autocomplete="off".

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

  1. <button class = "btn" data-complete-text = "fäerdeg!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). Knäppchen ( 'komplett' )
  4. </script>

Iwwer

Kritt Basisstiler a flexibel Ënnerstëtzung fir zesummeklappbare Komponenten wéi Akkordeonen a Navigatioun.

Download Datei

* Verlaangt datt den Transitions Plugin abegraff ass.

Beispill Akkordeon

Mat dem Zesummebroch Plugin hu mir en einfachen Akkordeonstil Widget gebaut:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 Wolf Mound Officia Aute, Non Cupidatat Skateboard Dolor Brunch. Food Truck Quinoa nesciunt laborum eiusmod. Brunch 3 Wollef Mound temporär, sunt aliqua e Vugel op et squid Single-Origine Kaffi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan Excepteur Metzler Vice Lomo. Leggings occaecat Handwierksbetrieb Béier Bauerenhaff-zu-Dësch, Matière Denim ästheteschen Synth nesciunt Dir hutt wahrscheinlech net vun hinnen héieren accusamus labore nohalteg VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 Wolf Mound Officia Aute, Non Cupidatat Skateboard Dolor Brunch. Food Truck Quinoa nesciunt laborum eiusmod. Brunch 3 Wollef Mound temporär, sunt aliqua e Vugel op et squid Single-Origine Kaffi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan Excepteur Metzler Vice Lomo. Leggings occaecat Handwierksbetrieb Béier Bauerenhaff-zu-Dësch, Matière Denim ästheteschen Synth nesciunt Dir hutt wahrscheinlech net vun hinnen héieren accusamus labore nohalteg VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 Wolf Mound Officia Aute, Non Cupidatat Skateboard Dolor Brunch. Food Truck Quinoa nesciunt laborum eiusmod. Brunch 3 Wollef Mound temporär, sunt aliqua e Vugel op et squid Single-Origine Kaffi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan Excepteur Metzler Vice Lomo. Leggings occaecat Handwierksbetrieb Béier Bauerenhaff-zu-Dësch, Matière Denim ästheteschen Synth nesciunt Dir hutt wahrscheinlech net vun hinnen héieren accusamus labore nohalteg VHS.

Benotzt bootstrap-collapse.js

Aktivéiert iwwer Javascript:

  1. $ ( ".collapse" ). kollapsen ()

Optiounen

Numm Typ Default Beschreiwung
Elterendeel selector falsch Wann selector dann all zesummeklappbare Elementer ënner dem spezifizéierten Elterendeel zougemaach ginn wann dëst zesummeklappbare Element gewise gëtt. (ähnlech wéi traditionell Akkordeonverhalen)
wiesselen boolesch wouer Wiesselt dat zesummeklappbare Element op Uruff

Markup

Füügt einfach data-toggle="collapse"an en data-targetElement fir automatesch d'Kontroll vun engem zesummeklappbare Element ze zouzeschreiwen. Den data-targetAttribut akzeptéiert e css Selector fir den Zesummebroch anzebezéien. Vergewëssert Iech d'Klass collapsezum zesummeklappbare Element ze addéieren. Wann Dir wëllt datt et als Standard opmaacht, füügt déi zousätzlech Klass in.

  1. <button class = "btn btn-danger" data-toggle = "kollaps" data-target = "#demo" >
  2. einfach zesummeklappbar
  3. </knapp>
  4.  
  5. <div id = "demo" class = "zesummeklappen" > </div>
Kapp erop! Fir Akkordeonähnlech Gruppemanagement zu enger zesummeklappbarer Kontroll ze addéieren, füügt d'Datenattribut data-parent="#selector". Kuckt d'Demo fir dëst an Aktioun ze gesinn.

Methoden

.collapse (Optiounen)

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

  1. $ ( '#myCollapsible' ). Zesummebroch ({
  2. toggle : falsch
  3. })

.collapse('toggle')

Wiesselt en zesummeklappbare Element fir ze weisen oder verstoppt.

.collapse('weisen')

Weist en zesummeklappbare Element.

.collapse('verstoppen')

Verstoppt en zesummeklappbare Element.

Evenementer

Dem Bootstrap seng Zesummebroch Klass weist e puer Eventer fir an d'Zesummefunktionalité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 e Zesummebroch Element 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' hideMethod genannt gouf.
verstoppt Dëst Evenement gëtt ausgeléist wann en Zesummebroch Element vum Benotzer verstoppt ass (waart op d'CSS Iwwergäng fir fäerdeg ze sinn).
  1. $ ( '#myCollapsible' ). op ( 'verstoppt' , Funktioun () {
  2. // maach eppes…
  3. })

Iwwer

E Basis, liicht erweiderten Plugin fir séier elegant Schreifweis mat all Form Textinput ze kreéieren.

Download Datei

Beispill

Fänkt un am Feld hei drënner ze tippen fir d'Typahead Resultater ze weisen.


Benotzt bootstrap-typeahead.js

Rufft den Typahead iwwer Javascript un:

  1. $ ( '.typeahead' ). typeahead ()

Optiounen

Numm Typ Default Beschreiwung
Quell Array [ ] D'Datenquell fir ze froen géint.
Artikelen Zuel 8 Déi maximal Unzuel vun Elementer fir am Dropdown-Menü ze weisen.
matcher Funktioun Fall sensibel D'Method déi benotzt gëtt fir ze bestëmmen ob eng Ufro mat engem Artikel entsprécht. Akzeptéiert een eenzegt Argument, itemgéint deen d'Ufro getest gëtt. Zougrëff op déi aktuell Ufro mat this.query. Gitt e Boolean zréck truewann d'Ufro e Match ass.
sorter Funktioun genee Match,
Fall sensibel,
Fall onsensibel
Method benotzt fir Autocomplete Resultater ze sortéieren. Akzeptéiert en eenzegt Argument itemsan huet den Ëmfang vun der Typeahead Instanz. Referenzéiert déi aktuell Ufro mat this.query.
highlighter Funktioun Héichpunkter all Default Matcher Methode benotzt fir Autocomplete Resultater ze markéieren. Akzeptéiert en eenzegt Argument iteman huet den Ëmfang vun der Typeahead Instanz. Sollt HTML zréckginn.

Markup

Füügt Donnéeën Attributer fir en Element mat Typeahead Funktionalitéit ze registréieren.

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

Methoden

.typeahead(Optiounen)

Initialiséiert en Input mat engem Typahead.