JavaScript

Na Bootstrap ƒe akpawo nagbɔ agbe—fifia kple jQuery ƒe kpeɖeŋutɔ 13 siwo wowɔ ɖe ɖoɖo nu.

Ame ɖekaɖekawo alo woƒo ƒu

Woateŋu ade plugins ɖekaɖeka (togbɔ be ɖewo bia be woanɔ te ɖe wo dzi hã), alo wo katã zi ɖeka. Bootstrap.js kple bootstrap.min.js siaa me plugins katã le faɛl ɖeka me.

Nyatakaka ƒe nɔnɔmewo

Àteŋu azã Bootstrap ƒe kpeɖeŋutɔwo katã to dzeside API la dzi ko evɔ maŋlɔ JavaScript ƒe fli ɖeka pɛ hã o. Esia nye Bootstrap ƒe API ƒe klass gbãtɔ eye ele be wòanye wò susu gbãtɔ ne èle plugin zãm.

Ne míegblɔe alea la, le nɔnɔme aɖewo me la, ate ŋu anyo be woatsi dɔwɔnu sia. Eyata míena ŋutete hã be míawɔ nyatakaka nɔnɔme API la nuwɔametɔe to nudzɔdzɔwo katã ɖeɖeɖa le ŋutilã ƒe ŋkɔ dometsotso kple `'data-api'` dzi. Esia le abe alea ene:

  1. $ ( 'ŋutilã' ). off ( '.nyatakaka-api' ) .

Alo, be nàɖo taɖodzinu na plugin aɖe koŋ la, ɖeko nàde plugin la ƒe ŋkɔ abe ŋkɔteƒe ene kpe ɖe data-api ŋkɔteƒe ŋu abe esia ene:

  1. $ ( 'ŋutilã' ). off ( '.nuxlɔ̃ame.nyatakaka-api' ) .

Ðoɖowɔɖi ƒe API

Míexɔe se hã be ele be nàte ŋu azã Bootstrap ƒe kpeɖeŋutɔwo katã to JavaScript API dzi ko. Dutoƒo APIwo katã nye mɔnu ɖeka, siwo ŋu kɔsɔkɔsɔ le, eye wogbugbɔa nuƒoƒoƒu si dzi wowɔ dɔ ɖo la trɔna.

  1. $ ( ".btn.afɔku" ). button ( "trɔ asi le eŋu" ). addClass ( "ami ƒe ami" ) .

Ele be mɔnuwo katã naxɔ tiatiawɔblɔɖe ƒe nu, ka si woɖo taɖodzinu na mɔnu aɖe koŋ, alo naneke o (si dzea kpeɖeŋutɔ gɔme kple nuwɔna si woɖo ɖi):

  1. $ ( "#nyeModal" ). modal () // dze egɔme kple defaults
  2. $ ( "#nyeModal" ). modal ({ keyboard : alakpa }) // wodze egɔme kple keyboard aɖeke o
  3. $ ( "#nyeModal" ). modal ( 'show' ) // dzea egɔme eye wòyɔa ɖeɖefia enumake

Plugin ɖesiaɖe hã ɖea eƒe raw constructor ɖe go le `Constructor` ƒe nɔnɔme dzi: $.fn.popover.Constructor. Ne èdi be yeaxɔ plugin ƒe kpɔɖeŋu aɖe koŋ la, xɔe tẽ tso element aɖe me: $('[rel=popover]').data('popover').

Masɔmasɔ aɖeke Meli O

Ɣeaɖewoɣi la, ehiãna be woazã Bootstrap ƒe kpeɖeŋutɔwo kple UI ƒe ɖoɖo bubuwo. Le nɔnɔme siawo me la, ŋkɔteƒewo ƒe gododo ate ŋu adzɔ ɣeaɖewoɣi. Ne esia dzɔ la, àte ŋu ayɔ .noConflictplugin si nèdi be yeatrɔ asi le eƒe asixɔxɔ ŋu.

  1. var bootstrap ƒe abɔta = $ . fn . ƒe dzesi . noConflict () // trɔ $.fn.button ɖe asixɔxɔ si wode asi na va yi la me
  2. $ . fn . bootstrapBtn = bootstrapButton // na $().bootstrapBtn bootstrap ƒe dɔwɔwɔ

Nudzɔdzɔwo

Bootstrap naa nudzɔdzɔ tɔxɛwo na plugin ƒe nuwɔna tɔxɛ akpa gãtɔ. Zi geɖe la, esiawo va le nyagbemanɔsitɔ kple nyagbe si va yi ƒe nɔnɔme me - afisi wodzea nyagbe (ex. show) gɔme le nudzɔdzɔ aɖe ƒe gɔmedzedze, eye eƒe akpa si va yi ƒe nɔnɔme (ex. shown) nyea nusi dzea egɔme le nuwɔna aɖe ƒe nuwuwu.

Nudzɔdzɔ siwo katã me seɖoƒe meli na o naa preventDefault ƒe dɔwɔwɔ. Esia naa ŋutete be woatɔ te nuwɔna aɖe wɔwɔ hafi wòadze egɔme.

  1. $ ( '#nyeModal' ). on ( 'ɖee fia' , dɔwɔwɔ ( e ) { .
  2. ne (! data ) trɔ gbɔ e . preventDefault () // tɔ te modal ƒe ɖeɖefia
  3. }) ƒe .

Ku ɖe tɔtrɔwo ŋu

Ne èdi tɔtrɔ ƒe ŋusẽkpɔɖeamedzi bɔbɔewo la, tsɔ bootstrap-transition.js kpe ɖe JS faɛl bubuawo ŋu zi ɖeka. Ne èle bootstrap.js si woƒo ƒu (alo woɖe edzi) zãm la , mehiã be nàde esia eme o—ele afima xoxo.

Zã nyawo ƒe akpa aɖewo

Trɔtrɔ ƒe kpeɖeŋutɔ ƒe kpɔɖeŋu ʋee aɖewo:

  • Sliding alo fading le modals me
  • Tab siwo le vɔvɔm
  • Nuxlɔ̃ame siwo le vɔvɔm
  • Carousel ƒe ʋuƒo siwo le ʋuʋum

Kpɔɖeŋuwo

Modals nye streamlined, gake woateŋu atrɔ asi le, dzeɖoɖo ƒe nyabiasewo kple dɔwɔwɔ suetɔ kekeake si hiã kple smart defaults.

Kpɔɖeŋu si meʋãna o

Modal si woɖe gɔme kple ta, ŋutilã, kple nuwɔna ƒe ƒuƒoƒo le afɔti me.

  1. <div klass = "modal ɣla fade" >
  2. <div klass = "modal-tanya" >
  3. <bɔt ƒomevi = "bɔt" klass = "tu" data-dismiss = "modal" aria-ɣla = "nyateƒe" > &ɣeyiɣiwo; </button> ƒe dzesi
  4. <h3> Modal ƒe tanya </h3>
  5. </div> ƒe nyawo
  6. <div klass = "modal-ŋutilã" >
  7. <p> Ŋutilã nyui ɖeka... </p>
  8. </div> ƒe nyawo
  9. <div klass = "modal-afɔdzideƒe" >
  10. <a href = "#" klass = "btn" > Kpe </a>
  11. <a href = "#" class = "btn btn-primary" > Dzra tɔtrɔwo ɖo </a>
  12. </div> ƒe nyawo
  13. </div> ƒe nyawo

Live demo ƒe wɔwɔfia

Trɔ modal aɖe to JavaScript dzi to asiƒoƒo ɖe dzesi si le ete la dzi. Aɖiɖi ɖe anyi eye wòaɖiɖi tso axaa tame.

  1. <!-- Abɔta si aʋã modal -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Dze wɔwɔfia ƒe nɔnɔme gɔme </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "nyeModal" klass = "modal ɣla fade" tabindex = "-1" akpa = "nyatakaka" aria-labelledby = "nyeModalLabel" aria-ɣla = "nyateƒe" >
  6. <div klass = "modal-tanya" >
  7. <bɔt ƒomevi = "bɔt" klass = "tu" data-dismiss = "modal" aria-ɣla = "nyateƒe" > × </button>
  8. <h3 id = "myModalLabel" > Mɔnu ƒe tanya </h3>
  9. </div> ƒe nyawo
  10. <div klass = "modal-ŋutilã" >
  11. <p> Ŋutilã nyui ɖeka... </p>
  12. </div> ƒe nyawo
  13. <div klass = "modal-afɔdzideƒe" >
  14. <button class = "btn" data- dismiss = "modal" aria-ɣla = "nyateƒe" > Tu </button>
  15. <button class = "btn btn-primary" > Dzra tɔtrɔwo ɖo </button>
  16. </div> ƒe nyawo
  17. </div> ƒe nyawo

Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

Wɔ modal aɖe ŋudɔ JavaScript maŋlɔ o. Ðoe data-toggle="modal"ɖe dziɖunu ƒe akpa aɖe dzi, abe abɔta ene, kpakple data-target="#foo"alo href="#foo"be nàɖo taɖodzinu na modal aɖe koŋ be wòatrɔ.

  1. <button type = "button" data-toggle = "modal" nyatakaka-taɖodzinu = "#myModal" > Dze modal </button> gɔme

To JavaScript dzi

Yɔ modal si si id myModalle kple JavaScript ƒe fli ɖeka:

  1. $ ( '#nyeModal' ). modal ( tiatiawɔblɔɖewo ) .

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-backdrop="".

Ŋkɔ ƒomevi gᴐmedzeƒe nuɖᴐɖᴐ
megbenyawo boolean ƒe ƒuƒoƒo nyateƒe Modal-backdrop ƒe akpa aɖe hã le eme. Alo, gblɔ staticna megbenya si metua modal le ʋuʋu dzi o.
keyboard dzi boolean ƒe ƒuƒoƒo nyateƒe Doa modal la ne wozi escape key dzi
ɖe fia boolean ƒe ƒuƒoƒo nyateƒe Fia modal la ne wodze egɔme.
si gbɔ dzi dzi afᴐmᴐ alakpa

Ne wotsɔ url si le didiƒe na la, woatsɔ nyatakakawo ade jQuery ƒe loadmɔnu dzi eye woado wo ɖe .modal-body. Ne èle data api zãm la, àteŋu azã hreftag la atsɔ agblɔ adzɔgetsoƒe. Esia ƒe kpɔɖeŋu aɖe dze le ete:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Mɔnuwo

.modal(tiatiawɔblɔɖe) .

Ewɔa wò nyatakakawo ŋudɔ abe modal ene. Lɔ̃ ɖe tiatia siwo woate ŋu awɔ le wo ɖokui si dzi object.

  1. $ ( '#nyeModal' ). modal ({ ) .
  2. keyboard : alakpa
  3. }) ƒe .

.modal('trɔ asi le eŋu')

Asitɔtrɔ le modal aɖe ŋu.

  1. $ ( '#nyeModal' ). modal ( 'trɔ asi le eŋu' ) .

.modal('ɖee fia') .

Eʋua modal aɖe kple asi.

  1. $ ( '#nyeModal' ). modal ( 'ɖee fia' ) .

.modal('ɣla') .

Asi ɣlaa modal aɖe.

  1. $ ( '#nyeModal' ). modal ( 'ɣla' ) .

Nudzɔdzɔwo

Bootstrap ƒe modal klass ɖea nudzɔdzɔ ʋee aɖewo ɖe go na hooking ɖe modal dɔwɔwɔ me.

Nudzᴐdzᴐ Nuɖᴐɖᴐ
ɖe fia Nudzɔdzɔ sia doa dzo enumake ne woyɔ showkpɔɖeŋu mɔnu la.
woɖee fia Woɖea nudzɔdzɔ sia ne wowɔ modal la be wòadze na zãla (alala be css ƒe tɔtrɔwo nawu enu).
be Woɖea nudzɔdzɔ sia ɖa enumake ne woyɔ hideinstance mɔnu la.
si le ɣaɣlame Woɖea nudzɔdzɔ sia ne modal la ɣla ɖe zãla la vɔ (alala be css ƒe tɔtrɔwo nawu enu).
  1. $ ( '#nyeModal' ). on ( 'ɣla' , dɔwɔwɔ () { .
  2. // wɔ nane...
  3. }) ƒe .

Kpɔɖeŋu le navbar me

ScrollSpy ƒe kpeɖeŋutɔa nye na nav taɖodzinuwo ƒe asitɔtrɔ le eɖokui si le agbalẽxatsaxatsa ƒe nɔƒe nu. Ʋu teƒe si le navbar la te eye nàkpɔ klass si le dɔ wɔm ƒe tɔtrɔ. Woade dzesi nu sue siwo le fli dzi la hã.

@da ami

Ad leggings keytar, brunch id nutata kplɔ̃ɖoƒe dolor labore. Pitchfork yr enim lo-fi hafi wodzra qui. Tumblr agble-to-kplɔ̃ kekefɔkpa ƒe gomenɔamesiwo nusianu. Anim keffiyeh carles ƒe lãgbalẽ. Velit seitan mcsweeney ƒe fotoɖeƒe 3 amegãxi ɣleti irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui ɖewohĩ mèse wo ŋkɔ kpɔ o et cardigan kakaɖedzi ga culpa biodiesel wes anderson atsyɔ̃ɖoɖo. Nihil tattooed accusamus, cred nukokoedonamela biodiesel keffiyeh aɖaŋudɔwɔla ullamco consequat.

@mdo dzi

Veniam marfa ƒe ɖaƒoƒo ƒe ɖaƒoƒo, adipisicing fugiat velit pitchfork ɖa. Freegan ɖa aliqua cupidat mcsweeney ƒe vero. Cupidatat ene loko nisi, ea helvetica nulla carles. Tattooed cosby sweater nuɖuɖu agbatsɔʋu, mcsweeney ƒe quis non freegan vinyl. Lo-fi wes anderson +1 ƒe awudodo. Carles non atsyɔ̃ɖoɖo ƒe kamedede quis gentrify. Brooklyn adipisicing asinudɔwɔwɔ biya vice keytar deserunt.

ɖeka

Occaecat ƒe lãgbalẽ si woyɔna be aliqua delectus. Fap asinudɔwɔwɔ biya deserunt skateboard ea. Lomo keke ƒe gomenɔamesiwo adipisicing banh mi, velit ea sunt kplɔe ɖo dzidzenu locavore ɖeka-dzɔtsoƒe kɔfi le magna veniam. Agbe kɔkɔ id vinyl, echo tsaɖibɔ consequat quis aliquip banh mi pitchfork. Vero VHS est amiɖeɖe ɖe lãme na ame. Consectetur nisi DIY minim dɔla ƒe akplo. Cred ex le, nusiwo li tegbee delectus consectetur fanny pack iphone.

eve

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 dɔla kotoku marfa nusianu delectus nuɖuɖu agbatsɔʋu. Sapiente ƒe wɔwɔme id assumenda. Locavore sed helvetica cliche irony, dziɖegbewo ɖewohĩ mèse nu tso wo ŋu o consequat hoodie gluten-maɖemaɖe lo-fi fap aliquip. Labore elit placeat hafi wodzra vɔ, terry richardson proident brunch nesciunt quis cosby awudziwui pariatur keffiyeh ut helvetica aɖaŋudɔwɔla. Cardigan asinudɔwɔwɔ biya seitan dzadzraɖo velit. VHS chambray laboris nye ɣeyiɣi kpui aɖe ƒe veniam. Anim mollit minim commodo ullamco dziɖegbe ƒe avuwo.


Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

Be nàtsɔ scrollspy nuwɔna akpe ɖe wò topbar navigation ŋu bɔbɔe la, ɖeko nàtsɔe akpe data-spy="scroll"ɖe element si nèdi be yeatsa ŋku ŋu (zi geɖe la, esia anye ŋutilã la) eye data-target=".navbar"nàtia nav si nàzã. Àdi be yeazã scrollspy kple .navakpa aɖe.

  1. <ŋutilã ƒe nyatakaka-ŋkutsala = "ʋu" nyatakaka-taɖodzinu = ".navbar" > ... </body>

To JavaScript dzi

Yɔ agbalẽxatsaxatsa la to JavaScript dzi:

  1. $ ( '#navbar' ). agbalẽxatsaxatsa () .
Tawo yi dzi! Ele be id taɖodzinu siwo woate ŋu akpɔ gbɔ nanɔ Navbar kadodowo me. 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>.

Mɔnuwo

.scrollspy ('gbugbɔ') .

Ne èle scrollspy zãm kpe ɖe nusiwo wotsɔ kpe ɖe DOM ŋu alo wo ɖeɖe ɖa ŋu la, ahiã be nàyɔ gbugbɔgawɔ mɔnu la abe ale:

  1. $ ( '[nyatakaka-ŋkutsala="ʋuʋu"]' ). ɖesiaɖe ( dɔwɔwɔ () { .
  2. var $ ŋkutsala = $ ( esia ). scrollspy ( 'gbugbɔ' ) .
  3. });

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-offset="".

Ŋkɔ ƒomevi gᴐmedzeƒe nuɖᴐɖᴐ
offset ƒe ƒuƒoƒo xexlẽdzesi 10 Pixels siwo woatsɔ atso dzi ne wole akɔnta bum le agbalẽxatsaxatsa ƒe nɔƒe ŋu.

Nudzɔdzɔwo

Nudzᴐdzᴐ Nuɖᴐɖᴐ
wɔ dɔ Nudzɔdzɔ sia doa dzo ɣesiaɣi si agbalẽxatsaxatsa la va le nu yeye aɖe ŋu dɔ wɔm.

Kpɔɖeŋu tabwo

Tsɔ tab ƒe dɔwɔwɔ kabakaba, si trɔna kpe ɖe eŋu be nàtrɔ to nutoa me nyatakakawo ƒe akpawo dzi, to menu siwo le tsia dzi gɔ̃ hã dzi.

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.


Zãzã

Na tabbable tabs nawɔ dɔ to JavaScript dzi (ele be woawɔ tab ɖesiaɖe ŋudɔ ɖekaɖeka):

  1. $ ( '#nyeTab a' ). zi ( dɔwɔwɔ ( e ) ) { .
  2. e . xe mɔ ɖeDefault ();
  3. $ ( esia ). tab ( 'ɖee fia' );
  4. }) ƒe .

Àte ŋu awɔ tab ɖekaɖekawo ŋudɔ le mɔ vovovowo nu:

  1. $ ( '#nyeTab a[href="#nyatakakadzraɖoƒe"]' ). tab ( 'ɖee fia' ); // Tia tab le ŋkɔ nu
  2. $ ( '#nyeTab a:gbãtɔ' ). tab ( 'ɖee fia' ); // Tia tab gbãtɔ
  3. $ ( '#nyeTab a:mlɔetɔ' ). tab ( 'ɖee fia' ); // Tia tab mamlɛtɔ
  4. $ ( '# nyeTab li: eq (2) a' ). tab ( 'ɖee fia' ); // Tia tab etɔ̃lia (0-indexed) .

Dzesidede dzesiwo

Àte ŋu awɔ tab alo pill navigation ŋudɔ JavaScript aɖeke maŋlɔ to element aɖe gbɔgblɔ data-toggle="tab"alo ɖe edzi ko me. data-toggle="pill"Ne ètsɔ navkple nav-tabsklasswo kpe ɖe tab ulla ŋu la, awɔ Bootstrap tab ƒe atsyã ŋudɔ.

  1. <ul klass = "nav nav-tabs" >
  2. <li><a href = "#aƒe" nyatakaka-trɔtrɔ = "tab" > Aƒe </a></li>
  3. <li><a href = "#nyatakakadzraɖoƒe" data-toggle = "tab" > Nɔnɔmetata </a></li>
  4. <li><a href = "#gbedasiwo" data-toggle = "tab" > Gbedasiwo </a></li>
  5. <li><a href = "#ɖoɖowo" data-toggle = "tab" > Ðoɖowo </a></li>
  6. </ul> ƒe nyawo

Mɔnuwo

$().tab ƒe ƒuƒoƒo

Ewɔa tab element kple emenyawo ƒe nugoe ŋudɔ. Ele be tab nanye a data-targetalo hreftaɖodzinu si nye container node le DOM la me.

  1. <ul klass = "nav nav-tabs" id = "nyeTab" >
  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 klass = "tab-nyawo" >
  9. <div klass = "tab-pane le dɔ wɔm" id = "aƒe" > ... </div>
  10. <div klass = "tab-pane" id = "nɔnɔmetata" > ... </div>
  11. <div klass = "tab-pane" id = "gbedasiwo" > ... </div>
  12. <div klass = "tab-pane" id = "ɖoɖowo" > ... </div>
  13. </div> ƒe nyawo
  14.  
  15. <ŋɔŋlɔdzesi>
  16. $ ( dɔwɔwɔ () { .
  17. $ ( '#nyeTab a:mlɔetɔ' ). tab ( 'ɖee fia' );
  18. }) ƒe .
  19. </script> ƒe nyawo

Nudzɔdzɔwo

Nudzᴐdzᴐ Nuɖᴐɖᴐ
ɖe fia Nudzɔdzɔ sia dzona le tab show dzi, gake hafi woaɖe tab yeyea afia. 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 (ne ele eme) ɖe wo nɔewo yome.
woɖee fia Nudzɔdzɔ sia dzona le tab ɖeɖefia me ne woɖe tab aɖe fia vɔ. 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 (ne ele eme) ɖe wo nɔewo yome.
  1. $ ( 'a [nyatakaka-trɔtrɔ="tab"]' ). on ( 'woɖee fia' , dɔwɔwɔ ( e ) { .
  2. e . taɖodzinu // tab si wowɔ dɔ le
  3. e . relatedTarget // tab si do ŋgɔ
  4. }) ƒe .

Kpɔɖeŋuwo

Wotsɔ jQuery.tipsy ƒe kpeɖeŋutɔ nyuitɔ kekeake si Jason Frame ŋlɔ la ʋãe; Dɔwɔnu ƒe aɖaŋuɖoɖowo nye tɔtrɔ yeye aɖe, si meɖoa ŋu ɖe nɔnɔmetatawo ŋu o, zãa CSS3 hena nɔnɔmetatawo, kple data-nɔnɔmewo hena teƒea ƒe tanyawo dzraɖoƒe.

Le dɔwɔwɔ ta la, dɔwɔnu ƒe aɖaŋuɖoɖo kple popover data-apis nye opt in, si fia be ele be wò ŋutɔ nàdze wo gɔme .

Tsɔ asi ɖo kadodo siwo le ete la dzi be nàkpɔ dɔwɔnu ƒe aɖaŋuɖoɖowo:

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 really ironic artisan whatever keytar , scenester agble-ɖe-kplɔ̃ banksy Austin twitter asi freegan cred raw denim ɖeka-dzɔtsoƒe kɔfi viral.

Mɔfiame ene

Dɔwɔnu ƒe aɖaŋuɖoɖowo le nyawo tsɔtsɔ de eme ƒe ƒuƒoƒowo me

Ne èle dɔwɔnu ƒe aɖaŋuɖoɖowo kple popovers zãm kple Bootstrap ƒe nyawo tsɔtsɔ de eme ƒe ƒuƒoƒoawo la, ahiã be nàɖo container(si woŋlɔ ɖe ete) ƒe tiatia be nàƒo asa na nugbegblẽ le ame ŋu siwo mèdi o.


Zãzã

Dze dɔwɔnu ƒe aɖaŋuɖoɖoa gɔme to JavaScript dzi:

  1. $ ( '#kpɔɖeŋu' ). dɔwɔnu ƒe aɖaŋuɖoɖo ( tiatiawɔblɔɖe ) .

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-animation="".

Ŋkɔ ƒomevi gᴐmedzeƒe nuɖᴐɖᴐ
nɔnɔmetata si me woɖea nɔnɔmetatawo le boolean ƒe ƒuƒoƒo nyateƒe zã css fade ƒe tɔtrɔ ɖe dɔwɔnu ƒe aɖaŋuɖoɖoa dzi
html boolean ƒe ƒuƒoƒo alakpa De html dɔwɔnu ƒe aɖaŋuɖoɖoa me. Ne alakpae la, woazã jquery ƒe textmɔnu atsɔ ade emenyawo dom la me. Zã nuŋɔŋlɔ ne ètsi dzi ɖe XSS ƒe amedzidzedzewo ŋu.
ɖoɖo ɖe teƒe aɖe kaƒoƒo | wᴐ dᴐ 'dzi' alesi woaɖo dɔwɔnu ƒe aɖaŋuɖoɖoa ɖe teƒe - ta | ete | miame | nyui
tiatiawɔla ka alakpa Ne wotsɔ tiatiawɔnu aɖe na la, woatsɔ dɔwɔnu ƒe aɖaŋuɖoɖo nuawo ade asi na taɖodzinu siwo woɖo.
tanya kaƒoƒo | wᴐ dᴐ '' . tanya ƒe asixɔxɔ gbãtɔ ne `title` tag mele afima o
daƒe ka 'hover focus'. alesi woadze dɔwɔnu ƒe aɖaŋuɖoɖo gɔmee - zi | hover | susu tsɔtsɔ ɖo nu ŋu | asi nu. De dzesii be wò nya la to trigger mutliple, teƒe si woɖe ɖe vovo, trigger ƒomeviwo.
hehe ɖe megbe xexlẽdzesi | nu 0.

megbedede ɖeɖefia kple eɣla dɔwɔnu ƒe aɖaŋuɖoɖo (ms) - meku ɖe asi trigger ƒomevi ŋu o

Ne wotsɔ xexlẽdzesi aɖe na la, wozãa megbedede ɖe ɣla/ɖee fia siaa ŋu

Nu ƒe wɔwɔme enye:delay: { show: 500, hide: 100 }

nugoe me nugoe kaƒoƒo | alakpa alakpa

Tsɔ dɔwɔnu ƒe aɖaŋuɖoɖoa kpe ɖe nu aɖe koŋ ŋucontainer: 'body'

Tawo yi dzi! Woateŋu agblɔ tiatia siwo woawɔ na dɔwɔnu ɖekaɖekawo le mɔ bubu nu to nyatakaka ƒe nɔnɔmewo zazã me.

Dzesidede dzesiwo

  1. <a href = "#" data-toggle = "dɔwɔnu ƒe aɖaŋuɖoɖo" title = "dɔwɔnu gbãtɔ ƒe aɖaŋuɖoɖo" > tsɔ asi le dzinye </a>

Mɔnuwo

$ ().dɔwɔnu ƒe aɖaŋuɖoɖo(tiatia) .

Kpe dɔwɔnu ƒe aɖaŋuɖoɖo ƒe asiléƒe ɖe element ƒe nuƒoƒoƒu ŋu.

.dɔwɔnu ƒe aɖaŋuɖoɖo('ɖee fia')

Eɖea element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo fiana.

  1. $ ( '#nu vevi aɖe' ). dɔwɔnu ƒe aɖaŋuɖoɖo ( 'ɖee fia' ) .

.dɔwɔnu ƒe aɖaŋuɖoɖo('ɣla')

Ɣla element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo.

  1. $ ( '#nu vevi aɖe' ). dɔwɔnu ƒe aɖaŋuɖoɖo ( 'ɣla' ) .

.dɔwɔnu ƒe aɖaŋuɖoɖo('toggle')

Trɔ asi le element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo ŋu.

  1. $ ( '#nu vevi aɖe' ). dɔwɔnu ƒe aɖaŋuɖoɖo ( 'toggle' ) .

.dɔwɔnu ƒe dzesi('tsrɔ̃') .

Eɣlaa element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo eye wòtsrɔ̃nɛ.

  1. $ ( '#nu vevi aɖe' ). dɔwɔnu ƒe aɖaŋuɖoɖo ( 'tsrɔ̃' ) .

Kpɔɖeŋuwo

Tsɔ nyatakaka suesuesue siwo wotsɔ ƒo xlãe, abe esiwo le iPad la dzi ene, kpe ɖe nu ɖesiaɖe ŋu hena nyatakaka evelia ƒe aƒe. Tsɔ asi ɖo abɔta la dzi be nàdze popover la gɔme. Ebia be woatsɔ Tooltip ade eme.

Popover si meʋãna o

Tiatia ene li: etame, ɖusime, ete, kple miame.

Popover ƒe ta

Sed posuere consectetur ƒe ɣeyiɣi si woɖo ɖi le lobortis. Aenean ƒe eu leo ​​quam. Atsyɔ̃ɖoɖo si le abe ƒuƒuiƒe ene la nye lacinia quam venenatis vestibulum.

Popover ƒe nyateƒe

Sed posuere consectetur ƒe ɣeyiɣi si woɖo ɖi le lobortis. Aenean ƒe eu leo ​​quam. Atsyɔ̃ɖoɖo si le abe ƒuƒuiƒe ene la nye lacinia quam venenatis vestibulum.

Popover ƒe gɔme

Sed posuere consectetur ƒe ɣeyiɣi si woɖo ɖi le lobortis. Aenean ƒe eu leo ​​quam. Atsyɔ̃ɖoɖo si le abe ƒuƒuiƒe ene la nye lacinia quam venenatis vestibulum.

Popover dzo le afima

Sed posuere consectetur ƒe ɣeyiɣi si woɖo ɖi le lobortis. Aenean ƒe eu leo ​​quam. Atsyɔ̃ɖoɖo si le abe ƒuƒuiƒe ene la nye lacinia quam venenatis vestibulum.

Womewɔ dzesi aɖeke si woɖe fia abe popovers ene tso JavaScript kple emenyawo me le datanɔnɔme aɖe me o.

Live demo ƒe wɔwɔfia

Mɔfiame ene


Zãzã

Na popovers nawɔ dɔ to JavaScript dzi:

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

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-animation="".

Ŋkɔ ƒomevi gᴐmedzeƒe nuɖᴐɖᴐ
nɔnɔmetata si me woɖea nɔnɔmetatawo le boolean ƒe ƒuƒoƒo nyateƒe zã css fade ƒe tɔtrɔ ɖe dɔwɔnu ƒe aɖaŋuɖoɖoa dzi
html boolean ƒe ƒuƒoƒo alakpa De html popover la me. Ne alakpae la, woazã jquery ƒe textmɔnu atsɔ ade emenyawo dom la me. Zã nuŋɔŋlɔ ne ètsi dzi ɖe XSS ƒe amedzidzedzewo ŋu.
ɖoɖo ɖe teƒe aɖe kaƒoƒo | wᴐ dᴐ 'nyui' alesi woaɖo popover la ɖe ɖoɖo nu - ta | ete | miame | nyui
tiatiawɔla ka alakpa ne wotsɔ tiatiawɔnu aɖe na la, woatsɔ dɔwɔnu ƒe aɖaŋuɖoɖo nuawo ade asi na taɖodzinu siwo woɖo
daƒe ka 'zi edzi'. alesi wodzea popover gɔmee - zi | hover | susu tsɔtsɔ ɖo nu ŋu | asi nu
tanya kaƒoƒo | wᴐ dᴐ '' . default tanya ƒe asixɔxɔ ne `title` nɔnɔme mele afima o
eme nuwo kaƒoƒo | wᴐ dᴐ '' . default content value ne `data-content` nɔnɔme mele afima o
hehe ɖe megbe xexlẽdzesi | nu 0.

delay ɖeɖefia kple eɣla popover (ms) - meku ɖe asi trigger ƒomevi ŋu o

Ne wotsɔ xexlẽdzesi aɖe na la, wozãa megbedede ɖe ɣla/ɖee fia siaa ŋu

Nu ƒe wɔwɔme enye:delay: { show: 500, hide: 100 }

nugoe me nugoe kaƒoƒo | alakpa alakpa

Etsɔa popover la kpena ɖe nu aɖe koŋ ŋucontainer: 'body'

Tawo yi dzi! Woateŋu agblɔ tiatia siwo woawɔ na popover ɖekaɖekawo le mɔ bubu nu to nyatakaka ƒe nɔnɔmewo zazã me.

Dzesidede dzesiwo

Le dɔwɔwɔ ta la, Tooltip kple Popover data-apis nye opt in. Ne èdi be yeazã wo la, ɖeko nàgblɔ tiatiawɔblɔɖe ƒe tiatia aɖe.

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' ) .

.popover('trɔ asi le eŋu')

Trɔ asi le elements popover ŋu.

  1. $ ( '#nu vevi aɖe' ). popover ( 'trɔ asi le eŋu' ) .

.popover('tsrɔ̃ nu') .

Eɣlaa element aɖe ƒe popover eye wòtsrɔ̃nɛ.

  1. $ ( '#nu vevi aɖe' ). popover ( 'tsrɔ̃ nu' ) .

Kpɔɖeŋu nuxlɔ̃amewo

Tsɔ dismiss dɔwɔwɔ kpe ɖe nuxlɔ̃ame gbedasiwo katã ŋu kple plugin sia.

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.

Wɔ afɔɖeɖe sia Alo wɔ esia


Zãzã

Na nuxlɔ̃ame aɖe ɖeɖeɖa to JavaScript dzi nawɔ dɔ:

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

Dzesidede dzesiwo

Ðeko nàtsɔe akpe data-dismiss="alert"ɖe wò nutrenu ƒe dzesi ŋu be wòana nuxlɔ̃ame ƒe nutrenu ƒe dɔwɔwɔ le eɖokui si.

  1. <a klass = "tu" data-dismiss = "nuxlɔ̃ame" href = "#" > &ɣeyiɣiwo; </a>

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" ). alert ( 'tu ɖe eŋu' ) .

Nudzɔdzɔwo

Bootstrap ƒe nuxlɔ̃ame ƒe hatsotso la ɖea nudzɔdzɔ ʋee aɖewo ɖe go hena hooking ɖe nuxlɔ̃ame ƒe dɔwɔwɔ me.

Nudzᴐdzᴐ Nuɖᴐɖᴐ
tu Nudzɔdzɔ sia doa dzo enumake ne woyɔ closekpɔɖeŋu mɔnu la.
wotu nu ɖo Woɖea nudzɔdzɔ sia ne wotu nuxlɔ̃amea (alala be css ƒe tɔtrɔwo nawu enu).
  1. $ ( '#nye-nuxlɔ̃ame' ). bind ( 'tu' , dɔwɔwɔ () { .
  2. // wɔ nane...
  3. }) ƒe .

Kpɔɖeŋuwo zazã

Wɔ geɖe wu kple abɔtawo. Dzɔdzɔmeŋusẽ ƒe abɔta gblɔ alo wɔ abɔta ƒe ƒuƒoƒowo na akpa geɖe abe dɔwɔnu ƒe ʋuƒo ene.

Dukɔmevinyenye ƒe nuwɔna

Tsɔ kpe ɖe eŋu data-loading-text="Loading..."be nàzã agbatsɔtsɔ ƒe nɔnɔme le abɔta aɖe dzi.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Ele agba me..." > Nɔnɔme si le agba me </button>

Toggle ɖeka ƒe tɔtrɔ

Tsɔ kpe ɖe eŋu data-toggle="button"be nàwɔ tɔtrɔ le abɔta ɖeka dzi ŋudɔ.

  1. <button type = "button" class = "btn btn-primary" data-toggle = "bɔt" > Trɔtrɔ Ðeka </button>

Dzesiwo ƒe Aɖaka

Tsɔe kpe ɖe eŋu data-toggle="buttons-checkbox"na dzesideɖaka ƒe atsyã ƒe tɔtrɔ le btn-group dzi.

  1. <div klass = "btn-ƒuƒoƒo" nyatakaka-trɔtrɔ = "bɔtwo-dzesiwo ƒe aɖaka" >
  2. <bɔt ƒomevi = "bɔt" klass = "btn btn-gbãtɔ" > Miame </bɔt>
  3. <bɔt ƒomevi = "bɔt" klass = "btn btn-gbãtɔ" > Titina </bɔt>
  4. <bɔt ƒomevi = "bɔt" klass = "btn btn-gbãtɔ" > Nuɖusi </bɔt>
  5. </div> ƒe nyawo

Radio dzi

Tsɔe kpe ɖe eŋu data-toggle="buttons-radio"na radio ƒe atsyã ƒe tɔtrɔ le btn-group dzi.

  1. <div klass = "btn-ƒuƒoƒo" nyatakaka-trɔtrɔ = "bɔtwo-radio" >
  2. <bɔt ƒomevi = "bɔt" klass = "btn btn-gbãtɔ" > Miame </bɔt>
  3. <bɔt ƒomevi = "bɔt" klass = "btn btn-gbãtɔ" > Titina </bɔt>
  4. <bɔt ƒomevi = "bɔt" klass = "btn btn-gbãtɔ" > Nuɖusi </bɔt>
  5. </div> ƒe nyawo

Zãzã

Na abɔtawo nawɔ dɔ to JavaScript dzi:

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

Dzesidede dzesiwo

Nyatakaka ƒe nɔnɔmewo nye nu vevi aɖe le abɔta ƒe kpeɖeŋutɔa me. Kpɔ kpɔɖeŋu ƒe kɔda si le ete hena dzeside ƒomevi vovovoawo.

Tiatiawɔblɔɖewo

Ɖeke o

Mɔnuwo

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

Toggles push nɔnɔme. Enaa abɔta la dzena abe ɖe wowɔe ene.

Tawo yi dzi! Àte ŋu ana auto toggling na button aɖe nawɔ dɔ to data-toggleattribute la zazã me.
  1. <bɔt ƒomevi = "bɔt" klass = "btn" nyatakaka-trɔtrɔ = "bɔt" > ... </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 type = "button" class = "btn" data-loading-text = "nu siwo le agba me..." > ... </button>
Tawo yi dzi! Firefox yia edzi nɔa nɔnɔme si wowɔ nuwɔametɔ me la me le axawo ƒe agbawo katã me . Esia gbɔ kpɔnu aɖee nye be woazã autocomplete="off".

$ ().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 type = "button" class = "btn" nyatakaka-wu-nuŋɔŋlɔ = "wowu enu!" > ... </a dzesi>
  2. <ŋɔŋlɔdzesi>
  3. $ ( '.btn' ). button ( 'wu enu' ) .
  4. </script> ƒe nyawo

Ku ɖe

Na gɔmeɖoanyi ƒe atsyãwo kple kpekpeɖeŋu si te ŋu trɔna ɖe nɔnɔmewo ŋu na akpa siwo woate ŋu agbã abe accordions kple mɔfiame ene.

* Ebia be woatsɔ Transitions ƒe kpeɖeŋutɔa ade eme.

Kpɔɖeŋu accordion

Míezã collapse plugin la, míewɔ accordion ƒe atsyã ƒe widget bɔbɔe aɖe:

Anim pariatur cliche reprehenderit, enim eiusmod agbe kɔkɔ accusamus terry richardson ad squid. 3 amegãxi ɣleti officia aute, non cupidat skateboard dolor brunch. Nuɖuɖu agbatsɔʋu quinoa nesciunt laborum eiusmod. Brunch 3 amegãxi dzinu tempor, sunt aliqua tsɔ xevi aɖe ɖo edzi squid ɖeka-dzɔtsoƒe kɔfi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, asinudɔwɔwɔ biya dɔwɔwɔ wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur lãwula vice lomo. Leggings occaecat aɖaŋu biya agble-ɖe-kplɔ̃, raw denim atsyɔ̃ɖoɖo synth nesciunt ɖewohĩ mèse wo accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod agbe kɔkɔ accusamus terry richardson ad squid. 3 amegãxi ɣleti officia aute, non cupidat skateboard dolor brunch. Nuɖuɖu agbatsɔʋu quinoa nesciunt laborum eiusmod. Brunch 3 amegãxi dzinu tempor, sunt aliqua tsɔ xevi aɖe ɖo edzi squid ɖeka-dzɔtsoƒe kɔfi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, asinudɔwɔwɔ biya dɔwɔwɔ wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur lãwula vice lomo. Leggings occaecat aɖaŋu biya agble-ɖe-kplɔ̃, raw denim atsyɔ̃ɖoɖo synth nesciunt ɖewohĩ mèse wo accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod agbe kɔkɔ accusamus terry richardson ad squid. 3 amegãxi ɣleti officia aute, non cupidat skateboard dolor brunch. Nuɖuɖu agbatsɔʋu quinoa nesciunt laborum eiusmod. Brunch 3 amegãxi dzinu tempor, sunt aliqua tsɔ xevi aɖe ɖo edzi squid ɖeka-dzɔtsoƒe kɔfi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, asinudɔwɔwɔ biya dɔwɔwɔ wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur lãwula vice lomo. Leggings occaecat aɖaŋu biya agble-ɖe-kplɔ̃, raw denim atsyɔ̃ɖoɖo synth nesciunt ɖewohĩ mèse wo accusamus labore sustainable VHS.
  1. <div klass = "akɔdion" id = "akɔdin2" >
  2. <div klass = "accordion-ƒuƒoƒo" >
  3. <div klass = "accordion-tanya" >
  4. <a klass = "accordion-toggle" data-toggle = "akɔ" nyatakaka-dzila = "#akɔdin2" href = "#akɔ ɖeka" >
  5. Ƒuƒoƒo ƒe Nu #1 si Woate Ŋu Agbã
  6. </a>
  7. </div> ƒe nyawo
  8. <div id = "collapseOne" class = "accordion-ŋutilã ƒe gbagbã le" >
  9. <div klass = "accordion-ememetɔ" >
  10. Anim pariatur ƒe nyagbɔgblɔ...
  11. </div> ƒe nyawo
  12. </div> ƒe nyawo
  13. </div> ƒe nyawo
  14. <div klass = "accordion-ƒuƒoƒo" >
  15. <div klass = "accordion-tanya" >
  16. <a class = "accordion-toggle" data-toggle = "akɔ" nyatakaka-dzila = "#akɔdin2" href = "#akɔ Eve" >
  17. Ƒuƒoƒo ƒe Nu #2 si Woate Ŋu Agbã
  18. </a>
  19. </div> ƒe nyawo
  20. <div id = "collapseTwo" klass = "akɔrdion-ŋutilã ƒe gbagbã" >
  21. <div klass = "accordion-ememetɔ" >
  22. Anim pariatur ƒe nyagbɔgblɔ...
  23. </div> ƒe nyawo
  24. </div> ƒe nyawo
  25. </div> ƒe nyawo
  26. </div> ƒe nyawo
  27. ...

Àte ŋu azã plugin la hã accordion ƒe dzesi manɔmee. Na abɔta aɖe natrɔ nu bubu ƒe kekeɖenu kple eƒe gbagbã.

  1. <bɔt ƒomevi = "bɔt" klass = "btn btn-afɔku" nyatakaka-trɔtrɔ = "mumu" nyatakaka-taɖodzinu = "#demo" >
  2. bɔbɔe si woate ŋu agbã
  3. </button> ƒe dzesi
  4.  
  5. <div id = "demo" klass = "gbã le" > ... </div>

Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

Ðeko nàtsɔe akpe ɖe eŋu data-toggle="collapse"kple a data-targetto element be wòade dɔ asi na element si woate ŋu agbã la dzi kpɔkpɔ le eɖokui si. Nɔnɔmea data-targetxɔa css tiatia aɖe be woatsɔ awɔ collapse la ŋudɔ ɖe. Kpɔ egbɔ be yetsɔ klass la kpe collapseɖe nusi woate ŋu agbã ŋu. Ne èdi be wòaʋu le gɔmedzedzea me la, tsɔ klass bubu kpee in.

Be nàtsɔ ƒuƒoƒodzikpɔkpɔ si le abe accordion ene akpe ɖe dziɖuɖu si woate ŋu agbã ŋu la, tsɔ nyatakaka ƒe nɔnɔme kpe ɖe eŋu data-parent="#selector". Kpɔ demo la be nàkpɔ esia le dɔwɔwɔ me.

To JavaScript dzi

Na wòawɔ dɔ kple asi kple:

  1. $ ( ".klɔƒe" ). dze anyi () .

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-parent="".

Ŋkɔ ƒomevi gᴐmedzeƒe nuɖᴐɖᴐ
dzila tiatiawɔla alakpa Ne selector la ekema woatu nusiwo katã woateŋu agbã le dzila si woɖo la te ne woɖe nu sia si woateŋu agbã la fia. (si sɔ kple accordion ƒe nuwɔna si wozãna tsã)
trɔ asi le eŋu boolean ƒe ƒuƒoƒo nyateƒe Trɔa nusi woate ŋu agbã la le yɔyɔ dzi

Mɔnuwo

.collapse(tiatiawɔnuwo) .

Ewɔa wò nyatakakawo ŋudɔ abe nusi woate ŋu agbã ene. Lɔ̃ ɖe tiatia siwo woate ŋu awɔ le wo ɖokui si dzi object.

  1. $ ( '#nye si woate ŋu aƒo ƒu' ). ƒuƒuiƒe ({
  2. toggle : alakpa
  3. }) ƒe .

.collapse('trɔ asi le eŋu') .

Trɔa nusi woate ŋu agbã la ɖe nusi woɖe fia alo woɣla me.

.collapse('ɖee fia') .

Fia nusi woate ŋu agbã.

.collapse('ɣla') .

Eɣlaa nusi woate ŋu agbã.

Nudzɔdzɔwo

Bootstrap ƒe collapse klass ɖea nudzɔdzɔ ʋee aɖewo ɖe go na hooking ɖe collapse dɔwɔwɔ me.

Nudzᴐdzᴐ Nuɖᴐɖᴐ
ɖe fia Nudzɔdzɔ sia doa dzo enumake ne woyɔ showkpɔɖeŋu mɔnu la.
woɖee fia Woɖea nudzɔdzɔ sia ne wowɔ collapse element aɖe be wòadze na zãla (alala be css ƒe tɔtrɔwo nawu enu).
be Wodaa tu nudzɔdzɔ sia enumake ne woyɔ hidemɔnua vɔ.
si le ɣaɣlame Woɖea nudzɔdzɔ sia ne woɣla collapse element aɖe ɖe zãla la (alala be css ƒe tɔtrɔwo nawu enu).
  1. $ ( '#nye si woate ŋu aƒo ƒu' ). on ( 'ɣla' , dɔwɔwɔ () { .
  2. // wɔ nane...
  3. }) ƒe .

Kpɔɖeŋu

Gɔmeɖoanyi, si keke ɖe enu bɔbɔe plugin na kabakaba wɔwɔ kabakaba typeaheads dzeaniwo kple nɔnɔme nuŋɔŋlɔ ɖesiaɖe.

  1. <input type = "nuŋɔŋlɔ" data-na = "typeahead" >

Àdi be yeaɖoe autocomplete="off"be yeaxe mɔ na web-browser ƒe nuɖuɖu siwo woɖo ɖi la be woagadze le Bootstrap typeahead ƒe fli dzi o.


Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

Tsɔ nyatakaka ƒe nɔnɔmewo kpee be nàŋlɔ element aɖe si me typeahead ƒe dɔwɔwɔ le abe alesi woɖee fia le kpɔɖeŋu si le etame me ene.

To JavaScript dzi

Yɔ typeahead la kple asi kple:

  1. $ ( '.ŋlɔ ŋgɔgbe' ). ŋlɔ nu ɖe ​​ŋgɔ () .

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-source="".

Ŋkɔ ƒomevi gᴐmedzeƒe nuɖᴐɖᴐ
dzᴐtsoƒe array, dɔwɔwɔ [ ] . Nyatakakatsoƒe si ŋu woabia nya tsoe. Ate ŋu anye kawo ƒe ƒuƒoƒo alo dɔwɔwɔ aɖe. Wotsɔa nyaʋiʋli eve toa dɔwɔwɔa me, queryasixɔxɔ si le nyawo tsɔtsɔ de eme ƒe akpaa dzi kple processyɔyɔ si wogbugbɔ gblɔna. Woateŋu azã dɔwɔwɔa le ɣeyiɣi ɖeka me to nyatakakatsoƒea gbugbɔgaɖo tẽ alo le ɣeyiɣi ɖeka me to processyɔyɔa ƒe nyaʋiʋli ɖeka dzi.
nuwo xexlẽdzesi 8 Nusiwo woaɖe afia le xexlẽdzesi si le fli me la ƒe xexlẽme si sɔ gbɔ wu.
minDidime ƒe didime xexlẽdzesi 1. 1. Ŋɔŋlɔdzesiwo ƒe didime suetɔ kekeake si hiã hafi nàdze aɖaŋuɖoɖo siwo woatsɔ akpe ɖe wo ɖokui ŋu gɔme
matcher wᴐ dᴐ nu suesuesuewo ƒe seselelãme manɔmee Mɔnu si wozãna tsɔ nyaa nenye be nyabiase aɖe sɔ kple nu aɖe. Lɔ̃ ɖe nyaʋiʋli ɖeka dzi, itemsi ŋu woado nyabiasea kpɔ le. Kpɔ nyabiase si li fifia kple this.query. Trɔ boolean truene biabia nye ɖeka.
nuƒoƒoƒula wᴐ dᴐ exact match,
ŋɔŋlɔdzesi gãwo ƒe dzesiwo,
ŋɔŋlɔdzesi gãwo ƒe vovototodedeameme
Mɔnu si wozãna tsɔ ɖoa ​​autocomplete ƒe emetsonuwo ɖe ɖoɖo nu. Lɔ̃ ɖe nyaʋiʋli ɖeka dzi itemseye typeahead ƒe kpɔɖeŋu ƒe kekeme le esi. Tsɔ nyabiase si nèbia fifia la ɖo this.query.
updater wᴐ dᴐ trɔa nusi nètia la vɛ Mɔnu si wozãna tsɔ trɔa nu si nètia la vɛ. Lɔ̃ ɖe nyaʋiʋli ɖeka dzi, itemeye kple typeahead ƒe kpɔɖeŋu ƒe kekeme le esi.
nusi te gbe ɖe edzi wᴐ dᴐ te gbe ɖe nusiwo katã sɔ kple wo nɔewo siwo woɖo ɖi la dzi Mɔnu si wozã tsɔ te gbe ɖe autocomplete ƒe emetsonuwo dzi. Lɔ̃ ɖe nyaʋiʋli ɖeka dzi itemeye typeahead ƒe kpɔɖeŋu ƒe kekeme le esi. Ele be wòatrɔ html.

Mɔnuwo

.typeahead(tiatiawɔnuwo) .

Edzea nyawo tsɔtsɔ de eme gɔme kple typeahead.

Kpɔɖeŋu

Subnavigation si le miame la nye affix plugin la ƒe live demo.


Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

Be nàtsɔ affix behavior akpe ɖe element ɖesiaɖe ŋu bɔbɔe la, ɖeko nàtsɔe akpe data-spy="affix"ɖe element si nèdi be yeatsa ŋku ŋu. Emegbe zã offsets nàtsɔ aɖe ɣeyiɣi si nàtrɔ asi le element aɖe ƒe pinning ŋu kple esi nàtsi la gɔme.

  1. <div nyatakaka-ŋkutsala = "affix" nyatakaka-offset-ta = "200" > ... </div>
Tawo yi dzi! Ele be nàkpɔ nusi wotsɔ pin la ƒe nɔƒe kple edzila kplikplikpli ƒe nuwɔna dzi. , affix, affix-topkple affix-bottom. Ðo ŋku edzi nàlé ŋku ɖe dzila aɖe si ate ŋu adze anyi ŋu ne affix la dze egɔme elabena ele nyatakakawo ɖem ɖa le axaa ƒe sisi si sɔ me.

To JavaScript dzi

Yɔ affix plugin la to JavaScript dzi:

  1. $ ( '#navbar' ). affix () ƒe akpa aɖe.

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-offset-top="200".

Ŋkɔ ƒomevi gᴐmedzeƒe nuɖᴐɖᴐ
offset ƒe ƒuƒoƒo xexlẽdzesi | dɔwɔwɔ | nu 10 Pixels siwo woaɖe tso screen dzi ne wole akɔnta bum afisi agbalẽxatsaxatsa le. Ne wotsɔ xexlẽdzesi ɖeka na la, woawɔ offset la ŋudɔ le etame kple miame siaa. Be nàse mɔfiame ɖeka, alo vovototo tɔxɛ geɖe la, ɖeko nàna nu aɖe offset: { x: 10 }. Zã dɔwɔwɔ ne ehiã be nàna offset le mɔ si trɔna nu (eɖea vi na aɖaŋu aɖewo siwo ɖoa nya ŋu).