Ku ɖe modals ŋu

A streamlined, gake flexible, xɔ ɖe dekɔnu javascript modal plugin kple dɔwɔwɔ suetɔ kekeake si hiã kple smart defaults ko.

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

Le ete la, wowɔ modal si woɖe ɖe go le mɔ si mewɔa tɔtrɔ o nu.

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.

Bootstrap-modal zazã

Yɔ modal la to javascript dzi:

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

Tiatiawɔblɔɖewo

Dzesidede dzesiwo

Àteŋu awɔ modals ŋudɔ le wò axa dzi bɔbɔe evɔ mahiã be nàŋlɔ javascript ƒe fli ɖeka pɛ hã o. Ðeko nàɖoe data-toggle="modal"ɖe controller element dzi kple a data-target="#foo"alo href="#foo"si sɔ kple modal element id, eye ne èzi edzi la, adze wò modal gɔme.

Azɔ hã, be nàtsɔ tiatia aɖewo akpe ɖe wò modal kpɔɖeŋu ŋu la, ɖeko nàde wo abe nyatakaka ƒe nɔnɔme bubuwo ene ɖe dziɖuɖu ƒe akpaa alo modal dzesi ŋutɔ dzi.

<a klass = "btn" data-toggle = "modal" href = "#nyeModal" > Dze Mɔnu gɔme </a>    

<div klass = "modal ɣla" id = "nyeModal" >  
  <div klass = "modal-tanya" > 
    <bɔt ƒomevi = "bɔt" klass = "tu" data-dismiss = "modal" > × </button>   
    <h3> Modal ƒe tanya </h3>
  </div> ƒe nyawo
  <div klass = "modal-ŋutilã" > 
    <p> Ŋutilã nyui ɖeka... </p>
  </div> ƒe nyawo
  <div klass = "modal-afɔti" > 
    <a href = "#" klass = "btn" nyatakaka-ɖe asi le eŋu = "modal" > Tu </a>   
    <a href = "#" class = "btn btn-primary" > Dzra tɔtrɔwo ɖo </a>  
  </div> ƒe nyawo
</div> ƒe nyawo

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.

$ ( '#nyeModal' ). modal ({ ) .
  keyboard : alakpa 
}) .

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

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

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

.modal('ɖee fia') .

Eʋua modal aɖe kple asi.

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

.modal('ɣla') .

Asi ɣlaa modal aɖe.

$ ( '#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.

$ ( '#nyeModal' ). on ( 'ɣla' , dɔwɔwɔ () { .   
  // wɔ nane...
}) .

Ku ɖe nusiwo wotsɔna ƒua gbe ŋu

Tsɔ nuɖuɖu siwo le tsia dzi kpe ɖe nusianu kloe ŋu le Bootstrap me kple kpeɖeŋutɔ bɔbɔe sia. Bootstrap na bliboe dropdown menu kpekpeɖeŋu le le navbar, tabs, kple atikekuiwo.

Kpɔɖeŋuwo

Zi nav ƒe kadodo siwo le navbar kple atikekui siwo le ete la dzi be nàdo nusiwo le ete la kpɔ.

• Kadodo si wozãna edziedzi
• Nusiwo wotsɔna ƒua gbe
  • Action
  • Another action
  • Something else here
  • Separated link
• Nusiwo wotsɔna ƒua gbe 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Nusiwo wotsɔna ƒua gbe 3
  • Action
  • Another action
  • Something else here
  • Separated link

bootstrap-dropdown.js zazã

Yɔ nusiwo le fli dzi la to javascript dzi:

$ ( '.dropdown-trɔtrɔ' ). si le fli dzi () .

Dzesidede dzesiwo

Be nàtsɔ dropdown dɔwɔwɔ akpe ɖe element ɖesiaɖe ŋu kaba la, ɖeko nàtsɔe akpe ɖe eŋu data-toggle="dropdown"eye bootstrap dropdown ɖesiaɖe si sɔ la awɔ dɔ le eɖokui si.

<ul klass = "nav nav-tikewo" > 
  <li class = "dɔwɔwɔ" ><a href = "#" > Kadodo si nɔa anyi edziedzi </a></li>  
  <li klass = "nusiwo le tsia dzi" id = "menu1" >  
    <a klass = "ɖe-trɔtrɔ" data-tɔtrɔ = "aɖiɖiɖeme" href = "#menu1" >   
      Nusiwo wotsɔna ƒua gbe
      <b klass = "dzikpɔkpɔ" ></b> 
    </a>
    <ul klass = "nusiwo le tsia dzi" > 
      <li><a href = "#" > Nuwɔna </a></li> 
      <li><a href = "#" > Nuwɔna bubu </a></li> 
      <li><a href = "#" > Nu bubu aɖe le afisia </a></li> 
      <li klass = "mamã" </li> 
      <li><a href = "#" > Kadodo si woɖe ɖe vovo </a></li> 
    </ul> ƒe nyawo
  </li> ƒe akpa aɖe
  ...
</ul> ƒe nyawo

Be URL-wo nanɔ anyi nyuie la, zã data-targetnɔnɔmea ɖe href="#".

<ul klass = "nav nav-tikewo" > 
  <li klass = "nusiwo le tsia dzi" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" nyatakaka-taɖodzinu = "#" href = "mɔ/yi/axa.html" >    
      Nusiwo wotsɔna ƒua gbe
      <b klass = "dzikpɔkpɔ" ></b> 
    </a>
    <ul klass = "nusiwo le tsia dzi" > 
      ...
    </ul> ƒe nyawo
  </li> ƒe akpa aɖe
</ul> ƒe nyawo

Mɔnuwo

$().dropdown () .

Programatic api na menuwo ƒe dɔwɔwɔ na navbar alo tabbed navigation si wona.

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.

Kpɔɖeŋu navbar kple scrollspy

Yi teƒe si le ete la eye nàkpɔ mɔfiame yeyea. Woade dzesi nu sue siwo le fli dzi la hã. Tee kpɔ!

bootstrap-scrollspy.js zazã

Yɔ agbalẽxatsaxatsa la to javascript dzi:

$ ( '#navbar' ). agbalẽxatsaxatsa () .

Dzesidede dzesiwo

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

<ŋutilã data-spy = "ʋuʋu" > ... </ŋutilã>  

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:

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

Tiatiawɔblɔɖewo

Nudzɔdzɔwo

Plugin sia tsɔa tab kple pill ƒe dɔwɔwɔ kabakaba, si trɔna kpena ɖe eŋu hena tɔtrɔ to nutoa me nyatakakawo me.

Kpɔɖeŋu tabwo

Zi tab siwo le ete dzi be nàtrɔ asi le akpa ɣaɣlawo dome, to menu siwo le ete dzi gɔ̃ hã.

• Aƒeme
• Ŋuti nya
• Nusiwo wotsɔna ƒua gbe
  • @fat
  • @mdo

Bootstrap-tab.js zazã

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

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

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

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

Dzesidede dzesiwo

Àte ŋu awɔ tab alo pill navigation dɔ javascript aɖeke ŋɔŋ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ɔ.

<ul klass = "nav nav-tabs" > 
  <li><a href = "#aƒe" nyatakaka-trɔtrɔ = "tab" > Aƒe </a></li>  
  <li><a href = "#nyatakakadzraɖoƒe" data-toggle = "tab" > Nɔnɔmetata </a></li>  
  <li><a href = "#gbedasiwo" data-toggle = "tab" > Gbedasiwo </a></li>  
  <li><a href = "#ɖoɖowo" data-toggle = "tab" > Ðoɖowo </a></li>  
</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.

<ul klass = "nav nav-tabs" id = "nyeTab" >  
  <li klass = "dɔwɔwɔ" ><a href = "#aƒe" > Aƒe </a></li>  
  <li><a href = "#nyatakakadzraɖoƒe" > Nɔnɔmetata </a></li> 
  <li><a href = "#gbedasiwo" > Gbedasiwo </a></li> 
  <li><a href = "#ɖoɖowo" > Ðoɖowo </a></li> 
</ul> ƒe nyawo
 
<div klass = "tab-menyawo" > 
  <div klass = "tab-pane le dɔ wɔm" id = "aƒe" > ... </div>  
  <div klass = "tab-pane" id = "nɔnɔmetata" > ... </div>  
  <div klass = "tab-pane" id = "gbedasiwo" > ... </div>  
  <div klass = "tab-pane" id = "ɖoɖowo" > ... </div>  
</div> ƒe nyawo
 
<ŋɔŋlɔdzesi>
  $ ( dɔwɔwɔ () { .  
    $ ( '#nyeTab a:mlɔetɔ' ). tab ( 'ɖee fia' );
  }) .
</script> ƒe nyawo

Nudzɔdzɔwo

$ ( 'a [nyatakaka-trɔtrɔ="tab"]' ). on ( 'woɖee fia' , dɔwɔwɔ ( e ) { .   
  e . taɖodzinu // tab si wowɔ dɔ le
  e . relatedTarget // tab si do ŋgɔ
}) .

Le Dɔwɔnu ƒe Aɖaŋuɖoɖowo Ŋu

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.

Dɔwɔnu ƒe Aɖaŋuɖoɖowo zazã ƒe kpɔɖeŋu

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

bootstrap-tooltip.js zazã

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

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

Tiatiawɔblɔɖewo

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.

<a href = "#" rel = "dɔwɔnu ƒe aɖaŋuɖoɖo" title = "dɔwɔnu ƒe aɖaŋuɖoɖo gbãtɔ" > 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.

$ ( '#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.

$ ( '#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ɔa element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo.

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

Ku ɖe popovers ŋu

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.

* Ebia be woatsɔ Tooltip ade eme

Kpɔɖeŋu hover popover

Tsɔ asi ɖo abɔta la dzi be nàdze popover la gɔme.

Bootstrap-popover.js zazã

Na popovers nawɔ dɔ to javascript dzi:

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

Tiatiawɔblɔɖewo

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.

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

.popover('ɣla') .

Ɣla elementwo ƒe popover aɖe.

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

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

Trɔ asi le elements popover ŋu.

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

Ku ɖe nuxlɔ̃amewo ŋu

Nuxlɔ̃ame ƒe kpeɖeŋutɔ nye klass sue aɖe si wotsɔna tsɔa dɔwɔwɔ kplikplikpli kpena ɖe nuxlɔ̃amewo ŋu.

Kpɔɖeŋu nuxlɔ̃amewo

Nuxlɔ̃ame ƒe kpeɖeŋutɔa wɔa dɔ le nuxlɔ̃ame gbedasi siwo woɖona edziedzi dzi, eye wòxea mɔ na gbedasiwo.

bootstrap-alert.js zazã

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

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

<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 nu.

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

$ ( '#nye-nuxlɔ̃ame' ). bind ( 'tu' , dɔwɔwɔ () { .   
  // wɔ nane...
}) .

Ku ɖe

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.

Kpɔɖeŋuwo zazã

Zã buttons plugin na nɔnɔmewo kple toggles.

bootstrap-button.js zazã

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

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

<!-- Tsɔ data-toggle="bɔt" kpe ɖe eŋu be nàwɔ tɔtrɔ le abɔta ɖeka dzi -->
<button class = "btn" data-toggle = "bɔt" > Trɔtrɔ Ðeka </button>  
 
<!-- Tsɔ data-toggle="buttons-checkbox" kpe ɖe eŋu na checkbox ƒe atsyã ƒe tɔtrɔ le btn-group --> dzi
<div klass = "btn-ƒuƒoƒo" nyatakaka-trɔtrɔ = "bɔtwo-dzesiwo ƒe aɖaka" >  
  <bɔt ƒe hatsotso = "btn" > Miame </bɔt> 
  <button class = "btn" > Titina </bɔt> 
  <button class = "btn" > Nuɖusi </button> 
</div> ƒe nyawo
 
<!-- Tsɔ data-toggle="buttons-radio" kpee na radio ƒe atsyã ƒe tɔtrɔ le btn-group -->
<div klass = "btn-ƒuƒoƒo" nyatakaka-trɔtrɔ = "bɔtwo-radio" >  
  <bɔt ƒe hatsotso = "btn" > Miame </bɔt> 
  <button class = "btn" > Titina </bɔt> 
  <button class = "btn" > Nuɖusi </button> 
</div> ƒe nyawo

Mɔnuwo

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

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

<bɔt ƒe hatsotso = "btn" nyatakaka-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.

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

<button class = "btn" nyatakaka-wu-nuŋɔŋlɔ = "wowu enu!" > ... </a dzesi>   
<ŋɔŋlɔdzesi>
  $ ( '.btn' ). button ( 'wu enu' ) .
</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:

Bootstrap-collapse.js zazã

Na wòawɔ dɔ to javascript dzi:

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

Tiatiawɔblɔɖewo

Dzesidede dzesiwo

Ð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.

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

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.

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

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

$ ( '#nye si woate ŋu aƒo ƒu' ). on ( 'ɣla' , dɔwɔwɔ () { .   
  // wɔ nane...
}) .

Ku ɖe

A generic plugin na kekeli to elementwo me. Dzidzɔkpɔkpɔ ƒe nuwɔna aɖe.

Kpɔɖeŋu carousel

Kpɔ slideshow si le ete la ɖa.

Gbãtɔ ƒe Nɔnɔmetata Suewo ƒe dzeside

Cras justo odio, dapibus ac facilisis le, egestas eget quam. Donec id elit non mi porta gravida le eget metus me. Nullam id dolor id nibh ultricies ʋuwo ut id elit.

Evelia ƒe Nɔnɔmetata suewo ƒe dzeside

Cras justo odio, dapibus ac facilisis le, egestas eget quam. Donec id elit non mi porta gravida le eget metus me. Nullam id dolor id nibh ultricies ʋuwo ut id elit.

Etɔ̃lia Nɔnɔmetata suewo ƒe dzeside

Cras justo odio, dapibus ac facilisis le, egestas eget quam. Donec id elit non mi porta gravida le eget metus me. Nullam id dolor id nibh ultricies ʋuwo ut id elit.

‹ . › Ƒe 1999 me.

Wozãa bootstrap-carousel.js

Ƒo ka to javascript dzi:

$ ( '.ʋuʋudedi' ). carousel ƒe ʋuƒo () .

Tiatiawɔblɔɖewo

Dzesidede dzesiwo

Wozãa nyatakaka ƒe nɔnɔmewo na conrol siwo do ŋgɔ kple esiwo kplɔe ɖo. Kpɔ kpɔɖeŋu ƒe dzeside si le ete la ɖa.

<div id = "nyeCarousel" klass = "carousel ƒe ʋuʋudedi" >  
  <!-- Carousel nuawo -->
  <div klass = "carousel-ememetɔ" > 
    <div klass = "nu si le dɔ wɔm" > ... </div> 
    <div klass = "nu" > ... </div> 
    <div klass = "nu" > ... </div> 
  </div> ƒe nyawo
  <!-- Ʋuʋudedi nav -->
  <a klass = "carousel-dziɖuɖu miame" href = "#nyeCarousel" data-slide = "do ŋgɔ" > ‹ </a>   
  <a klass = "carousel-dziɖuɖu ƒe gomenɔamesi" href = "#nyeCarousel" data-slide = "si kplɔe ɖo" > › </a>   
</div> ƒe nyawo

Mɔnuwo

.carousel(tiatiawɔnuwo) .

Edzea carousel la gɔme kple tiatia siwo woate ŋu atia objecteye wòdzea gasɔdodo gɔme to nuawo me.

$ ( '.ʋuʋudedi' ). carousel ƒe ʋuƒo ({ .
  dometsotso : 2000 
}) .

.carousel('ɣeyiɣi ƒe tsatsam') .

Tsitsatsa to carousel-nuawo me tso miame yi ɖusime.

.carousel('tɔ vie') .

Exea mɔ na carousel la be wòagazɔ to nuwo me o.

.carousel(xexlẽdzesi) .

Trɔ carousel la ɖe frame aɖe koŋ dzi (0 si wotu ɖe edzi, si sɔ kple array).

.carousel('do ŋgɔ') .

Tsitre ɖe nusi do ŋgɔ ŋu.

.carousel('si kplɔe ɖo')

Tsitre ɖe nu si kplɔe ɖo ŋu.

Nudzɔdzɔwo

Bootstrap ƒe carousel klass ɖea nudzɔdzɔ eve ɖe go na hooking ɖe carousel dɔwɔwɔ me.

Ku ɖe

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.

Kpɔɖeŋu

Dze nuŋɔŋlɔ gɔme le akpa si le ete la me be nàɖe nusiwo do ŋgɔ na nuŋɔŋlɔa afia.

bootstrap-typeahead.js zazã

Yɔ typeahead to javascript dzi:

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

Tiatiawɔblɔɖewo

Dzesidede dzesiwo

Tsɔ nyatakaka ƒe nɔnɔmewo kpee be nàŋlɔ element aɖe si me typeahead ƒe dɔwɔwɔ le la agbalẽ me.

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

Mɔnuwo

.typeahead(tiatiawɔnuwo) .

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