Javascript foar Bootstrap

Bring de komponinten fan Bootstrap ta libben - no mei 12 oanpaste jQuery - plugins.

Modals

In streamlined, mar fleksibel, nimt it tradisjonele javascript modale plugin oan mei allinich de minimale fereaske funksjonaliteit en tûke standerts.

Dropdowns

Foegje dropdown-menu's ta oan hast alles yn Bootstrap mei dizze ienfâldige plugin. Bootstrap hat folsleine útklapmenu-stipe yn 'e navigaasjebalke, ljeppers en pillen.

Scrollspy

Brûk scrollspy om de keppelings yn jo navigaasjebalke automatysk by te aktualisearjen om de aktive keppeling te sjen op basis fan rôlposysje.

Wizigje ljeppers

Brûk dizze plugin om ljeppers en pillen brûkber te meitsjen troch se te tastean om te wikseljen troch ljepblêden fan lokale ynhâld.

Tooltips

In nije take op it jQuery Tipsy-plugin, Tooltips fertrouwe net op ôfbyldings - se brûke CSS3 foar animaasjes en data-attributen foar lokale titelopslach.

Popovers *

Foegje lytse overlays fan ynhâld ta, lykas dy op 'e iPad, oan elk elemint foar húsfesting fan sekundêre ynformaasje.

* Fereasket dat Tooltips wurde opnommen

Alert berjochten

De warskôgingsplugin is in lytse klasse foar it tafoegjen fan nauwe funksjonaliteit oan warskôgings.

Knoppen

Doch mear mei knoppen. Kontrolearje knop steaten of meitsje groepen fan knoppen foar mear komponinten lykas arkbalken.

Ynsakje

Krij basisstilen en fleksibele stipe foar ynklapbere komponinten lykas akkordeons en navigaasje.

Carousel

Meitsje in merry-go-round fan elke ynhâld dy't jo in ynteraktive diashow mei ynhâld wolle leverje.

Typeahead

In basis, maklik útwreide plugin foar it fluch meitsjen fan elegante typeaheads mei elke foarm fan tekstynfier.

Transysjes *

Foar ienfâldige oergongseffekten, befetsje bootstrap-transition.js ien kear om yn modalen te gliden of warskôgings út te ferdylgjen.

* Fereaske foar animaasje yn plugins

Heads up! Alle javascript-plugins fereaskje de lêste ferzje fan jQuery.

Oer modals

In streamlined, mar fleksibel, nimt it tradisjonele javascript modale plugin oan mei allinich de minimale fereaske funksjonaliteit en tûke standerts.

Download triem

Statyske foarbyld

Hjirûnder is in statysk werjûn modal.

Live demo

Skeakelje in modaal fia javascript troch op de knop hjirûnder te klikken. It sil nei ûnderen glide en ferdwine fan 'e boppekant fan' e side.

Start demo modal

Mei help fan bootstrap-modal

Rop de modal fia javascript:

  1. $ ( '#myModal' ). modaal ( opsjes )

Opsjes

Namme type standert beskriuwing
eftergrûn boolean wier Omfettet in modale eftergrûnelemint. As alternatyf, spesifisearje staticfoar in eftergrûn dy't de modaal net slút by klik.
toetseboerd boolean wier Slút de modale as escape-toets wurdt yndrukt
sjen litte boolean wier Toant de modal as inisjalisearre.

Markup

Jo kinne modalen op jo side maklik aktivearje sûnder in inkele rigel fan javascript te skriuwen. Gewoan ynstelle data-toggle="modal"op in controller elemint mei in data-target="#foo"of href="#foo"dy't oerienkomt mei in modale elemint id, en as jo klikke, dan sil starte jo modal.

Ek, om opsjes ta te foegjen oan jo modale eksimplaar, befetsje se gewoan as ekstra gegevensattributen op it kontrôleelemint of de modale markup sels.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Launch Modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "slute" data-dismiss = "modaal" > × </button>
  4. <h3> Modale koptekst </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Ien moai lichem... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modaal" > Slute </a>
  11. <a href = "#" class = "btn btn-primary" > Bewarje wizigingen </a>
  12. </div>
  13. </div>
Heads up! As jo ​​​​wolle dat jo modal yn en út animearret, foegje dan gewoan in .fadeklasse ta oan it .modalelemint (ferwize nei de demo om dit yn aksje te sjen) en befetsje bootstrap-transition.js.

Metoaden

.modal(opsjes)

Aktivearret jo ynhâld as modaal. Akseptearret in opsjonele opsjes object.

  1. $ ( '#myModal' ). modal ({
  2. toetseboerd : falsk
  3. })

.modal('toggle')

Wizigje manuell in modaal.

  1. $ ( '#myModal' ). modaal ( 'wikselje' )

.modal('show')

Iepenet in modaal mei de hân.

  1. $ ( '#myModal' ). modaal ( 'show' )

.modal('ferbergje')

Ferberget in modaal mei de hân.

  1. $ ( '#myModal' ). modaal ( 'ferbergje' )

Eveneminten

De modale klasse fan Bootstrap bleatsteld in pear eveneminten foar heakjen oan modale funksjonaliteit.

Barren Beskriuwing
sjen litte Dit evenemint fjoer fuortendaliks as de showeksimplaar metoade wurdt oanroppen.
sjen litten Dit evenemint wurdt ûntslein as de modal sichtber makke is foar de brûker (sil wachtsje op css-oergongen om te foltôgjen).
ferstopje Dit barren wurdt fuortendaliks ûntslein as de hideeksimplaarmetoade oanroppen is.
ferburgen Dit barren wurdt ûntslein as de modal klear is ferburgen foar de brûker (sil wachtsje op css-oergongen om te foltôgjen).
  1. $ ( '#myModal' ). on ( 'ferburgen' , funksje () {
  2. // wat dwaan…
  3. })

De ScrollSpy-plugin is foar it automatysk bywurkjen fan nav-doelen basearre op scrollposysje.

Download triem

Foarbyld navbar mei scrollspy

Rôlje troch it gebiet hjirûnder en besjoch de navigaasje-update. De dellûk-subitems sille ek markearre wurde. Besykje it!

@fet

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi foardat se útferkocht qui. Tumblr pleats-tot-tafel fyts rjochten wat dan ek. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui jo hawwe wierskynlik net heard fan harren en cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa snor skateboard, adipisicing fugiat velit pitchfork baard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat fjouwer 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 estetyske oefening quis gentrify. Brooklyn adipisicing craft bier vice keytar deserunt.

ien

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger tas. Cred ex in, duorsume delectus consectetur fanny pack iphone.

twa

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 whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats jo nei alle gedachten hawwe net heard fan harren consequat hoodie glutenfrije lo-fi fap aliquip. Labore elit placeat foardat se útferkocht binne, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft bier seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Mei help fan bootstrap-scrollspy.js

Skilje de scrollspy fia javascript:

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

Markup

Om maklik scrollspy-gedrach ta te foegjen oan jo topbalke-navigaasje, foegje gewoan ta data-spy="scroll"oan it elemint wêrop jo wolle bispiede (meast typysk soe dit it lichem wêze).

  1. <body data-spy = "scroll" > ... </body>
Heads up! Navbar-keppelings moatte oplossbere id-doelen hawwe. Bygelyks, in <a href="#home">home</a>moat oerienkomme mei wat yn 'e dom lykas <div id="home"></div>.

Metoaden

.scrollspy('ferfarskje')

By it brûken fan scrollspy yn kombinaasje mei it tafoegjen of ferwiderjen fan eleminten út 'e DOM, moatte jo de ferfarskingsmetoade sa neame:

  1. $ ( '[data-spy="scroll"]' ). each ( funksje () {
  2. var $spy = $ ( dizze ). scrollspy ( 'ferfarskje' )
  3. });

Opsjes

Namme type standert beskriuwing
offset nûmer 10 Pixels om fan boppen ôf te kompensearjen by it berekkenjen fan posysje fan scroll.

Eveneminten

Barren Beskriuwing
aktivearje Dit evenemint ûntspringt as in nij item wurdt aktivearre troch de scrollspy.

Dit plugin foeget rappe, dynamyske ljepper- en pilfunksjonaliteit ta foar oergong troch lokale ynhâld.

Download triem

Foarbyld ljeppers

Klikje op de ljeppers hjirûnder om te wikseljen tusken ferburgen ruten, sels fia dellûkmenu's.

Raw denim jo nei alle gedachten hawwe net heard fan harren jeans shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Moustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip plak foar salvia cillum iphone. Seitan aliquip quis cardigan american apparel, slachter 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.


Mei help fan bootstrap-tab.js

Ljepblêden ynskeakelje fia javascript (elke ljepper moat yndividueel aktivearre wurde):

  1. $ ( '#myTab a' ). klik ( funksje ( e ) {
  2. e . foarkommeDefault ();
  3. $ ( dizze ). tab ( 'show' );
  4. })

Jo kinne yndividuele ljeppers op ferskate manieren aktivearje:

  1. $ ( '#myTab a[href="#profyl"]' ). tab ( 'show' ); // Selektearje ljepper by namme
  2. $ ( '#myTab a:first' ). tab ( 'show' ); // Selektearje earste ljepper
  3. $ ( '#myTab a:last' ). tab ( 'show' ); // Selektearje lêste ljepper
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'show' ); // Selektearje tredde ljepper (0-yndeksearre)

Markup

Jo kinne in ljepper of pilnavigaasje aktivearje sûnder javascript te skriuwen troch gewoan op te jaan data-toggle="tab"of data-toggle="pill"op in elemint. It tafoegjen fan de naven nav-tabsklassen oan it ljepblêd ulsil de styling fan 'e bootstrap-ljepper tapasse.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Thús </a></li>
  3. <li><a href = "#profile" data-toggle = "tab"> Profyl </a> </li>
  4. <li><a href = "#messages" data-toggle = "tab"> Berjochten </a> </li>
  5. <li><a href = "#settings" data-toggle = "tab"> Ynstellings </a> </li>
  6. </ul>

Metoaden

$().tab

Aktivearret in ljepper elemint en ynhâld container. De ljepper moat in data-targetof in hrefrjochte op in kontenerknooppunt hawwe yn 'e DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "aktyf" ><a href = "#home"> Thús </a> </li>
  3. <li><a href = "#profile" > Profyl </a></li>
  4. <li><a href = "#messages" > Berjochten </a></li>
  5. <li><a href = "#settings" > Ynstellings </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-ynhâld" >
  9. <div class = "tab-pane active" id = "thús" > ... </div>
  10. <div class = "tab-pane" id = "profyl" > ... </div>
  11. <div class = "tab-pane" id = "berjochten" > ... </div>
  12. <div class = "tab-pane" id = "ynstellings" > ... </div>
  13. </div>
  14.  
  15. <skript>
  16. $ ( funksje () {
  17. $ ( '#myTab a:last' ). tab ( 'show' );
  18. })
  19. </skript>

Eveneminten

Barren Beskriuwing
sjen litte Dit evenemint ûntspringt op ljeppershow, mar foardat de nije ljepper is werjûn. Brûk event.targeten event.relatedTargetom respektivelik de aktive ljepper en de foarige aktive ljepper (as beskikber) te rjochtsjen.
sjen litten Dit evenemint ûntspringt op ljepper sjen nei in ljepper is werjûn. Brûk event.targeten event.relatedTargetom respektivelik de aktive ljepper en de foarige aktive ljepper (as beskikber) te rjochtsjen.
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'sjoen' , funksje ( e ) {
  2. e . target // aktivearre ljepper
  3. e . relatedTarget // foarige ljepper
  4. })

Oer Tooltips

Ynspirearre troch de treflike jQuery.tipsy plugin skreaun troch Jason Frame; Tooltips binne in bywurke ferzje, dy't net fertrouwe op ôfbyldings, css3 brûke foar animaasjes, en data-attributen foar lokale titelopslach.

Download triem

Foarbyld gebrûk fan Tooltips

Hoverje oer de keppelings hjirûnder om tooltips te sjen:

Strakke broek folgjende nivo keffiyeh jo hawwe wierskynlik net heard fan harren. Photo booth baard rau denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie duorsume quinoa 8-bit Amerikaanske klean hawwe in terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, fjouwer loko mcsweeney's reinigje vegan chambray. In echt iroanysk ambachtsman wat keytar , scenester farm-to-table banksy Austin twitter handle freegan cred rauwe denim single-origin kofje virale.


Mei help fan bootstrap-tooltip.js

Trigger de tooltip fia javascript:

  1. $ ( '#foarbyld' ). tooltip ( opsjes )

Opsjes

Namme type standert beskriuwing
animaasje boolean wier tapasse in css-fade-oergong op de tooltip
pleatsing string|funksje 'top' hoe te pleatsen de tooltip - top | ûnderen | lofts | rjochts
selector string falsk As in selector wurdt foarsjoen, sil tooltip objekten wurde delegearre oan de oantsjutte doelen.
titel string | funksje '' standert titelwearde as 'title' tag net oanwêzich is
trekker string 'sweve' hoe't tooltip wurdt aktivearre - hover | fokus | hantlieding
fertraging nûmer | objekt 0

fertraging sjen en ferbergjen fan de tooltip (ms) - jildt net foar hânmjittich triggertype

As in nûmer wurdt levere, wurdt fertraging tapast op sawol hide / show

Objektstruktuer is:delay: { show: 500, hide: 100 }

Heads up! Opsjes foar yndividuele tooltips kinne alternatyf wurde oantsjutte troch it brûken fan gegevensattributen.

Markup

Om prestaasjesredenen binne de Tooltip en Popover data-apis oanmelden. As jo ​​se brûke wolle, spesifisearje gewoan in selektoropsje.

  1. <a href = "#" rel = "tooltip" title = "earste tooltip" > hâld de mûs oer my </a>

Metoaden

$().tooltip(opsjes)

Hechtet in tooltip handler oan in elemint kolleksje.

.tooltip('show')

Iepenet de tooltip fan in elemint.

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

.tooltip('ferbergje')

Ferberget de tooltip fan in elemint.

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

.tooltip('toggle')

Skeakelt de tooltip fan in elemint.

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

Oer popovers

Foegje lytse overlays fan ynhâld ta, lykas dy op 'e iPad, oan elk elemint foar húsfesting fan sekundêre ynformaasje.

* Fereasket Tooltip om te wêzen opnommen

Download triem

Foarbyld hover popover

Hoverje oer de knop om de popover te aktivearjen.


Mei help fan bootstrap-popover.js

Popovers ynskeakelje fia javascript:

  1. $ ( '#foarbyld' ). popover ( opsjes )

Opsjes

Namme type standert beskriuwing
animaasje boolean wier tapasse in css-fade-oergong op de tooltip
pleatsing string|funksje 'rjochts' hoe te pleatsen de popover - top | ûnderen | lofts | rjochts
selector string falsk as in selector wurdt foarsjoen, sil tooltip foarwerpen wurde delegearre oan de oantsjutte doelen
trekker string 'sweve' hoe't tooltip wurdt aktivearre - hover | fokus | hantlieding
titel string | funksje '' standert titelwearde as `title`-attribút net oanwêzich is
ynhâld string | funksje '' standert ynhâldwearde as it attribút `data-content` net oanwêzich is
fertraging nûmer | objekt 0

fertraging sjen en ferbergjen fan de popover (ms) - jildt net foar hânmjittich trigger type

As in nûmer wurdt levere, wurdt fertraging tapast op sawol hide / show

Objektstruktuer is:delay: { show: 500, hide: 100 }

Heads up! Opsjes foar yndividuele popovers kinne alternatyf wurde oantsjutte troch it brûken fan gegevensattributen.

Markup

Om prestaasjesredenen binne de Tooltip en Popover data-apis oanmelden. As jo ​​se brûke wolle, spesifisearje gewoan in selektoropsje.

Metoaden

$().popover(opsjes)

Inisjalisearje popovers foar in elemint kolleksje.

.popover('show')

Bliuwt in popover fan eleminten.

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

.popover('ferbergje')

Ferberget in eleminten popover.

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

.popover('toggle')

Skeakelt in popover fan eleminten.

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

Oer warskôgings

De warskôgingsplugin is in lytse klasse foar it tafoegjen fan nauwe funksjonaliteit oan warskôgings.

Download

Foarbyld alerts

De warskôgingsplugin wurket op reguliere warskôgingsberjochten, en blokkearje berjochten.

Hillige guacamole! Best kontrolearje jo sels, jo sjogge net te goed.

Oh snap! Jo hawwe in flater!

Feroarje dit en dat en besykje it nochris. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Nim dizze aksje Of doch dit


Mei help fan bootstrap-alert.js

Skeakelje it ûntslach fan in warskôging yn fia javascript:

  1. $ ( ".alert" ). warskôgje ()

Markup

Foegje gewoan ta data-dismiss="alert"oan jo slute knop om automatysk in warskôging slute funksjonaliteit te jaan.

  1. <a class = "close" data-dismiss = "alert" href = "#"> & times; </a>

Metoaden

$().alert()

Wraps alle warskôgings mei nauwe funksjonaliteit. Om jo warskôgings te animearjen as se sluten binne, soargje derfoar dat se de .fadeen .inklasse al op har tapast hawwe.

.alert('slute')

Slút in warskôging.

  1. $ ( ".alert" ). warskôging ( 'slute' )

Eveneminten

Bootstrap's warskôgingsklasse bleatstelt in pear eveneminten foar heakjen oan warskôgingsfunksjonaliteit.

Barren Beskriuwing
slute Dit evenemint fjoer fuortendaliks as de closeeksimplaar metoade wurdt oanroppen.
sletten Dit evenemint wurdt ûntslein as de warskôging is sletten (sil wachtsje op css-oergongen om te foltôgjen).
  1. $ ( '#myn-alert' ). binde ( 'sletten' , funksje () {
  2. // wat dwaan…
  3. })

Oer

Doch mear mei knoppen. Kontrolearje knop steaten of meitsje groepen fan knoppen foar mear komponinten lykas arkbalken.

Download triem

Foarbyld gebrûk

Brûk de knop-plugin foar steaten en skeakels.

Stateful
Single skeakel
Checkbox
Radio

Mei help fan bootstrap-button.js

Knoppen ynskeakelje fia javascript:

  1. $ ( '.nav-tabs' ). knop ()

Markup

Gegevensattributen binne yntegraal mei de knop-plugin. Besjoch de foarbyldkoade hjirûnder foar de ferskate markuptypen.

  1. <!-- Foegje data-toggle="knop" ta om wikseljen op ien knop te aktivearjen -->
  2. <button class = "btn" data-toggle = "button" > Single Toggle </button>
  3.  
  4. <!-- Foegje data-toggle="buttons-checkbox" ta foar it wikseljen fan karfakjestyl op btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Lofts </button>
  7. <button class = "btn" > Middel </button>
  8. <button class = "btn" > Rjochts </button>
  9. </div>
  10.  
  11. <!-- Foegje data-toggle="buttons-radio" ta foar it wikseljen fan radiostyl op btn-group -->
  12. <div class = "btn-group" data-toggle = "knoppen-radio" >
  13. <button class = "btn" > Lofts </button>
  14. <button class = "btn" > Middel </button>
  15. <button class = "btn" > Rjochts </button>
  16. </div>

Metoaden

$().button('toggle')

Wizigje push-status. Jout de knop it uterlik dat it is aktivearre.

Heads up! Jo kinne automatysk wikseljen fan in knop ynskeakelje troch it data-toggleattribút te brûken.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('laden')

Stelt knopstatus yn op laden - skeakelet knop út en wikselet tekst om tekst te laden. It laden fan tekst moat definieare wurde op it knopelemint mei it data-attribút data-loading-text.

  1. <button class = "btn" data-loading-text = "laden dingen..." > ... </button>
Heads up! Firefox behâldt de útskeakele steat oer sideladen . In oplossing foar dit is te brûken autocomplete="off".

$().button('reset')

Reset knopstatus - wikselt tekst nei orizjinele tekst.

$().button(string)

Reset knop tastân - wikselt tekst nei alle gegevens definiearre tekst steat.

  1. <button class = "btn" data-complete-text = "klear!" > ... </knop>
  2. <skript>
  3. $ ( '.btn' ). knop ( 'folslein' )
  4. </skript>

Oer

Krij basisstilen en fleksibele stipe foar ynklapbere komponinten lykas akkordeons en navigaasje.

Download triem

* Fereasket dat de Transitions-plugin wurdt opnommen.

Foarbyld fan akkordeon

Mei it ynstoarten plugin hawwe wy in ienfâldige widget foar akkordeonstyl boud:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sette in fûgel op it inktvis single-origin kofje nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat ambachtlike bier pleats-tot-tafel, rau denim estetyske synth nesciunt jo nei alle gedachten hawwe net heard fan harren accusamus labore duorsume VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sette in fûgel op it inktvis single-origin kofje nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat ambachtlike bier pleats-tot-tafel, rau denim estetyske synth nesciunt jo nei alle gedachten hawwe net heard fan harren accusamus labore duorsume VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sette in fûgel op it inktvis single-origin kofje nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat ambachtlike bier pleats-tot-tafel, rau denim estetyske synth nesciunt jo nei alle gedachten hawwe net heard fan harren accusamus labore duorsume VHS.

Mei help fan bootstrap-collapse.js

Ynskeakelje fia javascript:

  1. $ ( ".kollapse" ). ynstoarten ()

Opsjes

Namme type standert beskriuwing
âlder selector falsk As selector dan alle ynklapbere eleminten ûnder de oantsjutte âlder wurde sletten as dit ynklapbere item wurdt werjûn. (fergelykber mei tradisjoneel akkordeongedrach)
wikselje boolean wier Skeakelt it ynklapbere elemint by oprop

Markup

Foegje gewoan data-toggle="collapse"en in data-targetoan elemint ta om automatysk kontrôle fan in ynklapber elemint ta te jaan. It data-targetattribút akseptearret in css-selektor om de ynstoarting oan te passen. Wês wis dat jo de klasse tafoegje collapseoan it ynklapbere elemint. As jo ​​​​wolle dat it standert iepen is, foegje dan de ekstra klasse ta in.

  1. <button class = "btn btn-danger" data-toggle = "ynstoarten" data-target = "#demo" >
  2. ienfâldich ynklapber
  3. </knop>
  4.  
  5. <div id = "demo" class = "ynstoarten" > </div>
Heads up! Om akkordeon-like groepbehear ta te foegjen oan in ynklapbere kontrôle, foegje it data-attribút ta data-parent="#selector". Ferwize nei de demo om dit yn aksje te sjen.

Metoaden

.collapse(opsjes)

Aktivearret jo ynhâld as in ynklapber elemint. Akseptearret in opsjonele opsjes object.

  1. $ ( '#myCollapsible' ). ynstoarten ({
  2. wikselje : falsk
  3. })

.collapse('toggle')

Skeakelt in ynklapber elemint nei werjûn of ferburgen.

.collapse('show')

Toant in ynklapber elemint.

.collapse('ferbergje')

Ferberget in ynklapber elemint.

Eveneminten

De ynstoartingsklasse fan Bootstrap bleatstelt in pear eveneminten foar heakjen oan ynstoartingsfunksjonaliteit.

Barren Beskriuwing
sjen litte Dit evenemint fjoer fuortendaliks as de showeksimplaar metoade wurdt oanroppen.
sjen litten Dit barren wurdt ûntslein as in ynstoartelemint sichtber makke is foar de brûker (sil wachtsje op css-oergongen om te foltôgjen).
ferstopje Dit evenemint wurdt ûntslein fuortendaliks as de hidemetoade is oanroppen.
ferburgen Dit barren wurdt ûntslein as in ynstoartelemint is ferburgen foar de brûker (sil wachtsje op css-oergongen om te foltôgjen).
  1. $ ( '#myCollapsible' ). on ( 'ferburgen' , funksje () {
  2. // wat dwaan…
  3. })

Oer

In basis, maklik útwreide plugin foar it fluch meitsjen fan elegante typeaheads mei elke foarm fan tekstynfier.

Download triem

Foarbyld

Begjin te typen yn it fjild hjirûnder om de typeahead-resultaten te sjen.


Mei help fan bootstrap-typeahead.js

Rop de typeahead fia javascript:

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

Opsjes

Namme type standert beskriuwing
boarne array [ ] De gegevensboarne om tsjin te freegjen.
items nûmer 8 It maksimum oantal items om te werjaan yn it útklapmenu.
matcher funksje case insensitive De metoade brûkt om te bepalen oft in query oerienkomt mei in item. Akseptearret in inkeld argumint, it itemtsjin hokker de query te testen. Tagong ta de aktuele query mei this.query. Jou in boolean werom trueas query in oerienkomst is.
sorter funksje eksakte oerienkomst,
case sensitive,
case insensitive
Metoade brûkt om resultaten fan autofolje te sortearjen. Akseptearret ien argumint itemsen hat de omfang fan 'e typeahead-eksimplaar. Ferwize de aktuele fraach mei this.query.
highlighter funksje markearret alle standert wedstriden Metoade brûkt om resultaten fan autofolje te markearjen. Akseptearret ien argumint itemen hat de omfang fan 'e typeahead-eksimplaar. Moat weromkomme html.

Markup

Foegje gegevensattributen ta om in elemint te registrearjen mei typeahead-funksjonaliteit.

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

Metoaden

.typeahead(opsjes)

Inisjalisearret in ynfier mei in typeahead.