Plugin modal nou an se yon fason super mens sou Plugin modal js tradisyonèl la, pran swen espesyal pou mete sèlman fonksyonalite vid ke nou mande isit la nan twitter.

Telechaje

Sèvi ak bootstrap-modal

$ ( '#my-modal' ). modal ( opsyon )

Opsyon

Non	kalite	default	deskripsyon
seri	boolean, fisèl	fo	Gen ladann yon eleman modal-backdrop. Mete seri a "static"si ou pa vle modal la fèmen lè yo klike sou seri a.
klavye	booleyen	fo	Fèmen modal la lè yo peze kle chape
montre	booleyen	fo	Ouvè modal sou inisyalizasyon klas la

Marke

Ou ka aktive modal sou paj ou a fasil san w pa bezwen ekri yon sèl liy javascript. Jis bay yon eleman yon data-controls-modalatribi ki koresponn ak yon id eleman modal, epi lè klike sou, li pral lanse modal ou a. Pou ajoute opsyon modal, jis enkli yo kòm atribi done tou.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Lanse modal </a>    

Avi Si ou vle modal ou a anime nan ak soti, jis ajoute yon .fadeklas nan .modaleleman ou a (al gade nan Demo a pou wè sa a an aksyon).

Metòd

.modal(opsyon)

Aktive kontni ou kòm yon modal. Aksepte yon opsyon opsyonèl object.

$ ( '#my-modal' ). modal ({
  klavye : vre 
})

.modal('toggle')

Manyèlman aktive yon modal.

$ ( '#my-modal' ). modal ( 'toggle' )

.modal('montre')

Manyèlman ouvè yon modal.

$ ( '#my-modal' ). modal ( 'montre' )

.modal('kache')

Manyèlman kache yon modal.

$ ( '#my-modal' ). modal ( 'kache' )

.modal(vre)

Retounen yon egzanp klas modal eleman.

$ ( '#my-modal' ). modal ( vre )

Avi Altènativman, sa a ka rekipere ak $().data('modal').

Evènman

Klas modal Bootstrap a ekspoze kèk evènman pou branche nan fonksyonalite modal.

Evènman	Deskripsyon
montre	Evènman sa a dife imedyatman lè yo showrele metòd egzanp lan.
montre	Evènman sa a te tire lè modal la te fè vizib itilizatè a (ap tann pou tranzisyon css fini).
kache	Evènman sa a te tire imedyatman lè yo hidete rele metòd egzanp lan.
kache	Evènman sa a revoke lè modal la fini kache pou itilizatè a (ap tann pou tranzisyon CSS fini).

$ ( '#my-modal' ). mare ( 'kache' , fonksyon () {   
  // fè yon bagay ...
})

Demo

Lanse Modal

Plugin sa a se pou ajoute entèraksyon dropdown nan topbar bootstrap la oswa navigasyon onglet yo.

Telechaje

Sèvi ak bootstrap-dropdown.js

$ ( '#topbar' ). dropdown ()

Marke

Pou ajoute byen vit fonksyonalite dropdown nan nenpòt eleman nav, sèvi ak data-dropdownatribi a. Nenpòt dropdown valab bootstrap pral otomatikman aktive.

<ul klas = "onglè" > 
  <li class = "active" ><a href = "#" > Kay </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Dropdown </a>  
    <ul class = "meni dewoulman" > 
      <li><a href = "#" > Segondè lyen </a></li> 
      <li><a href = "#" > Yon lòt bagay isit la </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Yon lòt lyen </a></li> 
    </ul>
  </li>
</ul>

Avi Si ui ou a gen plizyè dropdowns, konsidere ajoute data-dropdownatribi a nan yon eleman veso ki pi enpòtan tankou .tabsoswa .topbar.

Metòd

$().dropdown()

Yon API programatik pou aktive meni pou yon ba anlè oswa navigasyon onglet.

Demo

Plugin sa a se pou ajoute entèraksyon scrollspy (oto aktyalizasyon nav) nan topbar bootstrap la.

Telechaje

Sèvi ak bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

Marke

Pou ajoute fasilman konpòtman scrollspy nan nav ou, jis ajoute data-scrollspyatribi a nan .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

Metòd

$().scrollSpy()

Oto aktive bouton navigasyon pa itilizatè pozisyon woulo liv.

$ ( 'kò > .topbar' ). scrollSpy ()

Avi Topbar tag jete lank yo dwe gen sib id ki ka rezoud. Pou egzanp, yon <a href="#home">home</a>dwe koresponn ak yon bagay nan dom la tankou <div id="home"></div>.

.scrollSpy('refresh')

Scrollspy a kache bouton nav ak kowòdone seksyon pou pèfòmans. Si ou bezwen mete ajou kachèt sa a (gen anpil chans si ou gen kontni dinamik) jis rele metòd rafrechisman sa a. Si ou te itilize atribi done pou defini scrollspy ou, jis rele rafrechi sou kò a.

$ ( 'kò' ). scrollSpy ( 'refresh' )

Demo

Tcheke navigasyon nan topbar nan paj sa a.

Plugin sa a ofri plis fonksyonalite pou jere eta bouton an.

Telechaje

Sèvi ak bootstrap-buttons.js

$ ( '.tabs' ). bouton ()

Metòd

$().bouton('toggle')

Baskile pouse eta a. Bay btn gade ke li te aktive.

Avi Ou ka aktive oto-toggling nan yon bouton lè w itilize data-toggleatribi a.

<button class = "btn" data-toggle = "toggle" > ... </button>   

$().bouton('chaje')

Mete eta bouton an chaj - enfim bouton ak echanj tèks nan tèks chaje. Tèks chaje yo ta dwe defini sou eleman bouton an lè l sèvi avèk atribi done yo data-loading-text.

<button class = "btn" data-loading-text = "chaje bagay..." > ... </button>   

$().bouton('reset')

Reyajiste eta bouton - chanje tèks nan tèks orijinal la.

$().bouton(string)

Reyajiste eta bouton - echanj tèks nan nenpòt eta done defini tèks.

<button class = "btn" data-complete-text = "fini!" > ... </boutton>   
<script>
  $('.btn').bouton('konplete')
</skrip>

Demo

Chaje Demo Aktivite Demo

Plugin sa a ajoute rapid, dinamik tab ak fonksyonalite grenn.

Telechaje

Sèvi ak bootstrap-tabs.js

$ ( '.tabs' ). onglè ()

Marke

Ou ka aktive yon tab oswa navigasyon grenn san yo pa ekri okenn javascript pa senpleman ba yo yon data-tabsoswa data-pillsatribi.

 <ul class = "tabs" data-tabs = "onglets" > ... </ul>   

Metòd

$().tabs oswa $().grenn

Aktive fonksyon tab ak grenn pou yon veso bay yo. Lyen tab yo ta dwe referans id yo nan dokiman an.

<ul klas = "onglè" > 
  <li class = "active" ><a href = "#home" > Kay </a></li>  
  <li><a href = "#profile" > Profile </a></li> 
  <li><a href = "#messages" > Mesaj </a></li> 
  <li><a href = "#settings" > Anviwònman </a></li> 
</ul>
 
<div class = "pill-content" > 
  <div class = "active" id = "kay" > ... </div>  
  <div id = "pwofil" > ... </div> 
  <div id = "mesaj" > ... </div> 
  <div id = "anviwònman" > ... </div> 
</div>
 
<script>
  $ ( fonksyon () {  
    $ ( '.tabs' ). onglè ()
  })
</script>

Evènman

Evènman	Deskripsyon
chanje	Evènman sa a se sou chanjman tab. Sèvi event.targetak ak event.relatedTargetpou vize tab aktif la ak tab aktif anvan an respektivman.

$ ( '#.tabs' ). mare ( 'chanjman' , fonksyon ( e ) {   
  e . sib // aktive tab
  e . relatedTarget // tab anvan
})

Demo

• Lakay
• Profile
• Mesaj
• Anviwònman
• Dropdown
  • @grès
  • @mdo

Ki baze sou ekselan plugin jQuery.tipsy ki ekri pa Jason Frame; twipsy se yon vèsyon ki ajou, ki pa konte sou imaj, ki sèvi ak css3 pou animasyon, ak done-atribi pou depo tit!

Telechaje

Sèvi ak bootstrap-twipsy.js

$ ( '#egzanp' ). twipsy ( opsyon )

Opsyon

Non	kalite	default	deskripsyon
anime	booleyen	vre	aplike yon tranzisyon fade css nan konsèy la
reta nan	nimewo	0	reta anvan ou montre konsèy zouti (ms)
delayOut	nimewo	0	reta anvan kache konsèy zouti (ms)
repli	fisèl	''	tèks pou itilize lè pa gen tit enfòmasyon ki prezan
plasman	fisèl	'anwo'	ki jan yo pozisyon konsèy la - pi wo a | anba | kite | dwa
html	booleyen	fo	pèmèt kontni html nan tooltip
viv	booleyen	fo	sèvi ak delegasyon evènman olye de moun kap okipe evènman yo
konpanse	nimewo	0	piksèl konpanse nan konsèy zouti soti nan eleman sib
tit	fisèl, fonksyon	'tit'	atribi oswa metòd pou rekipere tèks tit
deklanche	fisèl	'plane'	kijan tooltip deklanche - hover | konsantre | manyèl
modèl	fisèl	[marke par défaut]	Modèl html yo itilize pou rann yon twipsy.

Avi Opsyon endividyèl pou egzanp twipsy ka altènativman espesifye atravè itilizasyon atribi done yo.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Kèk tèks tit' > tèks </a>    

Metòd

$().twipsy(opsyon)

Tache yon moun kap okipe twipsy nan yon koleksyon eleman.

.twipsy('montre')

Revele yon eleman twipsy.

$ ( '#eleman' ). twipsy ( 'montre' )

.twipsy('kache')

Kache yon eleman twipsy.

$ ( '#eleman' ). twipsy ( 'kache' )

.twipsy(vre)

Retounen yon egzanp klas twipsy eleman.

$ ( '#eleman' ). twipsy ( vre )

Avi Altènativman, sa a ka rekipere ak $().data('twipsy').

Demo

Plugin popover a bay yon koòdone senp pou ajoute popovers nan aplikasyon w lan. Li pwolonje plugin bootstrap-twipsy.js la , kidonk asire w ke w gen tan pwan fichye sa a tou lè w gen ladann popovers nan pwojè w la!

Avi Ou dwe mete dosye bootstrap-twipsy.js anvan bootstrap-popover.js.

Telechaje

Sèvi ak bootstrap-popover.js

$ ( '#egzanp' ). popover ( opsyon )

Opsyon

Non	kalite	default	deskripsyon
anime	booleyen	vre	aplike yon tranzisyon fade css nan konsèy la
reta nan	nimewo	0	reta anvan ou montre konsèy zouti (ms)
delayOut	nimewo	0	reta anvan kache konsèy zouti (ms)
repli	fisèl	''	tèks pou itilize lè pa gen tit enfòmasyon ki prezan
plasman	fisèl	'dwa'	ki jan yo pozisyon konsèy la - pi wo a | anba | kite | dwa
html	booleyen	fo	pèmèt kontni html nan tooltip
viv	booleyen	fo	sèvi ak delegasyon evènman olye de moun kap okipe evènman yo
konpanse	nimewo	0	piksèl konpanse nan konsèy zouti soti nan eleman sib
tit	fisèl, fonksyon	'tit'	atribi oswa metòd pou rekipere tèks tit
kontni	fisèl, fonksyon	'done-kontni'	yon kòd oswa yon metòd pou rekipere tèks kontni. si yo pa bay okenn, kontni yo pral soti nan yon atribi done-kontni.
deklanche	fisèl	'plane'	kijan tooltip deklanche - hover | konsantre | manyèl
modèl	fisèl	[marke par défaut]	Modèl html yo itilize pou rann yon popover.

Avi Opsyon endividyèl popover egzanp ka altènativman espesifye atravè itilizasyon atribi done yo.

<a data-placement = "below" href = "#" class = "btn danger" rel = "popover" > tèks </a>    

Metòd

$().popover(opsyon)

Inisyalize popovers pou yon koleksyon eleman.

.popover('montre')

Revele yon popover eleman.

$ ( '#eleman' ). popover ( 'montre' )

.popover('kache')

Kache yon popover eleman.

$ ( '#eleman' ). popover ( 'kache' )

Demo

hover pou popover

Plugin alèt la se yon klas super ti pou ajoute fonksyonalite fèmen nan alèt yo.

Telechaje

Sèvi ak bootstrap-alerts.js

$ ( ".alèt-mesaj" ). alèt ()

Marke

Jis ajoute yon data-alertatribi nan mesaj alèt ou yo otomatikman ba yo fonksyonalite fèmen.

Opsyon

Non	kalite	default	deskripsyon
seleksyon	fisèl	'.fèmen'	Ki seleksyon sib pou fèmen yon alèt.

Metòd

$().alèt()

Anvlope tout alèt ak fonksyonalite fèmen. Pou gen alèt ou yo anime lè yo fèmen, asire w ke yo gen .fadeak .inklas la deja aplike nan yo.

.alèt('fèmen')

Fèmen yon alèt.

$ ( ".alèt-mesaj" ). alèt ( 'fèmen' )

Demo