Plugin na biso ya Modal ezali super slim kozua na plugin ya modal js ya bonkoko, kozua soin spécial ya ko inclure kaka fonctionnalité nue oyo tosengi awa na twitter.

Kozwa

Kosalela bootstrap-modal

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

Makambo oyo okoki kopona

Nkombo	lolenge	mbeba	ndimbola
fond d’écran	boolean, molongo	lokuta	Ezali na élément moko ya modal-backdrop. Botia fond d'écran na "static"soki olingi te modal ekangama tango fond d'écran ezali ko cliquer.
clavier ya kosala	boolean	lokuta	Ekangaka modal tango ba fingi touche ya escape
kolakisa	boolean	lokuta	Efungolaka modal na initialisation ya classe

Kosala bilembo

Okoki ko activer ba modals na page na yo facilement sans que okoma ata ligne moko ya javascript. Pesa kaka élément data-controls-modalattribut oyo ekokani na id ya élément modal, et quand o cliqué, eko lancer modal na yo. Pona kobakisa ba options modales, kotia kaka yango lokola ba attributs ya ba données lokola.

<a class = "btn" data-controls-modal = "modale na ngai" data-backdrop = "statique" > Modal ya kobanda </a>    

Liyebisi Soki olingi modal na yo e animer na kati mpe libanda, bakisa kaka .fadeclasse na .modalélément na yo (tala démonstration mpo na komona yango na action).

Ba méthodes ya kosala

.modal(ba options) .

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

$ ( '#modal na ngai' ). modal ({
  clavier : solo 
}) .

.modal('kobongola')

Manuellement ebalukaka modal moko.

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

.modal('lakisa') .

Manuellement efungolaka modal moko.

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

.modal('bomba') .

Manuellement ebombaka modal moko.

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

.modal(solo) .

Ezongisaka instance ya classe modal ya ba éléments.

$ ( '#modal na ngai' ). modal ( solo ) .

Liyebisi Na lolenge mosusu, oyo ekoki kozwama na $().data('modal').

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

$ ( '#modal na ngai' ). bind ( 'ebombami' , mosala () { .   
  // sala eloko moko ...
}) .

Demo ya kosala

Lancement ya Modal

Plugin oyo ezali mpo na kobakisa interaction ya kokita na barre ya likolo ya bootstrap to ba navigations ya tabbed.

Kozwa

Kosalela bootstrap-dropdown.js

$ ( '#barre ya likolo' ). oyo ezali kokita () .

Kosala bilembo

Mpo na kobakisa nokinoki mosala ya kokita na eloko nyonso ya nav, salelá data-dropdownattribut. Déroulant nionso ya bootstrap oyo ezali valide ekozala activé automatiquement.

<ul classe = "ba onglets" > 
  <li kelasi = "mosala" ><a href = "#" > Ndako </a></li>  
  <li class = "kokita" data-kokita = "kokita" >   
    <a href = "#" class = "kobongola-bokitani" > Bokitisami </a>  
    <ul class = "menu ya kokita" > 
      <li><a href = "#" > Lien ya mibale </a></li> 
      <li><a href = "#" > Eloko mosusu awa </a></li> 
      <li kelasi = "mokabola" </li> 
      <li><a href = "#" > Lien mosusu </a></li> 
    </ul>
  </li>
</ul>

Liyebisi Soki ui na yo ezali na ba dropdowns ebele, kanisá kobakisa data-dropdownattribut na élément ya récipient ya ntina mingi lokola .tabsto .topbar.

Ba méthodes ya kosala

$().esika ya kokita()

Api programatique mpo na ko activer ba menu mpo na topbar to navigation tabbed donnée.

Demo ya kosala

Plugin oyo ezali mpo na kobakisa interaction scrollspy (auto updating nav) na topbar ya bootstrap.

Kozwa

Kosalela bootstrap-scrollspy.js

$ ( '#barre ya likolo' ). scrollSpy () .

Kosala bilembo

Mpo na kobakisa na pete bizaleli ya scrollspy na nav na yo, bakisa kaka data-scrollspyattribut na .topbar.

<div class = "barre ya likolo" data-scrollspy = "scrollspy" > ... </div>   

Ba méthodes ya kosala

$ (). défilementSpy () .

Auto e activer ba boutons ya navigation na position ya défilement ya ba usagers.

$ ( 'nzoto > .barre ya likolo' ). scrollSpy () .

Liyebisi Ba balises ya anchor ya Topbar 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>.

.scrollSpy('kozongisa sika')

Scrollspy e cache ba boutons nav na ba coordonnées ya section pona performance. Soki oza na besoin ya ko mettre à jour cache oyo (probablement soki oza na contenus dynamique) benga kaka méthode oyo ya refresh. Soki osaleli attribut ya ba données pona ko définir scrollspy na yo, benga kaka refresh na nzoto.

$ ( 'nzoto' ). scrollSpy ( 'kozongisa sika' ) .

Demo ya kosala

Tala na navigation ya barre ya likolo na lokasa oyo.

Plugin oyo epesi fonctionnalité ya kobakisa pona ko gérer état ya bouton.

Kozwa

Kosalela bootstrap-buttons.js

$ ( '.ba tabs' ). bouton () .

Ba méthodes ya kosala

$().bouton('kobongola')

Toggles état ya kopusama. Epesi btn look oyo eza activé.

Liyebisi Okoki kofungola auto toggling ya bouton na kosalelaka data-toggleattribut.

<bouton classe = "btn" data-toggle = "kobongola" > ... </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.

<button class = "btn" data-loading-text = "kozwa biloko..." > ... </button>   

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

<bouton classe = "btn" data-complete-text = "esili!" > ... </bouton>   
<script>
  $('.btn').button('kosilisa')
</scrip>

Demo ya kosala

Ezali ko charger Demo Bobongola Demo

Plugin oyo ebakisi fonctionnalité ya tab na pilule ya mbangu, dynamique.

Kozwa

Kosalela bootstrap-tabs.js

$ ( '.ba tabs' ). ba onglets () .

Kosala bilembo

Okoki ko activer navigation ya onglet to ya pilili sans kokoma ata javascript moko te na kopesa bango kaka attribut data-tabsto .data-pills

 <ul class = "ba onglets" ba onglets-données = "ba onglets" > ... </ul>   

Ba méthodes ya kosala

$().tabs to $().pilili

Active fonctionnalité ya onglet na pilili pona conteneur donnée. Ba liens ya onglet esengeli ko référer ba id's na mokanda.

<ul classe = "ba onglets" > 
  <li class = "mosala" ><a href = "#ndako" > Ndako </a></li>  
  <li><a href = "#profil" > Profil </a></li> 
  <li><a href = "#messages" > Ba messages </a></li> 
  <li><a href = "#bobongisi" > Bobongisi </a></li> 
</ul>
 
<div class = "makambo ya pilili" > 
  <div class = "actif" id = "ndako" > ... </div>  
  <div id = "profil" > ... </div> 
  <div id = "ba sango" > ... </div> 
  <div id = "ba paramètres" > ... </div> 
</div>
 
<script>
  $ ( mosala () { .  
    $ ( '.ba tabs' ). ba onglets () .
  }) .
</script>

Makambo oyo esalemaki

Likambo	Ndimbola
kobongola	Evenement oyo ezo beta na changement ya onglet. Salelá event.targetmpe mpo na event.relatedTargetko cibler onglet actif mpe onglet actif ya kala respectivement.

$ ( '#.ba tabs' ). bind ( 'bobongola' , mosala ( e ) { .   
  e . cible // onglet activé
  e . relatedTarget // onglet ya kala
}) .

Demo ya kosala

• Ndako
• Profil
• Ba messages
• Ba paramètres
• Kokita ya nse
  • @mafuta
  • @mdo

Na kotalela plugin ya malamu mpenza ya jQuery.tipsy oyo ekomami na Jason Frame; twipsy ezali version ya sika, oyo etie motema na bilili te, esalela css3 mpo na ba animations, mpe ba data-attributes mpo na kobomba titre!

Kozwa

Kosalela bootstrap-twipsy.js

$ ( '#ndakisa' ). twipsy ( ba options ) .

Makambo oyo okoki kopona

Nkombo	lolenge	mbeba	ndimbola
kopesa bomoi na bomoi	boolean	ya solo	kosalela transition ya css fade na tooltip
retardNa	nimero	0.	retard liboso ya kolakisa tooltip (ms) .
kozongisa nsima	nimero	0.	retard liboso ya kobomba tooltip (ms) .
kozonga nsima	shene	'' .	makomi mpo na kosalela ntango motó ya likambo ya tooltip ezali te
esika ya kotya yango	shene	'likolo'	ndenge nini ko positionner tooltip - likolo | na nse | na gauche | malamu
html	boolean	lokuta	epesaka nzela na makambo ya html na kati ya tooltip
kofanda	boolean	lokuta	kosalela délégation ya événement na esika ya ba handlers ya événement moko moko
offset ya kosala	nimero	0.	pixel offset ya tooltip uta na élément cible
titre	molongo, mosala	'titre'	attribut to méthode ya kozua texte ya titre
kobandisa	shene	'kosala hover'.	ndenge nini tooltip e déclenché - hover | focus | mokanda
modèle ya kosala	shene	[marque ya liboso]	Modèle html oyo basalelaka mpo na kosala twipsy.

Liyebisi Ba options ya instance ya twipsy moko moko ekoki na ndenge mosusu kozala précisé na nzela ya bosaleli ya ba attributs ya ba données.

<a href = "#" data-placement = "na nse" rel = 'twipsy' title = 'Mwa makomi ya motó ya likambo' > makomi </a>    

Ba méthodes ya kosala

$().twipsy(ba options) .

Ezali kokangisa mosaleli ya twipsy na liboke ya biloko.

.twipsy('lakisa') .

Emonisaka twipsy moko ya ba éléments.

$ ( '#elemento' ). twipsy ( 'elakisaka' ) .

.twipsy('bomba') .

Ebombaka twipsy moko ya ba éléments.

$ ( '#elemento' ). twipsy ( 'bomba' ) .

.twipsy(ya solo) .

Ezongisaka instance ya classe ya twipsy ya ba éléments.

$ ( '#elemento' ). twipsy ( solo ) .

Liyebisi Na lolenge mosusu, oyo ekoki kozwama na $().data('twipsy').

Demo ya kosala

Plugin ya popover epesaka interface ya pete pona kobakisa ba popovers na application na yo. Ezali ko extend plugin bootstrap-twipsy.js , donc sala makasi ozua fichier wana lokola tango ozali ko inclure ba popovers na projet na yo!

Liyebisi Esengeli otia fisyé bootstrap-twipsy.js liboso ya bootstrap-popover.js.

Kozwa

Kosalela bootstrap-popover.js

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

Makambo oyo okoki kopona

Nkombo	lolenge	mbeba	ndimbola
kopesa bomoi na bomoi	boolean	ya solo	kosalela transition ya css fade na tooltip
retardNa	nimero	0.	retard liboso ya kolakisa tooltip (ms) .
kozongisa nsima	nimero	0.	retard liboso ya kobomba tooltip (ms) .
kozonga nsima	shene	'' .	makomi mpo na kosalela ntango motó ya likambo ya tooltip ezali te
esika ya kotya yango	shene	'malamu'	ndenge nini ko positionner tooltip - likolo | na nse | na gauche | malamu
html	boolean	lokuta	epesaka nzela na makambo ya html na kati ya tooltip
kofanda	boolean	lokuta	kosalela délégation ya événement na esika ya ba handlers ya événement moko moko
offset ya kosala	nimero	0.	pixel offset ya tooltip uta na élément cible
titre	molongo, mosala	'titre'	attribut to méthode ya kozua texte ya titre
makambo eza na kati	molongo, mosala	'ba données-contenu'.	molongo to lolenge ya kozwa makomi ya makambo oyo ezali na kati. soki moko te epesami, makambo ekozwama na attribut ya data-content.
kobandisa	shene	'kosala hover'.	ndenge nini tooltip e déclenché - hover | focus | mokanda
modèle ya kosala	shene	[marque ya liboso]	Modèle html oyo basalelaka mpo na kosala popover.

Liyebisi Ba options ya instance ya popover moko moko ekoki na ndenge mosusu kozala précisé na nzela ya bosaleli ya ba attributs ya ba données.

<a data-placement = "na nse" href = "#" kelasi = "likama ya btn" rel = "bobola" > makomi </a>    

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.

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

.popover('bomba') .

Ebombaka popover moko ya ba éléments.

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

Demo ya kosala

hover mpo na popover

Plugin ya alerte ezali classe super petite pona kobakisa fonctionnalité ya proche na ba alertes.

Kozwa

Kosalela bootstrap-alerts.js

$ ( ".nsango-ya-kebisi" ). kokebisa () .

Kosala bilembo

Bakisa kaka data-alertattribut na ba messages na yo ya alerte po opesa yango automatiquement fonctionnalité ya proche.

Makambo oyo okoki kopona

Nkombo	lolenge	mbeba	ndimbola
moponi	shene	'.kokanga'	Selecteur nini ya ko cibler pona kokanga alerte.

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.

$ ( ".nsango-ya-kebisi" ). alerte ( 'kokanga' ) .

Demo ya kosala