Javascript na Bootstrap ƒe nuŋɔŋlɔ

Na Bootstrap ƒe akpawo nagbɔ agbe kple plugins yeye siwo wowɔ ɖe ɖoɖo nu siwo wɔa dɔ kple jQuery kple Ender .

← Trɔ yi Bootstrap ƒe aƒeme

Plugin sia nye na scrollspy (auto updating nav) ƒe kadodoa tsɔtsɔ kpe ɖe bootstrap topbar la ŋu.

Hee ɖa anyi

bootstrap-scrollspy.js zazã

  1. $ ( '#topbar' ). agbalẽ xatsaxatsaSpy () .

Dzesidede dzesiwo

Be nàtsɔ scrollspy nuwɔna akpe ɖe wò nav ŋu bɔbɔe la, ɖeko nàtsɔ data-scrollspynɔnɔmea akpe ɖe .topbar.

  1. <div klass = "tamexɔ" data-scrollspy = "ŋlɔɖiwo" > ... </div>

Mɔnuwo

$ (). scrollSpy () .

Auto wɔa mɔfiame ƒe abɔtawo ŋudɔ to ezãlawo ƒe ʋuʋu ƒe nɔƒe dzi.

  1. $ ( 'ŋutilã > .topbar' ). agbalẽ xatsaxatsaSpy () .

De dzesii Ele be id taɖodzinu siwo woate ŋu akpɔ gbɔ nanɔ Topbar anchor tags ŋu. Le kpɔɖeŋu me, ele be a <a href="#home">home</a>nasɔ kple nane si le dom la me abe <div id="home"></div>.

.scrollSpy ('gbugbɔ') .

Scrollspy la dzraa nav ƒe abɔtawo kple akpa ƒe nɔnɔmetatawo ɖo hena dɔwɔwɔ. Ne ehiã be nàwɔ cache sia yeyee (anɔ eme nenye be nyatakaka siwo trɔna le asiwò) la, yɔ gbugbɔgawɔ mɔnu sia ko. Ne èzã data attribute tsɔ ɖe wò scrollspy gɔme la, ɖeko nàyɔ refresh le ŋutilã la dzi.

  1. $ ( 'ŋutilã' ). scrollSpy ( 'gbugbɔ' ) .

Demo ƒe wɔwɔfia

Kpɔ the topbar ƒe mɔfiame si le axa sia dzi la ɖa.

Plugin sia naa dɔwɔwɔ bubuwo hena abɔta ƒe nɔnɔme dzi kpɔkpɔ.

Hee ɖa anyi

bootstrap-buttons.js zazã

  1. $ ( '.tabs' ). ƒe dzesi () .

Mɔnuwo

$ ().button ('trɔ asi le eŋu')

Toggles push nɔnɔme. Na btn ƒe dzedzeme be wowɔ dɔ nɛ.

De dzesii Àte ŋu ana auto toggling na button aɖe nawɔ dɔ to data-toggleattribute la zazã me.

  1. <button class = "btn" data-toggle = "tɔtrɔ" > ... </bɔt>

$ ().button ('agbatsɔtsɔ le eme')

Ðo abɔta ƒe nɔnɔme ɖe agbatsɔtsɔ me - ewɔa abɔta nuwɔametɔe eye wòtrɔa nuŋɔŋlɔ ɖe nuŋɔŋlɔ ƒe agbatsɔtsɔ ŋu. Ele be woaɖe nuŋɔŋlɔ ƒe agbatsɔtsɔ gɔme le abɔta ƒe akpaa dzi to nyatakaka ƒe nɔnɔme zazã me data-loading-text.

  1. <button class = "btn" data-loading-text = "nu siwo le agba me..." > ... </button>

$ ().button ('gbugbɔ ɖoɖo')

Trɔ asi le abɔta ƒe nɔnɔme ŋu - trɔa nuŋɔŋlɔ ɖe nuŋɔŋlɔ gbãtɔ ŋu.

$ ().bɔt (ka) .

Trɔ asi le abɔta ƒe nɔnɔme ŋu - trɔa nuŋɔŋlɔ ɖe nuŋɔŋlɔ ƒe nɔnɔme ɖesiaɖe si woɖe fia le nyatakaka me.

  1. <button class = "btn" nyatakaka-wu-nuŋɔŋlɔ = "wowu enu!" > ... </a dzesi>
  2. <ŋɔŋlɔdzesi>
  3. $ ('.btn').button ('wu enu') .
  4. </scrip> ƒe nyawo

Demo ƒe wɔwɔfia

Plugin sia tsɔa tab kple pill ƒe dɔwɔwɔ kabakaba, si trɔna la kpena ɖe eŋu.

Hee ɖa anyi

Bootstrap-tabs.js zazã

  1. $ ( '.tabs' ). tabwo () .

Dzesidede dzesiwo

Àte ŋu awɔ tab alo pill navigation dɔ evɔ nàŋlɔ javascript aɖeke o to a data-tabsalo data-pillsattribute nana wo ko me.

  1. <ul klass = "tabs" nyatakaka-tabs = "tabs" > ... </ul>

Mɔnuwo

$().tabs alo $().tikewo

Ewɔa tab kple pill ƒe dɔwɔwɔ ŋudɔ na nugoe aɖe si wona. Ele be tab kadodowo nafia id's le nuŋlɔɖia me.

  1. <ul klass = "tabs" >
  2. <li klass = "dɔwɔwɔ" ><a href = "#aƒe" > Aƒe </a></li>
  3. <li><a href = "#nyatakakadzraɖoƒe" > Nɔnɔmetata </a></li>
  4. <li><a href = "#gbedasiwo" > Gbedasiwo </a></li>
  5. <li><a href = "#ɖoɖowo" > Ðoɖowo </a></li>
  6. </ul> ƒe nyawo
  7.  
  8. <div class = "atikekui-nusiwo le eme" >
  9. <div klass = "dɔwɔwɔ" id = "aƒe" > ... </div>
  10. <div id = "nɔnɔmetata" > ... </div>
  11. <div id = "gbedasiwo" > ... </div>
  12. <div id = "ɖoɖowo" > ... </div>
  13. </div> ƒe nyawo
  14.  
  15. <ŋɔŋlɔdzesi>
  16. $ ( dɔwɔwɔ () { .
  17. $ ( '.tabs' ). tabwo () .
  18. }) ƒe .
  19. </script> ƒe nyawo

Nudzɔdzɔwo

Nudzᴐdzᴐ Nuɖᴐɖᴐ
trɔ Nudzɔdzɔ sia doa dzo ɖe tab tɔtrɔ dzi. Zã event.targetkple event.relatedTargetnàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm kple tab si le dɔ wɔm va yi la ɖe wo nɔewo yome.
  1. $ ( '#.tabs' ). bind ( 'trɔ' , dɔwɔwɔ ( e ) { .
  2. e . taɖodzinu // tab si wowɔ dɔ le
  3. e . relatedTarget // tab si do ŋgɔ
  4. }) ƒe .

Demo ƒe wɔwɔfia

Raw denim ɖewohĩ mèse wo ŋkɔ kpɔ o jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth aƒetɔ kɔklɔ. Aɖatsiwo ƒe nyagbɔgblɔ ɣeyiɣi kpui aɖe, williamsburg carles vegan helvetica. Reprehenderit lãwula retro keffiyeh drɔ̃ekukula synth. Cosby ƒe awudziwui eu banh mi, qui irure terry richardson ex squid. Aliquip placeat lãwo ƒe lãmesẽfefewɔlawo ƒe iphone. Seitan aliquip quis cardigan amerikatɔwo ƒe awudodo, lãwula 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.

Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.

Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

Wotue ɖe jQuery.tipsy ƒe kpeɖeŋutɔ nyuitɔ kekeake si Jason Frame ŋlɔ dzi; twipsy nye tɔtrɔ yeye aɖe, si meɖoa ŋu ɖe nɔnɔmetatawo ŋu o, ezãa css3 hena nɔnɔmetatawo wɔwɔ, kple data-attributes hena tanyawo dzraɖoƒe!

Hee ɖa anyi

Wozãa bootstrap-twipsy.js

  1. $ ( '#kpɔɖeŋu' ). twipsy ( tiatia siwo woawɔ ) .

Tiatiawɔblɔɖewo

Ŋkɔ ƒomevi gᴐmedzeƒe nuɖᴐɖᴐ
agbenɔƒe boolean ƒe ƒuƒoƒo nyateƒe zã css fade ƒe tɔtrɔ ɖe dɔwɔnu ƒe aɖaŋuɖoɖoa dzi
delayIn xexlẽdzesi 0. megbedede hafi woaɖe dɔwɔnu ƒe aɖaŋuɖoɖo (ms) afia .
delayOut ƒe nuwuwu xexlẽdzesi 0. megbedede hafi aɣla dɔwɔnu ƒe aɖaŋuɖoɖo (ms) .
fallback ƒe megbedede ka '' . nuŋɔŋlɔ si woazã ne dɔwɔnu ƒe tanya aɖeke meli o
ɖoɖo ɖe teƒe aɖe ka 'dzi me' alesi woaɖo dɔwɔnu ƒe aɖaŋuɖoɖoa ɖe teƒe - le etame | le ete | miame | nyui
html boolean ƒe ƒuƒoƒo alakpa ɖe mɔ na html me nyawo le dɔwɔnu ƒe aɖaŋuɖoɖo me
nɔ agbe boolean ƒe ƒuƒoƒo alakpa zã nudzɔdzɔwo ƒe amedɔdɔ ɖe nudzɔdzɔwo gbɔ kpɔla ɖekaɖekawo teƒe
offset ƒe ƒuƒoƒo xexlẽdzesi 0. pixel offset of dɔwɔnu ƒe aɖaŋuɖoɖo tso taɖodzinu element
tanya ka, dɔwɔwɔ 'tanya' nɔnɔme alo mɔnu si dzi woato axɔ tanya ƒe nuŋɔŋlɔ
daƒe ka 'hover'. alesi wodzea dɔwɔnu ƒe aɖaŋuɖoɖo gɔmee - hover | susu tsɔtsɔ ɖo nu ŋu | asi nu
ƒe nɔnɔmetata ka [dzesideŋkɔ si woɖo ɖi]. html ƒe nɔnɔmetata si wozãna hena twipsy gɔmeɖeɖe.

De dzesii Woateŋu agblɔ twipsy kpɔɖeŋu tiatia ɖekaɖekawo le mɔ bubu nu to nyatakaka nɔnɔmewo zazã me.

  1. <a href = "#" data-placement = "ete" rel = 'twipsy' tanya = 'Tanya ƒe nuŋɔŋlɔ aɖewo' > nuŋɔŋlɔ </a>

Mɔnuwo

$ ().twipsy (tiatiawɔblɔɖe) .

Tsɔ twipsy handler kpe ɖe element nuƒoƒoƒu ŋu.

.twipsy('ɖee fia') .

Eɖea elements twipsy aɖe fiana.

  1. $ ( '#nu vevi aɖe' ). twipsy ( 'ɖee fia' ) .

.twipsy('ɣla') .

Hides an elements twipsy.

  1. $ ( '#nu vevi aɖe' ). twipsy ( 'ɣla' ) .

.twipsy(nyateƒe) .

Trɔ elements twipsy klass ƒe kpɔɖeŋu.

  1. $ ( '#nu vevi aɖe' ). twipsy ( nyateƒe ) .

De dzesii Alo àte ŋu axɔ esia kple $().data('twipsy').

Demo ƒe wɔwɔfia

Tight pants next level keffiyeh ɖewohĩ mèse wo ŋkɔ kpɔ o. Fotoɖeƒe ɖaɖa raw denim letterpress vegan dɔla kotoku stumptown. Agble-to-kplɔ̃ seitan, mcsweeney ƒe fixie si li tegbee quinoa 8-bit american awuwo le terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo dziɖegbe ƒe avuwo. Tofu biodiesel williamsburg marfa, ene loko mcsweeney ƒe kɔ vegan chambray. A nyateƒe nukokoedonamela aɖaŋudɔwɔla nuka kee keytar, scenester agble-ɖe-kplɔ̃ banksy Austin twitter asi freegan cred raw denim ɖeka-dzɔtsoƒe kɔfi viral.

Popover ƒe kpeɖeŋutɔa naa ŋgɔdonya bɔbɔe aɖe si dzi nàto atsɔ popovers akpe ɖe wò dɔwɔɖoɖoa ŋu. Ekeke bootstrap-twipsy.js ƒe kpeɖeŋutɔ ɖe enu, eyata kpɔ egbɔ be yelé faɛl ma hã ne èle popovers dem wò dɔa me!

De dzesii Ele be nàde bootstrap-twipsy.js faɛl la hafi bootstrap-popover.js.

Hee ɖa anyi

Bootstrap-popover.js zazã

  1. $ ( '#kpɔɖeŋu' ). popover ( tiatia siwo woawɔ ) .

Tiatiawɔblɔɖewo

Ŋkɔ ƒomevi gᴐmedzeƒe nuɖᴐɖᴐ
agbenɔƒe boolean ƒe ƒuƒoƒo nyateƒe zã css fade ƒe tɔtrɔ ɖe dɔwɔnu ƒe aɖaŋuɖoɖoa dzi
delayIn xexlẽdzesi 0. megbedede hafi woaɖe dɔwɔnu ƒe aɖaŋuɖoɖo (ms) afia .
delayOut ƒe nuwuwu xexlẽdzesi 0. megbedede hafi aɣla dɔwɔnu ƒe aɖaŋuɖoɖo (ms) .
fallback ƒe megbedede ka '' . nuŋɔŋlɔ si woazã ne dɔwɔnu ƒe tanya aɖeke meli o
ɖoɖo ɖe teƒe aɖe ka 'nyui' alesi woaɖo dɔwɔnu ƒe aɖaŋuɖoɖoa ɖe teƒe - le etame | le ete | miame | nyui
html boolean ƒe ƒuƒoƒo alakpa ɖe mɔ na html me nyawo le dɔwɔnu ƒe aɖaŋuɖoɖo me
nɔ agbe boolean ƒe ƒuƒoƒo alakpa zã nudzɔdzɔwo ƒe amedɔdɔ ɖe nudzɔdzɔwo gbɔ kpɔla ɖekaɖekawo teƒe
offset ƒe ƒuƒoƒo xexlẽdzesi 0. pixel offset of dɔwɔnu ƒe aɖaŋuɖoɖo tso taɖodzinu element
tanya ka, dɔwɔwɔ 'tanya' nɔnɔme alo mɔnu si dzi woato axɔ tanya ƒe nuŋɔŋlɔ
eme nuwo ka, dɔwɔwɔ 'nyatakaka-menyawo'. ka alo mɔnu aɖe si dzi woato axɔ emenyawo ƒe nuŋɔŋlɔ. ne wometsɔ ɖeke na o la, woaɖe nyatakakawo tso data-content ƒe nɔnɔme aɖe me.
daƒe ka 'hover'. alesi wodzea dɔwɔnu ƒe aɖaŋuɖoɖo gɔmee - hover | susu tsɔtsɔ ɖo nu ŋu | asi nu
ƒe nɔnɔmetata ka [dzesideŋkɔ si woɖo ɖi]. html ƒe nɔnɔmetata si wozãna tsɔ ɖea popover gɔme.

De dzesii Woateŋu agblɔ popover ƒe kpɔɖeŋu tiatia ɖekaɖekawo le mɔ bubu nu to nyatakaka ƒe nɔnɔmewo zazã me.

  1. <a nyatakaka-ɖoɖo = "ete" href = "#" klass = "btn afɔku" rel = "popover" > nuŋɔŋlɔ </a>

Mɔnuwo

$ ().popover (tiatiawɔblɔɖe) .

Edzea popovers gɔme na element nuƒoƒoƒu.

.popover('ɖee fia') .

Eɖea elements popover aɖe fiana.

  1. $ ( '#nu vevi aɖe' ). popover ( 'ɖee fia' ) .

.popover('ɣla') .

Ɣla elementwo ƒe popover aɖe.

  1. $ ( '#nu vevi aɖe' ). popover ( 'ɣla' ) .

Demo ƒe wɔwɔfia

hover na popover

Nuxlɔ̃ame ƒe kpeɖeŋutɔ nye super tiny klass na tsɔtsɔ kpe ɖe dɔwɔwɔ kplikplikpli ŋu na nuxlɔ̃amewo.

Hee ɖa anyi

bootstrap-alerts.js zazã

  1. $ ( ".nuxlɔ̃ame-gbedasi" ). nuxlɔ̃ame () .

Dzesidede dzesiwo

Ðeko nàtsɔ data-alertnɔnɔme aɖe akpe ɖe wò nuxlɔ̃ame gbedasiwo ŋu be wòana woa ŋutɔwo nawɔ dɔ kplikplikpli.

Tiatiawɔblɔɖewo

Ŋkɔ ƒomevi gᴐmedzeƒe nuɖᴐɖᴐ
tiatiawɔla ka '.tu' Tiatiawɔnu kae woaɖo taɖodzinu na hena nuxlɔ̃ame aɖe ƒe nuwuwu.

Mɔnuwo

$().nuxlɔ̃ame () .

Bla nuxlɔ̃amewo katã kple dɔwɔwɔ kplikplikpli. Be wò nuxlɔ̃amewo nawɔ dɔ ne wotu la, kpɔ egbɔ be wowɔ .fadekple .inklass la le wo ŋu xoxo.

.alert('tu nu') .

Etua nuxlɔ̃ame aɖe.

  1. $ ( ".nuxlɔ̃ame-gbedasi" ). alert ( 'tu ɖe eŋu' ) .

Demo ƒe wɔwɔfia

×

Guacamole kɔkɔe la! Best check yo self, mèle dzedzem nyuie akpa o.

×

Oo, ʋuʋu! Vodada aɖe va su asiwò! Trɔ esia kple ema eye nàgadze agbagba ake. Duis mollis, est non commodo luctus, nisi erat agbatsɔla ƒe lãgbalẽ, eget lacinia odio sem nec elit. Cras mattis consectetur purus nɔa anyi ɖe lãmi me.