Javascript por Bootstrap

Vivu la komponantojn de Bootstrap—nun kun 12 kutimaj jQuery - kromaĵoj.

Modaloj

Simpligita, sed fleksebla, alprenu la tradician Javaskripto modalan kromaĵon kun nur la minimuma postulata funkcieco kaj inteligentaj defaŭltoj.

Dropdowns

Aldonu falmenuojn al preskaŭ io ajn en Bootstrap per ĉi tiu simpla kromaĵo. Bootstrap havas plenan falmenuan subtenon en la navbaro, langetoj kaj piloloj.

Scrollspy

Uzu scrollspy por aŭtomate ĝisdatigi la ligilojn en via navbar por montri la nunan aktivan ligon bazitan sur rulpozicio.

Ŝaltigeblaj langetoj

Uzu ĉi tiun kromaĵon por fari langetojn kaj pilolojn pli utilaj, permesante al ili ŝanĝi tra tabeleblaj fenestroj de loka enhavo.

Konsiletoj

Nova preno de la kromaĵo jQuery Tipsy, Konsiletoj ne dependas de bildoj—ili uzas CSS3 por kuraĝigoj kaj datumoj-atributoj por loka titola konservado.

Popovers *

Aldonu malgrandajn tegaĵojn de enhavo, kiel tiuj sur la iPad, al iu ajn elemento por loĝigi malĉefajn informojn.

* Necesas inkludi konsiletojn

Atentigaj mesaĝoj

La atentiga kromaĵo estas eta klaso por aldoni proksimajn funkciojn al atentigoj.

Butonoj

Faru pli per butonoj. Kontrolu butonajn ŝtatojn aŭ kreu grupojn de butonoj por pli da komponantoj kiel ilobretoj.

Kolapso

Akiru bazajn stilojn kaj flekseblan subtenon por faldeblaj komponantoj kiel akordionoj kaj navigado.

Karuselo

Kreu karuselon de ajna enhavo, kiun vi volas provizi interagan bildaron de enhavo.

Tajpu antaŭen

Baza, facile etendita kromaĵo por rapide krei elegantajn tajpaĵojn kun ajna formo de teksto-enigo.

Transiroj *

Por simplaj transiraj efikoj, inkludu bootstrap-transition.js unufoje por gliti en modalojn aŭ forvelki atentigojn.

* Bezonata por animacio en kromaĵojn

Atentu! Ĉiuj Javaskripto-kromaĵoj postulas la plej novan version de jQuery.

Pri modaloj

Simpligita, sed fleksebla, alprenu la tradician Javaskripto modalan kromaĵon kun nur la minimuma postulata funkcieco kaj inteligentaj defaŭltoj.

Elŝutu dosieron

Statika ekzemplo

Malsupre estas statike farita modalo.

Viva demonstraĵo

Ŝaltu modalon per Javaskripto alklakante la suban butonon. Ĝi glitos malsupren kaj velkos de la supro de la paĝo.

Lanĉi demo modalon

Uzante bootstrap-modal

Voku la modalon per Javaskripto:

  1. $ ( '#miaModalo' ). modalo ( opcioj )

Opcioj

Nomo tajpu defaŭlte Priskribo
fono bulea vera Inkluzivas modalan fonan elementon. Alternative, specifu staticpor fono, kiu ne fermas la modalon alklakante.
klavaro bulea vera Fermas la modalon kiam eskapa klavo estas premata
montri bulea vera Montras la modalon kiam pravalorigita.

Markado

Vi povas facile aktivigi modalojn en via paĝo sen devi skribi ununuran linion de Javaskripto. Nur agordu data-toggle="modal"sur regila elemento kun data-target="#foo"href="#foo"kiu respondas al modala elemento id, kaj kiam oni klakas, ĝi lanĉos vian modalon.

Ankaŭ, por aldoni opciojn al via modala petskribo, simple inkluzivu ilin kiel aldonajn datumajn atributojn aŭ sur la kontrolelemento aŭ sur la modala markado mem.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Lanĉi Modalon </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modala-kapo" >
  3. <button type = "button" class = "fermi" data-dismiss = "modala" > × </button>
  4. <h3> Modala kaplinio </h3>
  5. </div>
  6. <div class = "modala korpo" >
  7. <p> Unu bela korpo... </p>
  8. </div>
  9. <div class = "modala-piedo" >
  10. <a href = "#" class = "btn" data-dismiss = "modala" > Fermi </a>
  11. <a href = "#" class = "btn btn-primary" > Konservi ŝanĝojn </a>
  12. </div>
  13. </div>
Atentu! Se vi volas, ke via modalo animu en kaj eksteren, simple aldonu .fadeklason al la .modalelemento (referu al la demo por vidi ĉi tion en ago) kaj inkludu bootstrap-transition.js.

Metodoj

.modal(opcioj)

Aktivigas vian enhavon kiel modalon. Akceptas laŭvolajn opciojn object.

  1. $ ( '#miaModalo' ). modalo ({
  2. klavaro : falsa
  3. })

.modal('ŝanĝu')

Mane ŝanĝas modalon.

  1. $ ( '#miaModalo' ). modala ( 'ŝalti' )

.modal('montri')

Mane malfermas modalon.

  1. $ ( '#miaModalo' ). modalo ( 'montri' )

.modal('kaŝi')

Mane kaŝas modalon.

  1. $ ( '#miaModalo' ). modalo ( 'kaŝi' )

Eventoj

La modala klaso de Bootstrap elmontras kelkajn eventojn por hoki al modala funkcieco.

Evento Priskribo
montri Ĉi tiu evento tuj ekfunkciigas kiam la showekzempla metodo estas vokita.
montrata Ĉi tiu evento estas lanĉita kiam la modalo fariĝis videbla por la uzanto (atendos ke css-transiroj finiĝos).
kaŝi Ĉi tiu evento estas lanĉita tuj kiam la hideekzempla metodo estas vokita.
kaŝita Ĉi tiu evento estas lanĉita kiam la modalo finiĝis kaŝita de la uzanto (atendos ke css-transiroj finiĝos).
  1. $ ( '#miaModalo' ). on ( 'kaŝita' , funkcio () {
  2. // fari ion…
  3. })

La ScrollSpy kromaĵo estas por aŭtomate ĝisdatigi nav-celojn surbaze de rulpozicio.

Elŝutu dosieron

Ekzemplo navbar kun scrollspy

Rulumu la suban areon kaj spektu la navigacian ĝisdatigon. La submenuaj suberoj ankaŭ estos reliefigitaj. Provu ĝin!

@graso

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi antaŭ ol ili elĉerpiĝis qui. Tumblr-bieno-al-tablo-rajtoj de biciklo. Anim keffiyeh carles cardigan. La fotobudo de Velit seitan mcsweeney 3 lupo luno irure. Cosby svetero lomo jean shorts, williamsburg hoodie minimum qui vi verŝajne ne aŭdis pri ili et cardigan trust fund kulpa biodiesel wes anderson estetiko. Nihil tatuita akuzamus, kredi ironio biodiesel keffiyeh metiisto ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork barbo. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tatuita cosby svetero manĝkamiono, mcsweeney's quis non freegan vinilo. Lo-fi wes anderson +1 vestaĵo. Carles ne estetika ekzercado quis gentrify. Brooklyn adipisicing metia biero vice keytar deserunt.

unu

Occaecat commodo aliqua delectus. Fap metia biero deserunt rultabulo ea. Lomo biciklorajtoj adipisicing banh mi, velit ea sunt next level locavore unu-devena kafo en magna veniam. High life id vinilo, echo park consequat quis aliquip banh mi pitchfork. Vero VHS estas adipisicing. Consectetur nisi DIY minimum mesaĝa sako. Kredi eks in, daŭrigebla delectus consectetur fanny pack iphone.

du

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 blogo, kulpa mesaĝista sako marfa whatever delectus manĝkamiono. Sapiente synth id assumenda. Locavore sed helvetica kliŝo ironio, thundercats vi verŝajne ne aŭdis pri ili consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica metiisto. Cardigan metia biero seitan preta velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Uzante bootstrap-scrollspy.js

Voku la scrollspy per Javaskripto:

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

Markado

Por facile aldoni scrollspy-konduton al via supra navigado, simple aldonu data-spy="scroll"al la elemento, kiun vi volas spioni (plej kutime ĉi tio estus la korpo).

  1. <body data-spy = "scroll" > ... </body>
Atentu! Navbar-ligiloj devas havi solveblajn id-celojn. Ekzemple, <a href="#home">home</a>devas respondi al io en la dom kiel <div id="home"></div>.

Metodoj

.scrollspy('refreŝigi')

Kiam vi uzas scrollspy kune kun aldono aŭ forigo de elementoj de la DOM, vi devos nomi la refreŝigan metodon tiel:

  1. $ ( '[data-spy="scroll"]' ). ĉiu ( funkcio () {
  2. var $spiono = $ ( ĉi ). scrollspy ( 'refreŝigi' )
  3. });

Opcioj

Nomo tajpu defaŭlte Priskribo
ofseto nombro 10 Pikseloj por kompensi de supro dum kalkulado de pozicio de rullibro.

Eventoj

Evento Priskribo
aktivigi Ĉi tiu evento pafas kiam ajn nova objekto estas aktivigita de la scrollspy.

Ĉi tiu kromaĵo aldonas rapidan, dinamikan langeton kaj pilolfunkcion por transiri tra loka enhavo.

Elŝutu dosieron

Ekzemplaj langetoj

Alklaku la langetojn sube por ŝanĝi inter kaŝitaj fenestroj, eĉ per falmenuoj.

Kruda denim vi verŝajne ne aŭdis pri ili jean shorts Austin. Nesciunt tofu stumptown aliqua, retro sintezila majstro purigi. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby svetero eu banh mi, qui irure terry richardson eks kalmaro. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan amerika vesto, butcher 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.


Uzante bootstrap-tab.js

Ebligu tabulajn langetojn per Javaskripto (ĉiu langeto devas esti aktivigita individue):

  1. $ ( '#miaTab a' ). klaku ( funkcio ( e ) {
  2. e . preventDefault ();
  3. $ ( ĉi ). langeto ( 'montri' );
  4. })

Vi povas aktivigi individuajn langetojn en pluraj manieroj:

  1. $ ( '#miaTab a[href="#profilo"]' ). langeto ( 'montri' ); // Elektu langeton laŭ nomo
  2. $ ( '#miaTab a:unue' ). langeto ( 'montri' ); // Elektu la unuan langeton
  3. $ ( '#miaTab a:last' ). langeto ( 'montri' ); // Elektu lastan langeton
  4. $ ( '#miaTab li:eq(2) a' ). langeto ( 'montri' ); // Elektu trian langeton (0-indeksitan)

Markado

Vi povas aktivigi langeton aŭ pilolan navigadon sen verki javaskripton per simple specifi data-toggle="tab"data-toggle="pill"sur elemento. Aldonante la navkaj nav-tabsklasojn al la langeto ulaplikos la bootstrap langetan stilon.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Hejmo </a></li>
  3. <li><a href = "#profile" data-toggle = "langeto" > Profilo </a></li>
  4. <li><a href = "#messages" data-toggle = "langeto" > Mesaĝoj </a></li>
  5. <li><a href = "#settings" data-toggle = "langeto" > Agordoj </a></li>
  6. </ul>

Metodoj

$().tab

Aktivigas langetan elementon kaj enhavujon. Tab devus havi aŭ data-targetcelantan hrefujo-nodon en la DOM.

  1. <ul class = "nav nav-tabs" id = "miaTab" >
  2. <li class = "aktiva" ><a href = "#home" > Hejmo </a></li>
  3. <li><a href = "#profile" > Profilo </a></li>
  4. <li><a href = "#messages" > Mesaĝoj </a></li>
  5. <li><a href = "#settings" > Agordoj </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-enhavo" >
  9. <div class = "tab-pane active" id = "hejmo" > ... </div>
  10. <div class = "tab-pane" id = "profilo" > ... </div>
  11. <div class = "tab-pane" id = "mesaĝoj" > ... </div>
  12. <div class = "tab-pane" id = "agordoj" > ... </div>
  13. </div>
  14.  
  15. <skripto>
  16. $ ( funkcio () {
  17. $ ( '#miaTab a:last' ). langeto ( 'montri' );
  18. })
  19. </script>

Eventoj

Evento Priskribo
montri Ĉi tiu evento ekfunkciigas sur langeto, sed antaŭ ol la nova langeto estis montrita. Uzu event.targetkaj event.relatedTargetpor celi la aktivan langeton kaj la antaŭan aktivan langeton (se disponeblaj) respektive.
montrata Ĉi tiu evento ekfunkciigas sur langeto-spektaklo post kiam langeto estis montrita. Uzu event.targetkaj event.relatedTargetpor celi la aktivan langeton kaj la antaŭan aktivan langeton (se disponeblaj) respektive.
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'montrita' , funkcio ( e ) {
  2. e . celo // aktivigita langeto
  3. e . rilataCelo // antaŭa langeto
  4. })

Pri konsiletoj

Inspirite de la bonega jQuery.tipsy kromaĵo verkita de Jason Frame; Konsiletoj estas ĝisdatigita versio, kiu ne dependas de bildoj, uzas css3 por kuraĝigoj kaj datumoj-atributoj por loka titola konservado.

Elŝutu dosieron

Ekzempla uzo de konsiletoj

Ŝvebu super la subaj ligiloj por vidi konsiletojn:

Streĉaj pantalonoj sekva nivelo keffiyeh vi verŝajne ne aŭdis pri ili. Fotobudo barbo kruda denim tipografio vegana mesaĝisto sako stumptown. Farm-al-table seitan, mcsweeney's fixie daŭrigebla kvinoa 8-bita amerika vestaĵo havas terry richardson vinilĉambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, kvar loko mcsweeney's pure vegan chambray. Vere ironia metiisto whatever keytar , scenester farm-to-table banksy Austin twitter tenilo freegan cred kruda denim unu-devena kafo viral.


Uzante bootstrap-tooltip.js

Ekfunkciigu la konsileton per Javaskripto:

  1. $ ( '#ekzemplo' ). konsileto ( opcioj )

Opcioj

Nomo tajpu defaŭlte Priskribo
animacio bulea vera apliki css fade transiro al la konsileto
lokigo ĉeno|funkcio 'supro' kiel poziciigi la konsileton - supro | fundo | maldekstra | ĝuste
elektilo ŝnuro malvera Se elektilo estas disponigita, konsiletaj objektoj estos delegitaj al la specifitaj celoj.
titolo ŝnuro | funkcio '' defaŭlta titolvaloro se etikedo `title' ne ĉeestas
ellasilon ŝnuro 'ŝvebi' kiel la konsileto estas ekigita - ŝvebi | fokuso | manlibro
prokrasto nombro | objekto 0

prokrasti montri kaj kaŝi la konsileton (ms) - ne validas por mana ellasiltipo

Se nombro estas provizita, prokrasto estas aplikata al ambaŭ kaŝi/montri

Objekta strukturo estas:delay: { show: 500, hide: 100 }

Atentu! Opcioj por individuaj konsiletoj povas alternative esti precizigitaj per la uzo de datumaj atributoj.

Markado

Pro kaŭzoj de rendimento, la Tooltip kaj Popover-datum-apis elektas. Se vi ŝatus uzi ilin, nur specifu elektan opcion.

  1. <a href = "#" rel = "tooltip" title = "unua konsileto" > ŝvebi super mi </a>

Metodoj

$(). konsileto (opcioj)

Alligas konsileton pritraktilon al elementkolekto.

.tooltip('montri')

Rivelas la konsileton de elemento.

  1. $ ( '#elemento' ). konsileto ( 'montri' )

.tooltip('kaŝi')

Kaŝas la konsileton de elemento.

  1. $ ( '#elemento' ). konsileto ( 'kaŝi' )

.tooltip('ŝanĝu')

Ŝaltas la konsileton de elemento.

  1. $ ( '#elemento' ). konsileto ( 'ŝalti' )

Pri popovers

Aldonu malgrandajn tegaĵojn de enhavo, kiel tiuj sur la iPad, al iu ajn elemento por loĝigi malĉefajn informojn.

* Necesas ke la konsileto estu inkluzivita

Elŝutu dosieron

Ekzemplo ŝveba popover

Ŝvebu super la butono por ekigi la popover.


Uzante bootstrap-popover.js

Ebligu popovers per Javaskripto:

  1. $ ( '#ekzemplo' ). popover ( opcioj )

Opcioj

Nomo tajpu defaŭlte Priskribo
animacio bulea vera apliki css fade transiro al la konsileto
lokigo ĉeno|funkcio 'ĝuste' kiel poziciigi la popover - supro | fundo | maldekstra | ĝuste
elektilo ŝnuro malvera se elektilo estas disponigita, konsiletaj objektoj estos delegitaj al la specifitaj celoj
ellasilon ŝnuro 'ŝvebi' kiel la konsileto estas ekigita - ŝvebi | fokuso | manlibro
titolo ŝnuro | funkcio '' defaŭlta titolvaloro se la atributo `title` ne ĉeestas
enhavo ŝnuro | funkcio '' defaŭlta enhavvaloro se la atributo `data-content` ne ĉeestas
prokrasto nombro | objekto 0

prokrasti montri kaj kaŝi la popover (ms) - ne validas por mana ellasiltipo

Se nombro estas provizita, prokrasto estas aplikata al ambaŭ kaŝi/montri

Objekta strukturo estas:delay: { show: 500, hide: 100 }

Atentu! Opcioj por individuaj popovers povas alternative esti precizigitaj per la uzo de datenatributoj.

Markado

Pro kaŭzoj de rendimento, la Tooltip kaj Popover-datum-apis elektas. Se vi ŝatus uzi ilin, nur specifu elektan opcion.

Metodoj

$().popover(opcioj)

Inicialigas popovers por elemento kolekto.

.popover('montri')

Rivelas elementojn popover.

  1. $ ( '#elemento' ). popover ( 'montri' )

.popover('kaŝi')

Kaŝas elementojn popover.

  1. $ ( '#elemento' ). popover ( 'kaŝi' )

.popover('ŝalti')

Ŝaltas popover de elementoj.

  1. $ ( '#elemento' ). popover ( 'ŝalti' )

Pri atentigoj

La atentiga kromaĵo estas eta klaso por aldoni proksimajn funkciojn al atentigoj.

Elŝutu

Ekzemplaj atentigoj

La atentigaj kromprogramoj funkcias en regulaj atentaj mesaĝoj kaj blokas mesaĝojn.

Sankta guacamole! Plej bone kontrolu vin mem, vi ne aspektas tro bona.

Ho klaku! Vi ricevis eraron!

Ŝanĝu ĉi tion kaj tion kaj provu denove. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Prenu ĉi tiun agon Aŭ faru ĉi tion


Uzante bootstrap-alert.js

Ebligu malakcepton de atentigo per Javaskripto:

  1. $ ( ".alerto" ). atentiga ()

Markado

Nur aldonu data-dismiss="alert"al via fermbutono por aŭtomate doni atentan proksiman funkcion.

  1. <a class = "close" data-dismiss = "alerto" href = "#" > × </a>

Metodoj

$().alerto()

Envolvas ĉiujn atentigojn kun proksima funkcio. Por ke viaj atentigoj animiĝu kiam fermite, certigu, ke ili havas la klason .fadekaj .injam aplikita al ili.

.alert('fermi')

Fermas alarmon.

  1. $ ( ".alerto" ). atentigo ( 'fermi' )

Eventoj

La atentiga klaso de Bootstrap elmontras kelkajn eventojn por aliĝi al atentiga funkcio.

Evento Priskribo
proksime Ĉi tiu evento tuj ekfunkciigas kiam la closeekzempla metodo estas vokita.
fermita Ĉi tiu evento estas lanĉita kiam la atentigo estas fermita (atendos ke css-transiroj finiĝos).
  1. $ ( '#mia-atentigo' ). bind ( 'fermita' , funkcio () {
  2. // fari ion…
  3. })

Pri

Faru pli per butonoj. Kontrolu butonajn ŝtatojn aŭ kreu grupojn de butonoj por pli da komponantoj kiel ilobretoj.

Elŝutu dosieron

Ekzemplaj uzoj

Uzu la butonaldonaĵon por ŝtatoj kaj baskuloj.

Stateful
Ununura baskulo
Markobutono
Radio

Uzante bootstrap-button.js

Ebligu butonojn per Javaskripto:

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

Markado

Datumaj atributoj estas integritaj al la butonaldonaĵo. Rigardu la ekzemplokodon sube por la diversaj markadaj tipoj.

  1. <!-- Aldonu data-toggle="butono" por aktivigi baskulon sur ununura butono -->
  2. <button class = "btn" data-toggle = "butono" > Ununura Baskulo </button>
  3.  
  4. <!-- Aldonu data-toggle="buttons-checkbox" por markobutono-stilo ŝanĝi sur btn-grupo -->
  5. <div class = "btn-group" data-toggle = "butonoj-markbutono" >
  6. <button class = "btn" > Maldekstre </button>
  7. <button class = "btn" > Mezo </button>
  8. <button class = "btn" > Dekstre </button>
  9. </div>
  10.  
  11. <!-- Aldonu data-toggle="buttons-radio" por radiostilo ŝanĝanta sur btn-grupo -->
  12. <div class = "btn-group" data-toggle = "butonoj-radio" >
  13. <button class = "btn" > Maldekstre </button>
  14. <button class = "btn" > Mezo </button>
  15. <button class = "btn" > Dekstre </button>
  16. </div>

Metodoj

$().button('ŝaltu')

Ŝaltigas puŝan staton. Donas al la butono la aspekton, ke ĝi estas aktivigita.

Atentu! Vi povas ebligi aŭtomatan ŝanĝadon de butono uzante la data-toggleatributon.
  1. <button class = "btn" data-toggle = "butono" > </button>

$().button('ŝarĝante')

Agordas butonan staton al ŝarĝo - malŝaltas butonon kaj interŝanĝas tekston al ŝarĝo de teksto. Ŝargado de teksto devus esti difinita sur la butonelemento uzante la datuman atributon data-loading-text.

  1. <button class = "btn" data-loading-text = "ŝargi aĵojn..." > ... </button>
Atentu! Fajrovulpo daŭras la malfunkciigitan staton dum paĝŝarĝoj . Solvo por ĉi tio estas uzi autocomplete="off".

$().button('restarigi')

Restarigas butonan staton - interŝanĝas tekston al originala teksto.

$().butono(ŝnuro)

Restarigas butonan staton - interŝanĝas tekston al iu ajn datuma difinita teksto-stato.

  1. <button class = "btn" data-complete-text = "finita!" > ... </butono>
  2. <skripto>
  3. $ ( '.btn' ). butono ( 'kompleta' )
  4. </script>

Pri

Akiru bazajn stilojn kaj flekseblan subtenon por faldeblaj komponantoj kiel akordionoj kaj navigado.

Elŝutu dosieron

* Postulas la transirojn aldonaĵon esti inkluzivita.

Ekzemplo akordiono

Uzante la kolapsan kromaĵon, ni konstruis simplan akordionstilan fenestraĵon:

Anim pariatur kliŝo reprehenderit, enim eiusmod alta vivo akuzas terry richardson ad kalmaro. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Manĝkamiono quinoa nesciunt laborum eiusmod. Brunch 3 lupo luno tempor, sunt aliqua metis birdon sur ĝin kalmaro unu-devena kafo 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 metia biero farm-al-table, kruda denim estetika sinteza nesciunt vi verŝajne ne aŭdis pri ili accusamus labore daŭrigebla VHS.
Anim pariatur kliŝo reprehenderit, enim eiusmod alta vivo akuzas terry richardson ad kalmaro. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Manĝkamiono quinoa nesciunt laborum eiusmod. Brunch 3 lupo luno tempor, sunt aliqua metis birdon sur ĝin kalmaro unu-devena kafo 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 metia biero farm-al-table, kruda denim estetika sinteza nesciunt vi verŝajne ne aŭdis pri ili accusamus labore daŭrigebla VHS.
Anim pariatur kliŝo reprehenderit, enim eiusmod alta vivo akuzas terry richardson ad kalmaro. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Manĝkamiono quinoa nesciunt laborum eiusmod. Brunch 3 lupo luno tempor, sunt aliqua metis birdon sur ĝin kalmaro unu-devena kafo 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 metia biero farm-al-table, kruda denim estetika sinteza nesciunt vi verŝajne ne aŭdis pri ili accusamus labore daŭrigebla VHS.

Uzante bootstrap-collapse.js

Ebligu per Javaskripto:

  1. $ ( ".kolapso" ). kolapsi ()

Opcioj

Nomo tajpu defaŭlte Priskribo
gepatro elektilo malvera Se elektilo, ĉiuj faldeblaj elementoj sub la specifita gepatro estos fermitaj kiam ĉi tiu faldebla ero montriĝas. (simila al tradicia akordionkonduto)
baskuli bulea vera Ŝaltas la faldeblan elementon ĉe alvoko

Markado

Nur aldonu data-toggle="collapse"kaj data-targetal elementon por aŭtomate atribui kontrolon de faldebla elemento. La data-targetatributo akceptas css-elektilon al kiu apliki la kolapson. Nepre aldonu la klason collapseal la faldebla elemento. Se vi ŝatus, ke ĝi defaŭlte malfermu, aldonu la aldonan klason in.

  1. <button class = "btn btn-danger" data-toggle = "kolapsi" data-target = "#demo" >
  2. simpla faldebla
  3. </butono>
  4.  
  5. <div id = "demo" class = "kolapsi en" > </div>
Atentu! Por aldoni akordion-similan grupadministradon al faldebla kontrolo, aldonu la datuman atributon data-parent="#selector". Riferu al la demo por vidi ĉi tion en ago.

Metodoj

.kolapso(opcioj)

Aktivigas vian enhavon kiel faldebla elemento. Akceptas laŭvolajn opciojn object.

  1. $ ( '#miaKlasebla' ). kolapsi ({
  2. toggle : malvera
  3. })

.kolapso('ŝalti')

Ŝaltas faldebla elemento al montrita aŭ kaŝita.

.kolapso('montri')

Montras faldeblan elementon.

.kolapso('kaŝi')

Kaŝas faldeblan elementon.

Eventoj

La kolapsoklaso de Bootstrap elmontras kelkajn eventojn por hoki en kolapfunkciecon.

Evento Priskribo
montri Ĉi tiu evento tuj ekfunkciigas kiam la showekzempla metodo estas vokita.
montrata Ĉi tiu evento estas pafita kiam kolapelemento fariĝis videbla por la uzanto (atendos ke css-transiroj finiĝos).
kaŝi Ĉi tiu evento estas lanĉita tuj kiam la hidemetodo estas vokita.
kaŝita Ĉi tiu evento estas pafita kiam kolapsa elemento estis kaŝita de la uzanto (atendos ke css-transiroj finiĝos).
  1. $ ( '#miaKlasebla' ). on ( 'kaŝita' , funkcio () {
  2. // fari ion…
  3. })

Pri

Baza, facile etendita kromaĵo por rapide krei elegantajn tajpaĵojn kun ajna formo de teksto-enigo.

Elŝutu dosieron

Ekzemplo

Komencu tajpi en la suba kampo por montri la antaŭajn rezultojn.


Uzante bootstrap-typeahead.js

Voku la tajpu antaŭen per Javaskripto:

  1. $ ( '.typeahead' ). tajpu antaŭe ()

Opcioj

Nomo tajpu defaŭlte Priskribo
fonto tabelo [ ] La datumfonto por pridemandi.
eroj nombro 8 La maksimuma nombro da eroj por montri en la falmenuo.
egalulo funkcio uskle nesentema La metodo uzata por determini ĉu demando kongruas kun ero. Akceptas ununuran argumenton, itemkontraŭ kiu testi la demandon. Aliru la nunan demandon per this.query. Redonu buleon truese demando kongruas.
ordiganto funkcio ekzakta kongruo,
uskleco,
uskleco
Metodo uzata por ordigi aŭtomatajn rezultojn. Akceptas ununuran argumenton itemskaj havas la amplekson de la tajpu antaŭa kazo. Referencu la nunan demandon per this.query.
reliefigilo funkcio elstarigas ĉiujn defaŭltajn kongruojn Metodo uzata por reliefigi aŭtokompletajn rezultojn. Akceptas ununuran argumenton itemkaj havas la amplekson de la tajpu antaŭa kazo. Devus reveni html.

Markado

Aldonu datumajn atributojn por registri elementon kun tajpa funkcio.

  1. <input type = "text" data-provide = "tajpu antaŭe" >

Metodoj

.typeahead(opcioj)

Inicialigas enigaĵon per tajpu antaŭen.