Wi Modal plɔgin na wan supa slim tek pan di tradishɔnal modal js plɔgin, tek spɛshal kia fɔ inklud ɔl di bare funkshɔnaliti we wi nid ya na twita.

Dɔŋlod

Yuz di bootstrap-modal fɔ yuz

$ ( '#mi-modal' ). modal ( opshɔn dɛn ) .

Di tin dɛn we yu kin pik fɔ du

Nem	kayn	balans	tɔk bɔt
bakdrop fɔ de	boolean we dɛn kɔl	lay	Inklud wan modal-bakdrop ɛlimɛnt
kibɔd fɔ di kibɔd	boolean we dɛn kɔl	lay	Klos di modal we dɛn prɛs di ɛspɛk ki
sho	boolean we dɛn kɔl	lay	Opin modal pan klas initializayshɔn

Mak-ap fɔ di tin dɛn we de apin

Yu kin aktiv modal dɛn na yu pej izi wan we yu nɔ nid fɔ rayt wan layn fɔ javaskript. Jɔs gi wan ɛlimɛnt wan data-controls-modalatribyut we kɔrɛkt to wan modal ɛlimɛnt id, ɛn we yu klik, i go lanch yu modal. Fɔ ad modal opshɔn dɛn, jɔs inklud dɛn as data atribyut dɛn bak.

<a klas = "btn" data-kɔntrol-modal = "mi-modal" data-bakdrop = "tru" > Lanch Modal </a>    

Notis If yu want yu modal fɔ animate in ɛn aut, jɔs ad wan .fadeklas to yu .modalɛlimɛnt (rif to di demo fɔ si dis in akshɔn).

Di we aw dɛn de du am

.modal(opshɔn dɛn) .

Aktiv yu kɔntinyu as modal. Aksept wan opshɔnal opshɔn dɛn object.

$ ( '#mi-modal' ). modal ({
  klosOnEscape : na tru 
}) bin de.

.modal('tɔgl') .

Manually de toggle wan modal.

$ ( '#mi-modal' ). modal ( ‘tɔgl’ ) .

.modal('sho') .

Manually de opin wan modal.

$ ( '#mi-modal' ). modal ( ‘sho’ ) .

.modal('ayd') .

Manually de ayd wan modal.

$ ( '#mi-modal' ). modal ( ‘ayd’ ) .

.modal(na tru) .

Ritɔn wan ɛlimɛnt dɛn modal klas instans.

$ ( '#mi-modal' ). modal ( na tru ) .

Notis Ɔda we de fɔ du dat, yu kin tek dis wit $().data('modal').

Di tin dɛn we kin apin

Bootstrap in modal klas de ɛksplɔz sɔm ivin dɛn fɔ huk insay modal funkshɔnaliti.

Program	Tɔk bɔt
sho	Dis ivent de faya wantɛm wantɛm we dɛn kɔl di showinstans mɛtɔd.
we dɛn sho	Dis ivent de faya we di modal dɔn mek visible to di yuza (go wet fɔ css transishɔn dɛn fɔ dɔn).
ayd	Dis ivent de faya wantɛm wantɛm we hidedɛn dɔn kɔl di instans mɛtɔd.
ayd	Dis ivent de faya we di modal dɔn dɔn fɔ ayd frɔm di yuza (go wet fɔ css transishɔn dɛn fɔ dɔn).

$ ( '#mi-modal' ). bind ( 'ayd' , fɛnshɔn () {   
  // du sɔntin ...
}) bin de.

Demo we de sho aw fɔ du am

Lans Modal fɔ di wan dɛn we de

Dis plɔgin na fɔ ad drɔpdɔwn intarakshɔn to di butstrap tɔpba ɔ tab nevigishɔn dɛn.

Dɔŋlod

Yuz boostrap-drɔpdɔwn.js

$ ( '#tɔpbar' ). drɔp dɔŋ () .

Mak-ap fɔ di tin dɛn we de apin

Fɔ ad drɔpdɔwn funkshɔnaliti kwik kwik wan to ɛni nav ɛlimɛnt, yuz di data-dropdownatribyut. Ɛni valid bootstrap drɔpdɔwn go ɔtomɛtik aktiv.

<ul klas = "tab dɛn" > 
  <li klas = "aktiv" ><a href = "#" > Os </a></li>  
  <li klas = "drɔpdɔwn" data-drɔpdɔwn = "drɔpdɔwn" >   
    <a href = "#" klas = "drɔpdɔwn-tɔgl" > Drɔpdɔwn </a>  
    <ul klas = "drɔpdɔwn-mɛnyu" > 
      <li><a href = "#" > Sɛkɔndari link </a></li> 
      <li><a href = "#" > Sɔntin ɔda tin ya </a></li> 
      <li klas = "divayda" </li> 
      <li><a href = "#" > Wan ɔda link </a></li> 
    </ul> fɔ di wan dɛn we de
  </li> fɔ di wan dɛn we de
</ul> fɔ di wan dɛn we de

Notis If yu ui gɛt sɔm drɔpdɔwn dɛn, tink bɔt fɔ ad di data-dropdownatribyut to wan mɔ impɔtant kɔntena ɛlimɛnt lɛk .tabsɔ .topbar.

Di we aw dɛn de du am

$().drɔpdɔwn()

Wan programatic api fɔ aktivet mɛnyu fɔ wan givɛn topbar ɔ tab nevigishɔn.

Demo we de sho aw fɔ du am

Dis plɔgin na fɔ ad di skrolspy (ɔto ɔpdet nav) intarakshɔn to di butstrap tɔpba.

Dɔŋlod

Yuz boostrap-scrollspy.js we yu de yuz

$ ( '#tɔpbar' ). drɔp dɔŋ () .

Mak-ap fɔ di tin dɛn we de apin

Fɔ mek i izi fɔ ad skrolspi bihayvya to yu nav, jɔs ad di data-scrollspyatribyut to di .topbar.

<div klas = "tɔpbar" data-skrolspy = "skrolspi" > ... </div>   

Di we aw dɛn de du am

$().skrolsay () .

Oto aktivet nevigishɔn bɔtin dɛn bay yuzman dɛn skrol pozishɔn.

$ ( 'bɔdi > .tɔpbar' ). skrolSpy () .

Notis Topbar ankɔ tag dɛn fɔ gɛt id target dɛn we dɛn kin sɔlv. Fɔ ɛgzampul, a <a href="#home">home</a>fɔ kɔrɛkt to sɔntin we de na di dom lɛk <div id="home"></div>.

.skrolspy('rifresh') .

Di skrolspy de kech di nav bɔtin dɛn ɛn di sɛkshɔn kɔdinɛt dɛn fɔ mek dɛn ebul fɔ du di wok. If yu nid fɔ ɔpdet dis kesh (i go bi if yu gɛt dinamik kɔntinyu) jɔs kɔl dis rifresh we. If yu yuz di data atribyut fɔ difayn yu skrol, jɔs kɔl rifresh na di bɔdi.

$ ( ‘bɔdi’ ). skrolspy ( ‘rifresh’ ) .

Demo we de sho aw fɔ du am

Chek ɔut di di topbar nevigishɔn na dis pej.

Dis plɔgin de ad kwik, dinamik tab ɛn pil funkshɔnaliti.

Dɔŋlod

We yu de yuz boostrap-tabs.js

$ ( '.tab dɛn' ). tab dɛn () .

Mak-ap fɔ di tin dɛn we de apin

Yu kin aktiv wan tab ɔ pil nevigishɔn we yu nɔ rayt ɛni javaskript bay we yu jɔs gi dɛn wan data-tabsɔ data-pillsatribyut.

 <ul klas = "tab dɛn" data-tab dɛn = "tab dɛn" > ... </ul>   

Di we aw dɛn de du am

$().tabs ɔ $().pils dɛn

Aktivet tab ɛn pil funkshɔnaliti fɔ wan givɛn kɔntena. Tab link dɛn fɔ rɛfrɛns id dɛn na di dɔkyumɛnt.

<ul klas = "tab dɛn" > 
  <li klas = "aktiv" ><a href = "#os" > Os </a></li>  
  <li><a href = "#prɔfayl" > Profayl </a></li> 
  <li><a href = "#mɛsej dɛn" > Mɛsej dɛn </a></li> 
  <li><a href = "#sɛtin dɛn" > Sɛtin dɛn </a></li> 
</ul> fɔ di wan dɛn we de
 
<div klas = "pil-kɔntinɛnt" > 
  <div klas = "aktiv" id = "os" > ... </div>  
  <div id = "prɔfayl" > ... </div> 
  <div id = "mɛsej dɛn" > ... </div> 
  <div id = "sɛtin dɛn" > ... </div> 
</ul> fɔ di wan dɛn we de
 
<skript>
  $ ( fɛnshɔn () { .  
    $ ( '.tab dɛn' ). tab dɛn () .
  }) bin de.
</skript>

Demo we de sho aw fɔ du am

• Os
• Profayl
• Mɛsej dɛn
• Di sɛtin dɛn

Bays pan di fayn fayn jQuery.tipsy plɔgin we Jason Frame rayt; twipsy na wan ɔpdet vɛshɔn, we nɔ de abop pan pikchɔ dɛn, i de yuz css3 fɔ animashɔn, ɛn data-atribyut fɔ taytul stɔrɔj!

Dɔŋlod

Yuz di bootstrap-twipsy.js we yu de yuz

$ ( '#ɛgzampul' ). twipsy ( opshɔn dɛn ) .

Di tin dɛn we yu kin pik fɔ du

Nem	kayn	balans	tɔk bɔt
fɔ mek pɔsin gɛt layf	boolean we dɛn kɔl	tru	aplay wan css fade transishɔn to di tultip
dilayIn	nɔmba	0. Di wan dɛn we de	dilay bifo yu sho tultip (ms) .
delayOut fɔ de	nɔmba	0. Di wan dɛn we de	dilay bifo yu ayd tultip (ms) .
fɔl bak	rop	'' .	tɛks fɔ yuz we nɔ tultip taytul nɔ de
ples fɔ put am	rop	'ɔp'	aw fɔ posishun di tultip - ɔp | dɔŋ ya | lɛft | rayt
html	boolean we dɛn kɔl	lay	alaw html kɔntinyu insay tultip
tap	boolean we dɛn kɔl	lay	yuz ivent delegɛshɔn instead ɔf wan wan ivent handla dɛn
ɔfset	nɔmba	0. Di wan dɛn we de	piksɛl ɔfset fɔ tultip frɔm target ɛlimɛnt
taytul	string fɔ di wan dɛn we de | wok	'taytul'	atribyut ɔ we fɔ pul di taytul tɛks
stat	rop	'hova' we yu de du.	aw di tultip de trig - hover | fɔs fɔs | buk

Di we aw dɛn de du am

$().twipsy(opshɔn dɛn)

Ataya wan twipsy handler to wan elemɛnt kɔlɛkshɔn.

.twipsy('sho') .

Rivɛl wan ɛlimɛnt dɛn twipsy.

$ ( '#ɛlimɛnt' ). twipsy ( ‘sho’ ) .

.twipsy('ayd') .

Ayd wan ɛlimɛnt dɛn twipsy.

$ ( '#ɛlimɛnt' ). twipsy ( ‘ayd’ ) .

.twipsy(na tru) .

Ritɔn wan ɛlimɛnt dɛn twipsy klas instans.

$ ( '#ɛlimɛnt' ). twipsy ( na tru ) .

Notis Ɔda we de fɔ du dat, yu kin tek dis wit $().data('twipsy').

Demo we de sho aw fɔ du am

Di popover plɔgin de gi yu wan simpul intafays fɔ ad popovers to yu aplikeshɔn. I de ɛkstɛnd di boostrap-twipsy.js plɔgin, so mek shɔ se yu grap da fayl de bak we yu de inklud popovers insay yu prɔjek!

Dɔŋlod

We yu de yuz boostrap-popover.js

$ ( '#ɛgzampul' ). popover ( opshɔn dɛn ) .

Di tin dɛn we yu kin pik fɔ du

Nem	kayn	balans	tɔk bɔt
fɔ mek pɔsin gɛt layf	boolean we dɛn kɔl	tru	aplay wan css fade transishɔn to di tultip
dilayIn	nɔmba	0. Di wan dɛn we de	dilay bifo yu sho tultip (ms) .
delayOut fɔ de	nɔmba	0. Di wan dɛn we de	dilay bifo yu ayd tultip (ms) .
fɔl bak	rop	'' .	tɛks fɔ yuz we nɔ tultip taytul nɔ de
ples fɔ put am	rop	'rayt'	aw fɔ posishun di tultip - ɔp | dɔŋ ya | lɛft | rayt
html	boolean we dɛn kɔl	lay	alaw html kɔntinyu insay tultip
tap	boolean we dɛn kɔl	lay	yuz ivent delegɛshɔn instead ɔf wan wan ivent handla dɛn
ɔfset	nɔmba	0. Di wan dɛn we de	piksɛl ɔfset fɔ tultip frɔm target ɛlimɛnt
taytul	string fɔ di wan dɛn we de | wok	'taytul'	atribyut ɔ we fɔ pul di taytul tɛks
satisfay	string fɔ di wan dɛn we de | wok	'data-kɔntinɛnt'.	atribyut ɔ we fɔ gɛt kɔntinyu tɛks
stat	rop	'hova' we yu de du.	aw di tultip de trig - hover | fɔs fɔs | buk

Di we aw dɛn de du am

$().popover(opshɔn dɛn) .

Initializes popovers fɔ wan ɛlimɛnt kɔllɛkshɔn.

.popover('sho') .

Rivɛl wan ɛlimɛnt dɛn popover.

$ ( '#ɛlimɛnt' ). popover ( ‘sho’ ) .

.popover('ayd') .

Ayd wan ɛlimɛnt dɛn popover.

$ ( '#ɛlimɛnt' ). popover ( ‘ayd’ ) .

Demo we de sho aw fɔ du am

hover fɔ popover

Di alɛt plɔgin na wan supa smɔl klas fɔ ad klos funkshɔnaliti to alɛt dɛn.

Dɔŋlod

Yuz di bootstrap-alerts.js

$ ( ".alert-mɛsej" ). alɛrt () .

Mak-ap fɔ di tin dɛn we de apin

Jɔs ad wan data-alertatribyut to yu alɛt mɛsej dɛn fɔ mek dɛn ɔtomɛtik gi dɛn klos funkshɔnaliti.

Di we aw dɛn de du am

$().alɛrt() .

Rap ɔl di alɛt dɛn wit klos funkshɔnaliti. Fɔ mek yu alɛt dɛn animate aut we dɛn lɔk, mek shɔ se dɛn gɛt di .fadeɛn .inklas we dɔn ɔlrɛdi aplay to dɛn.

.alert('klos') .

Klos wan alɛt.

$ ( ".alert-mɛsej" ). alert ( ‘klos’ ) .

Demo we de sho aw fɔ du am