Javascript mpo na Bootstrap

Mema ba composants ya Bootstrap na bomoi —sikoyo na ba plugins 12 ya jQuery personnalisé.

Ba modaux

A rationalisé, mais flexible, kozua na plugin modal javascript ya bonkoko na kaka fonctionnalité minimum esengeli mpe ba défauts intelligents.

Ba dropdowns ya kokita

Bakisa ba menu ya kokita na pene na eloko nyonso na Bootstrap na plugin oyo ya pete. Bootstrap ezali na lisungi ya menu ya kokita mobimba na na navbar, ba onglets, mpe ba pilili.

Scrollspy ya kosala

Salelá scrollspy mpo na kosala mikolo oyo automatiquement ba liens oyo ezali na navbar na yo mpo na kolakisa lien oyo ezali kosala sikoyo na kotalela position ya défilement.

Ba onglets oyo ekoki ko changer

Salelá plugin oyo mpo na kosala ete ba onglets mpe ba pilili ezala na ntina mingi na kopesaka bango nzela ya kobongola na nzela ya ba panneaux ya ba tabbables ya makambo ya esika.

Batoli ya bisaleli

Bozui ya sika na plugin ya jQuery Tipsy, Tooltips etie motema te na bilili —basalelaka CSS3 mpo na ba animations mpe ba data-attributs mpo na kobomba titre ya esika.

Bapopovers * .

Bakisa ba superpositions ya mike ya contenus, lokola oyo ezali na iPad, na élément nionso pona ko loger ba informations secondaires.

* Esengi ete ba Tooltips ezala na kati

Ba messages ya kokebisa

Plugin ya alerte ezali classe moko ya moke mpo na kobakisa fonctionnalité ya proche na ba alertes.

Ba boutons

Sala mingi na ba boutons. Bouton ya contrôle ezo loba to kosala ba groupes ya ba boutons pona ba composants ebele lokola ba barres d'outils.

Kokwea

Bozua ba styles ya base na soutien flexible pona ba composants collapsibles lokola ba accordions na navigation.

Carrousel ya kosala

Salá esengo ya makambo nyonso oyo olingi kopesa diaporama ya makambo oyo ezali na kati.

Tyá liboso

Plugin ya moboko, oyo ebakisami na pete mpo na kosala nokinoki ba typeaheads ya elegan na bokoti ya makomi ya formulaire nyonso.

Ba transitions * .

Mpo na ba effets ya transition simple, kotia bootstrap-transition.js mbala moko mpo na ko glisser na ba modals to ko fade out ba alertes.

* Esengeli mpo na animation na ba plugins

Mitó likoló! Ba plugins nionso ya javascript esengaka version ya sika ya jQuery.

Na ntina na ba modals

A rationalisé, mais flexible, kozua na plugin modal javascript ya bonkoko na kaka fonctionnalité minimum esengeli mpe ba défauts intelligents.

Télécharger fichier

Ndakisa ya statique

Awa na se ezali na modal oyo esalemi na ndenge ya statique.

Démonstration en direct

Toggle modal moko via javascript na ko cliquer bouton oyo ezali awa na se. Ekokita mpe ekosila na kati longwa na likoló ya lokasa.

Lancer modal ya démonstration

Kosalela bootstrap-modal

Benga modal na nzela ya javascript:

  1. $ ( '#Modal na ngai' ). modal ( ba options ) .

Makambo oyo okoki kopona

Nkombo lolenge mbeba ndimbola
fond d’écran boolean ya solo Ezali na eleman moko ya modal-backdrop. Na lolenge mosusu, lakisa staticmpo na fond d'écran oyo ekangaka te modal na clic.
clavier ya kosala boolean ya solo Ekangaka modal tango ba fingi touche ya escape
kolakisa boolean ya solo Ezali kolakisa modal tango ebandisami.

Kosala bilembo

Okoki ko activer ba modals na page na yo facilement sans que okoma ata ligne moko ya javascript. Kaka kotiya data-toggle="modal"na élément ya contrôleur na data-target="#foo"to href="#foo"oyo ekokani na id ya élément modal, mpe tango o cliqué, eko lancer modal na yo.

Lisusu, mpo na kobakisa ba options na instance modal na yo, kotia yango kaka lokola ba attributs ya ba données ya kobakisa soit na élément ya contrôle soit na marquage modal yango moko.

  1. <a class = "btn" data-toggle = "modal" href = "#Modal na ngai" > Modale ya kobanda </a>
  1. <div classe = "bombami ya mode" id = "moda na ngai" >
  2. <div class = "motó ya-modal" >
  3. < lolenge ya bouton = "bouton" classe = "kokanga" data-dismiss = "modal" > × </bouton>
  4. <h3> Motó ya likambo ya modɛlɛ </h3>
  5. </div>
  6. <div classe = "nzoto-modale" >
  7. <p> Nzoto moko ya malamu... </p>
  8. </div>
  9. <div class = "modali-moda ya nse ya lokasa" >
  10. <a href = "#" classe = "btn" bolongolami ya ba données = "modal" > Bokanga </a>
  11. <a href = "#" class = "btn btn-primary" > Bomba mbongwana </a>
  12. </div>
  13. </div>
Mitó likoló! Soki olingi modal na yo e animer na kati mpe libanda, bakisa kaka .fadeclasse na .modalélément (tala démonstration mpo na komona oyo na action) mpe kotia bootstrap-transition.js.

Ba méthodes ya kosala

.modal(ba options) .

Active contenus na yo lokola modal. Andimi ba options moko ya option object.

  1. $ ( '#Modal na ngai' ). modal ({
  2. clavier : lokuta
  3. }) .

.modal('kobongola')

Manuellement ebalukaka modal moko.

  1. $ ( '#Modal na ngai' ). modal ( 'kobongola' ) .

.modal('lakisa') .

Manuellement efungolaka modal moko.

  1. $ ( '#Modal na ngai' ). modal ( 'lakisa' ) .

.modal('bomba') .

Manuellement ebombaka modal moko.

  1. $ ( '#Modal na ngai' ). modal ( 'bomba' ) .

Makambo oyo esalemaki

Classe modal ya Bootstrap e exposer mua ba événements pona ko crochet na fonctionnalité modal.

Likambo Ndimbola
kolakisa Evenement oyo ezo beta mbala moko tango showméthode ya instance ebengami.
oyo emonisami Evenement oyo ezo beta tango modal esalemi visible na usager (ekozela ba transitions ya css esila).
kobombana Evenement oyo ezo beta mbala moko tango hideméthode ya instance ebengami.
ya kobombana Evenement oyo ezo beta tango modal esili kobombama na mosaleli (ekozela ba transitions ya css esila).
  1. $ ( '#Modal na ngai' ). na ( 'ebombami' , mosala () {
  2. // sala eloko moko...
  3. }) .

Plugin ScrollSpy ezali mpo na kosala mikolo oyo automatiquement ba cibles nav na kotalela position ya défilement.

Télécharger fichier

Ndakisa navbar na scrollspy

Salá défilement na esika oyo ezali awa na nse mpe talá mise à jour ya navigation. Ba sous-éléments oyo ezali kokita ekozala mpe na elembo. Meká yango!

@mafuta

Leggings ya publicité keytar, brunch id art fête dolor labore. Pitchfork yr enim lo-fi avant ba teka qui. Tumblr ferme-à-mesa vélo droits ezala nini. Anim keffiyeh carles cardigan na mokili ya lelo. Velit seitan kiosque ya ba photos ya mcsweeney 3 loup sanza irure. Cosby chandail lomo jean short, williamsburg hoodie minim qui mbala mosusu oyoki bango te et cardigan fonds de fidélité culpa biodiesel wes anderson esthétique. Nihil tatoué accusamus, cred ironie biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa moustache patin, adipisicing fugiat velit mandefu ya fourchette. Freegan mandefu aliqua cupidatat vero ya mcsweeney. Cupidatat minei loko nisi, ea helvetica nulla carles. Tatoué cosby chandail camion ya biloko ya kolia, mcsweeney ya quis non freegan vinyl. Lo-fi wes anderson +1 na nzoto ya moto. Carles exercice non esthétique quis gentrifier. Brooklyn adipisicing bière ya maboko vice keytar deserunt.

moko

Occaecat commodo oyo ezali na biloko ya kolya. Fap artisanat bière deserunt skateboard ea. Lomo vélo droits adipisicing banh mi, velit ea sunt niveau prochain locavore café d'origine unique na magna veniam. Vinyle id ya vie ya likolo, echo parc consequat quis aliquip banh mi fourchette. Vero VHS est ya kopanzana. Consectetur nisi bricolage minim sac de messagerie. Cred ex na, durable delectus consectetur fanny pack iphone.

mibale

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 sac ya messenger marfa nini delectus camion ya biloko ya kolia. Sapiente synth id oyo ekanisami. Locavore sed helvetica cliche ironie, ba mbwa ya nkake oyo mbala mosusu oyoká bango te consequat hoodie sans gluten lo-fi fap aliquip. Labore elit placeat avant ba teka, terry richardson proident brunch nesciunt quis cosby chandail pariatur keffiyeh ut helvetica artisan. Cardigan bière artisanale seitan velit prêt. VHS chambray laboris ya ntango mokuse. Anim mollit minim commodo ullamco ba mbwa ya nkake.


Kosalela bootstrap-scrollspy.js

Benga scrollspy na nzela ya javascript:

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

Kosala bilembo

Pona kobakisa facilement comportement scrollspy na navigation na yo ya topbar, bakisa kaka data-spy="scroll"na élément oyo olingi o espionner (mingi mingi oyo ekozala nzoto).

  1. <nzoto data-spy = "kosala défilement" > ... </nzoto>
Mitó likoló! Ba liens ya Navbar esengeli kozala na ba cibles id oyo ekoki ko résoudre. Na ndakisa, a <a href="#home">home</a>esengeli kokokana na eloko moko oyo ezali na dom lokola <div id="home"></div>.

Ba méthodes ya kosala

.scrollspy('kozongisa sika')

Ntango ozali kosalela scrollspy elongo na kobakisa to kolongola biloko na DOM, ekosɛnga obenga lolenge ya kozongisa sika lokola boye:

  1. $ ( '[espion-données="kosala défilement"]' ). moko na moko ( mosala () { .
  2. var $spy = $ ( oyo ). scrollspy ( 'kozongisa sika' ) .
  3. });

Makambo oyo okoki kopona

Nkombo lolenge mbeba ndimbola
offset ya kosala nimero 10 Ba pixels ya ko offset depuis likolo tango ya ko calculer position ya défilement.

Makambo oyo esalemaki

Likambo Ndimbola
kosala mosala Evenement oyo ezo beta tango nionso eloko ya sika ekomi activé na scrollspy.

Plugin oyo ebakisi fonctionnalité ya tab na pill ya mbangu, dynamique pona ko transitionner na nzela ya contenus local.

Télécharger fichier

Ndakisa ya ba onglets

Finá na ba onglets oyo ezali awa na nse mpo na kobongola kati na ba panneaux oyo ebombami, ata na nzela ya ba menu oyo ezali kokita.

Denim cru mbala mosusu oyoki bango te ba jean shorts Austin. Nesciunt tofu stumptown aliqua, bopeto ya masta ya synth rétro. Cliché ya moustache tempor, williamsburg carles helvetica ya vegan. Reprehenderit boucher rétro keffiyeh synth ya kokanga ndoto. Pull ya cosby eu banh mi, qui irure terry richardson ex calmar. Aliquip placeat salvia cillum na iphone. Seitan aliquip quis cardigan bilamba ya américain, boucher 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.


Kosalela bootstrap-tab.js

Activer ba onglets tabbables na nzela ya javascript (onglet moko na moko esengeli ko activer yango moko):

  1. $ ( '#Tab na ngai a' ). finá ( mosala ( e ) { .
  2. e . kopekisaDefault ();
  3. $ ( oyo ). tab ( 'lakisa' );
  4. }) .

Okoki ko activer ba onglets moko moko na ba façons ebele:

  1. $ ( '#Tab na ngai a[href="#profil"]' ). tab ( 'lakisa' ); // Pona tab na kombo
  2. $ ( '#Tab na ngai a:ya liboso' ). tab ( 'lakisa' ); // Pona tab ya liboso
  3. $ ( '#Tab na ngai a:ya nsuka' ). tab ( 'lakisa' ); // Pona tab ya suka
  4. $ ( '#Tab na ngai li:eq(2) a' ). tab ( 'lakisa' ); // Pona tab ya misato (0-indexé)

Kosala bilembo

Okoki ko activer navigation ya onglet to ya pilili sans kokoma ata javascript moko te na ko préciser kaka data-toggle="tab"to data-toggle="pill"na élément moko. Kobakisa ba classes mpe na onglet navekosalela styling ya onglet bootstrap.nav-tabsul

  1. <ul kelasi = "nav nav-tabs" >
  2. <li><a href = "#ndako" data-toggle = "tab" > Ndako </a></li>
  3. <li><a href = "#profil" data-toggle = "onglet" > Profil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Ba sango </a></li>
  5. <li><a href = "#bobongisi" data-toggle = "tab" > Bobongisi </a></li>
  6. </ul>

Ba méthodes ya kosala

$().tab

Ezali ko activer élément ya onglet na conteneur ya contenus. Onglet esengeli kozala na soit a soit data-targetun hrefciblant node ya conteneur na DOM.

  1. <ul classe = "nav nav-tabs" id = "Onglet na ngai" >
  2. <li class = "active" ><a href = "#ndako" > Ndako </a></li>
  3. <li><a href = "#profil" > Profil </a></li>
  4. <li><a href = "#messages" > Ba messages </a></li>
  5. <li><a href = "#bobongisi" > Bobongisi </a></li>
  6. </ul>
  7.  
  8. <div class = "makambo ya tab" >
  9. <div class = "tab-pane ezali kosala" id = "ndako" > ... </div>
  10. <div class = "tab-pane" id = "profil" > ... </div>
  11. <div class = "tab-pane" id = "ba messages" > ... </div>
  12. <div class = "tab-pane" id = "ba paramètres" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( mosala () { .
  17. $ ( '#Tab na ngai a:ya nsuka' ). tab ( 'lakisa' );
  18. }) .
  19. </script>

Makambo oyo esalemaki

Likambo Ndimbola
kolakisa Evenement oyo ezo beta na tab show, mais avant onglet ya sika elakisama. Salelá event.targetmpe mpo na event.relatedTargetko cibler onglet active mpe onglet active ya kala (soki ezali) respectivement.
oyo emonisami Evenement oyo ezo beta na tab show sima ya tab moko elakisama. Salelá event.targetmpe mpo na event.relatedTargetko cibler onglet active mpe onglet active ya kala (soki ezali) respectivement.
  1. $ ( 'a[kobongola-ba-donnée="tab"]' ). na ( 'elakisami' , mosala ( e ) {
  2. e . cible // onglet activé
  3. e . relatedTarget // onglet ya kala
  4. }) .

Na ntina na Batoli ya Bisaleli

Inspiré na plugin ya malamu mpenza ya jQuery.tipsy oyo ekomami na Jason Frame; Ba toli ya bisaleli ezali version ya sika, oyo etie motema na bilili te, esalela css3 mpo na ba animations, mpe ba data-attributs mpo na kobomba titre ya esika.

Télécharger fichier

Ndakisa ya kosalela Tooltips

Botia maboko na ba liens oyo ezali awa na se mpo na komona ba toli ya bisaleli:

Pantalon serré niveau prochain keffiyeh probablement oyoki bango te. Photo cabine mandefu brut denim tipskrit sac messenger vegan stumptown. Ferme-à-mesa seitan, mcsweeney ya fixie durable quinoa 8-bit bilamba ya américain bazali na terry richardson vinyl chambray. Mandefu stumptown, cardigans banh mi lomo ba mbwa ya nkake. Tofu biodiesel williamsburg marfa, minei loko mcsweeney ya kosukola chambray vegan. Un vraiment artisan ironique quelque soit keytar , scenester ferme-à-mesa banksy Austin twitter manche freegan cred cru denim café d'origine unique viral.


Kosalela bootstrap-tooltip.js

Déclenchez tooltip na nzela ya javascript:

  1. $ ( '#ndakisa' ). tooltip ( ba options ) .

Makambo oyo okoki kopona

Nkombo lolenge mbeba ndimbola
animation ya kosala boolean ya solo kosalela transition ya css fade na tooltip
esika ya kotya yango molongo|mosala 'likolo' ndenge nini ko positionner tooltip - likolo | na nse | na gauche | malamu
moponi shene lokuta Soki moponi epesami, biloko ya tooltip ekopesama na ba cibles oyo elakisami.
titre molongo ya molongo | mosala '' . motuya ya titre ya liboso soki tag `title` ezali te
kobandisa shene 'kosala hover'. ndenge nini tooltip e déclenché - hover | focus | mokanda
kozelisa motango | moto ya likambo 0.

retard ya kolakisa pe kobomba tooltip (ms) - etali te type ya déclencheur manuel

Soki nimero moko epesami, retard esalemi na nyonso mibale kobomba/lakisa

Bokeli ya eloko ezali:delay: { show: 500, hide: 100 }

Mitó likoló! Ba options pona ba toli ya bisaleli moko moko ekoki na ndenge mosusu kozala précisé na nzela ya bosaleli ya ba attributs ya ba données.

Kosala bilembo

Mpo na bantina ya mosala, Tooltip mpe Popover data-apis ezali opt in. Soki olingi kosalela yango, lakisa kaka option ya moponi.

  1. <a href = "#" rel = "toli ya bisaleli" title = "toli ya bisaleli ya yambo" > kobalusa likolo na ngai </a>

Ba méthodes ya kosala

$().tooltip(ba options) .

Ezali kokangisa mosaleli ya tooltip na liboke ya biloko.

.tooltip('lakisa') .

Ezali kobimisa tooltip ya élément moko.

  1. $ ( '#elemento' ). tooltip ( 'lakisa' ) .

.tooltip('bomba') .

Ebombaka toli ya bisaleli ya eleman moko.

  1. $ ( '#elemento' ). tooltip ( 'bomba' ) .

.tooltip('kobongola')

Ezali kobongola toggle ya tooltip ya élément moko.

  1. $ ( '#elemento' ). tooltip ( 'kobongola' ) .

Na ntina na ba popovers

Bakisa ba superpositions ya mike ya contenus, lokola oyo ezali na iPad, na élément nionso pona ko loger ba informations secondaires.

* Esengi ete Tooltip ezala na kati

Télécharger fichier

Ndakisa ya hover popover

Botia loboko likolo ya bouton mpo na ko déclencher popover.


Kosalela bootstrap-popover.js

Activer ba popovers na nzela ya javascript:

  1. $ ( '#ndakisa' ). popover ( ba options ) .

Makambo oyo okoki kopona

Nkombo lolenge mbeba ndimbola
animation ya kosala boolean ya solo kosalela transition ya css fade na tooltip
esika ya kotya yango molongo|mosala 'malamu' ndenge nini ko positionner popover - likolo | na nse | na gauche | malamu
moponi shene lokuta soki moponi epesami, biloko ya tooltip ekopesama na ba cibles oyo elakisami
kobandisa shene 'kosala hover'. ndenge nini tooltip e déclenché - hover | focus | mokanda
titre molongo ya molongo | mosala '' . motuya ya titre ya liboso soki attribut `title` ezali te
makambo eza na kati molongo ya molongo | mosala '' . motuya ya makambo ya liboso soki attribut `data-content` ezali te
kozelisa motango | moto ya likambo 0.

retard ya kolakisa pe kobomba popover (ms) - etali te type ya déclencheur manuel

Soki nimero moko epesami, retard esalemi na nyonso mibale kobomba/lakisa

Bokeli ya eloko ezali:delay: { show: 500, hide: 100 }

Mitó likoló! Ba options pona ba popovers individuels ekoki alternativement précisé na nzela ya usage ya ba attributs ya ba données.

Kosala bilembo

Mpo na bantina ya mosala, Tooltip mpe Popover data-apis ezali opt in. Soki olingi kosalela yango, lakisa kaka option ya moponi.

Ba méthodes ya kosala

$().popover(ba options) .

Initialise ba popovers pona collection ya élément.

.popover('lakisa') .

Emonisaka popover moko ya ba éléments.

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

.popover('bomba') .

Ebombaka popover moko ya ba éléments.

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

.popover('kobongola')

Toggles an ba éléments popover.

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

Na ntina na makebisi

Plugin ya alerte ezali classe moko ya moke mpo na kobakisa fonctionnalité ya proche na ba alertes.

Kozwa

Ndakisa ya makebisi

Plugin ya ba alertes esalaka na ba messages ya alerte ya mbala na mbala, mpe ba messages ya ko bloquer.

Guacamole mosantu! Meilleur vérifier yo self, ozali komonana trop bien te.

Oh snap! Ozui erreur moko!

Bobongola oyo mpe oyo mpe meká lisusu. Duis mollis, est non commodo luctus, nisi erat ligula ya porte, eget lacinia odio sem nec elit. Cras mattis consectetur purus efandaka na fermentum.

Salá likambo yango To mpe salá boye


Kosalela bootstrap-alert.js

Activer démission ya alerte na nzela ya javascript:

  1. $ ( ".kebisi" ). kokebisa () .

Kosala bilembo

Bakisa kaka data-dismiss="alert"na bouton na yo ya kokanga mpo na kopesa automatiquement fonctionnalité ya kokanga alerte.

  1. <a classe = "kokanga" data-dismiss = "kebisi" href = "#" > &ntango; </a>

Ba méthodes ya kosala

$().alert() .

Enveloppe ba alertes nionso na fonctionnalité ya proche. Pona kozala na ba alertes na yo animation libanda tango ekangami, sala que bazala na classe ya .fadepe .indéjà appliqué na bango.

.alert('kokanga')

Ekangaka alerte moko.

  1. $ ( ".kebisi" ). alerte ( 'kokanga' ) .

Makambo oyo esalemaki

Classe ya alerte ya Bootstrap e exposer mua ba événements pona ko crochet na fonctionnalité ya alerte.

Likambo Ndimbola
kokanga Evenement oyo ezo beta mbala moko tango closeméthode ya instance ebengami.
ekangami Evenement oyo ezo beta tango alerte ekangami (ekozela ba transitions ya css esila).
  1. $ ( '#kebisi-na ngai' ). bind ( 'ekangama' , mosala () { .
  2. // sala eloko moko...
  3. }) .

Pene

Sala mingi na ba boutons. Bouton ya contrôle ezo loba to kosala ba groupes ya ba boutons pona ba composants ebele lokola ba barres d'outils.

Télécharger fichier

Ndakisa ya kosalela

Salelá plugin ya ba boutons mpo na ba états mpe ba toggles.

Kozala na Leta
Toggle moko
Boîte de vérification
Radio

Kosalela bootstrap-button.js

Activer ba boutons na nzela ya javascript:

  1. $ ( '.nav-ba-tabs' ). bouton () .

Kosala bilembo

Ba attributs ya ba données ezali intégrale na plugin ya bouton. Tala code ya ndakisa oyo ezali awa na nse mpo na mitindo ndenge na ndenge ya bilembo.

  1. <!-- Bakisa data-toggle="button" mpo na ko activer toggling na bouton moko -->
  2. <button class = "btn" data-toggle = "bouton" > Bobaluki moko </bouton>
  3.  
  4. <!-- Bakisa data-toggle="buttons-checkbox" mpo na kobongola lolenge ya esika ya kotiya elembo na btn-group -->
  5. <div class = "btn-groupe" ba données-toggle = "boîte de contrôle-ba boutons" >
  6. <bouton classe = "btn" > Na loboko ya mwasi </bouton>
  7. <bouton classe = "btn" > Kati </bouton>
  8. <bouton classe = "btn" > Na loboko ya mobali </button>
  9. </div>
  10.  
  11. <!-- Bakisa data-toggle="buttons-radio" mpo na kobongola lolenge ya radio na btn-group -->
  12. <div class = "btn-groupe" ba données-toggle = "ba boutons-radio" >
  13. <bouton classe = "btn" > Na loboko ya mwasi </bouton>
  14. <bouton classe = "btn" > Kati </bouton>
  15. <bouton classe = "btn" > Na loboko ya mobali </button>
  16. </div>

Ba méthodes ya kosala

$().bouton('kobongola')

Toggles état ya kopusama. Epesaka bouton apparence que esili ko activer.

Mitó likoló! Okoki ko activer auto toggling ya bouton moko na kosalela data-toggleattribut.
  1. <bouton classe = "btn" data-toggle = "bouton" > ... </bouton>

$().button('kozwa')

Ebongisi état ya bouton na chargement - e désactiver bouton mpe e swap texte na chargement ya texte. Esengeli kolimbola makomi na eleman ya bouton na kosalelaka attribut ya ba données data-loading-text.

  1. <button class = "btn" data-loading-text = "kozwa biloko..." > ... </button>
Mitó likoló! Firefox ezo persister état désactivé na kati ya ba charges ya page . Likambo ya kosilisa likambo yango ezali ya kosalela autocomplete="off".

$().button('kozongisa na esika na yango')

Ezongisaka état ya bouton - ebongoli makomi na makomi ya ebandeli.

$().bouton(molongo) .

Réinitialiser état ya bouton - echanger texte na état nionso ya texte oyo e définir na ba données.

  1. <bouton classe = "btn" data-complete-text = "esili!" > ... </bouton>
  2. <script>
  3. $ ( '.btn' ) Ezali ndenge moko. bouton ( 'kosilisa' ) .
  4. </script>

Pene

Bozua ba styles ya base na soutien flexible pona ba composants collapsibles lokola ba accordions na navigation.

Télécharger fichier

* Esengi ete plugin ya Transitions ezala na kati.

Ndakisa ya accordéon

Na kosalelaka plugin ya collapse, totongaki widget ya style ya accordéon ya pete:

Anim pariatur cliche reprehenderit, enim eiusmod bomoi ya likolo accusamus terry richardson ad calmar. 3 mbwa ya zamba sanza officia aute, non cupidatat patin dolor brunch. Camion ya biloko ya kolia quinoa nesciunt laborum eiusmod. Brunch 3 mbwa ya zamba sanza tempor, sunt aliqua atie ndeke likolo na yango calmar café d'origine unique nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, mosala ya bière artisanat wes anderson cred nesciunt sapiente ea proident. Annonce vegan excepteur boucher vice lomo. Leggings occaecat bière artisanale ferme-à-mesa, brut denim esthétique synth nesciunt mbala mosusu oyoká te bango accusamus labore durable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod bomoi ya likolo accusamus terry richardson ad calmar. 3 mbwa ya zamba sanza officia aute, non cupidatat patin dolor brunch. Camion ya biloko ya kolia quinoa nesciunt laborum eiusmod. Brunch 3 mbwa ya zamba sanza tempor, sunt aliqua atie ndeke likolo na yango calmar café d'origine unique nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, mosala ya bière artisanat wes anderson cred nesciunt sapiente ea proident. Annonce vegan excepteur boucher vice lomo. Leggings occaecat bière artisanale ferme-à-mesa, brut denim esthétique synth nesciunt mbala mosusu oyoká te bango accusamus labore durable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod bomoi ya likolo accusamus terry richardson ad calmar. 3 mbwa ya zamba sanza officia aute, non cupidatat patin dolor brunch. Camion ya biloko ya kolia quinoa nesciunt laborum eiusmod. Brunch 3 mbwa ya zamba sanza tempor, sunt aliqua atie ndeke likolo na yango calmar café d'origine unique nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, mosala ya bière artisanat wes anderson cred nesciunt sapiente ea proident. Annonce vegan excepteur boucher vice lomo. Leggings occaecat bière artisanale ferme-à-mesa, brut denim esthétique synth nesciunt mbala mosusu oyoká te bango accusamus labore durable VHS.

Kosalela bootstrap-collapse.js

Bofungola na nzela ya javascript:

  1. $ ( ".kokwea" ). kokwea () .

Makambo oyo okoki kopona

Nkombo lolenge mbeba ndimbola
moboti moponi lokuta Soki selecteur alors ba éléments nionso collapsible na se ya parent oyo elakisami ekokangama tango eloko oyo collapsible elakisami. (ekokani na bizaleli ya bonkɔkɔ ya accordéon)
kobongola makambo boolean ya solo Ebalusaka élément collapsible na invocation

Kosala bilembo

Bakisa kaka data-toggle="collapse"na data-targetélément moko na pona ko assigner automatiquement contrôle ya élément collapsible. Attribut data-targetendimi selecteur ya css mpo na kosalela collapse na yango. Bozala sûr ya kobakisa classe collapsena élément collapsible. Soki olingi ete efungwama na ndenge ya liboso, bakisá kelasi ya kobakisa in.

  1. <bouton classe = "btn btn-danger" data-toggle = "kokwea" ba données-cible = "#demo" >
  2. simple oyo ekoki kokangama
  3. </bouton>
  4.  
  5. <div id = "demo" classe = "kokwea na" > ... </div>
Mitó likoló! Mpo na kobakisa boyangeli ya etuluku lokola accordéon na contrôle collapsible, bakisa attribut ya ba données data-parent="#selector". Tala démonstration po omona likambo oyo na action.

Ba méthodes ya kosala

.collapse(ba options) .

Active contenus na yo lokola élément collapsible. Andimi ba options moko ya option object.

  1. $ ( '#na ngaiEkoki kokangama' ). kokwea ({
  2. toggle : lokuta
  3. }) .

.collapse('kobongola')

Ezali kobongola eloko oyo ekoki kokangama mpo na kolakisa to kobombama.

.collapse('lakisa') .

Ezali kolakisa eleman moko oyo ekoki kokangama.

.collapse('bomba') .

Ebombaka eloko moko oyo ekoki kokangama.

Makambo oyo esalemaki

Classe ya collapse ya Bootstrap e exposer mua ba événements pona ko crochet na fonctionnalité ya collapse.

Likambo Ndimbola
kolakisa Evenement oyo ezo beta mbala moko tango showméthode ya instance ebengami.
oyo emonisami Evenement oyo ezo beta tango élément ya collapse esalemi visible na usager (ekozela ba transitions ya css esila).
kobombana Evenement oyo ebetamaka mbala moko tango hideméthode ebengami.
ya kobombana Evenement oyo ezo beta tango élément ya collapse ebombami na mosaleli (ekozela ba transitions ya css esila).
  1. $ ( '#na ngaiEkoki kokangama' ). na ( 'ebombami' , mosala () {
  2. // sala eloko moko...
  3. }) .

Pene

Plugin ya moboko, oyo ebakisami na pete mpo na kosala nokinoki ba typeaheads ya elegan na bokoti ya makomi ya formulaire nyonso.

Télécharger fichier

Ndakisa

Bandá kokoma na esika oyo ezali awa na nse mpo na kolakisa ba résultats ya typeahead.


Kosalela bootstrap-typeahead.js

Benga typeahead na nzela ya javascript:

  1. $ ( '.kokoma liboso' ). kokoma liboso () .

Makambo oyo okoki kopona

Nkombo lolenge mbeba ndimbola
esika array ya biloko [ ] . Source ya ba données ya kotuna contre.
biloko nimero 8 Max nombre ya biloko oyo esengeli kolakisa na dropdown.
mosali ya boyokani mosala insensible na ba lettres minene Méthode oyo basalelaka pona koyeba soki query moko ekokani na eloko moko. Andimi argument moko, oyo itemcontre oyo esengeli komeka query. Kokota na motuna ya lelo na this.query. Zongisa boolean truesoki requête ezali match.
mobongisi-nzela mosala boyokani ya sikisiki,
oyo ezali na ba lettres minene te,
oyo ezali na ba lettres minene te
Méthode oyo basalelaka pona ko trier ba résultats autocomplètes. Andimi argument moko itemsmpe ezali na portée ya instance ya typeahead. Bosala référence na motuna ya lelo na this.query.
eloko oyo emonisaka makambo mingi mosala ezo lakisa ba matchs nionso ya défaut Méthode oyo basalelaka pona ko souligner ba résultats autocomplètes. Andimi argument moko itemmpe ezali na portée ya instance ya typeahead. Esengeli kozongisa html.

Kosala bilembo

Bakisa ba attributs ya ba données pona ko enregistrer élément na fonctionnalité typeahead.

  1. < lolenge ya bokoti = "mokomi" data-provide = "typeahead" >

Ba méthodes ya kosala

.typeahead(ba options) .

Ebandisaka entrée na typeahead.