Ti Modal plugin mi ket maysa a super slim take iti tradisional a modal js plugin, a mangala ti naisangsangayan a panangaywan tapno mairaman laeng ti lamolamo a panagusar a kasapulanmi ditoy twitter.

I-download

Babaen ti panangusar iti bootstrap-modal

$ ( '#ti-modalko' ). modal ( dagiti pagpilian ) .

Dagiti Pagpilian

Nagan	tipo	default	panangiladawan
backdrop ti likud	boolean nga	saan nga agpayso	Iramanna ti modal-backdrop nga elemento
teklado nga	boolean nga	saan nga agpayso	Serraan ti modal no maipidut ti escape key
ipakita	boolean nga	saan nga agpayso	Luktan ti modal iti panangrugi ti klase

Panagmarka

Mabalinmo nga aktiboen dagiti modal iti panidmo a nalaka a saan a kasapulan nga agsuratka iti maymaysa a linia ti javascript. Ikkan laeng ti maysa nga elemento ti data-controls-modalattribute a katupag ti modal nga elemento nga id, ken no mai-klik, daytoy ket mangirugi ti modalmo. Tapno manginayon kadagiti modal a pagpilian, iraman laeng dagitoy a kas dagiti attribute ti datos pay.

<a class = "btn" data-controls-modal = "ko-modal" data-backdrop = "pudno" > Irugi ti Modal </a>    

Pakaammo No kayatmo a ti modalmo ket ag-animate iti uneg ken ruar, mangnayon laeng iti maysa a .fadeklase iti .modalelementom (kitaen ti demo tapno makita daytoy nga agtigtignay).

Dagiti Pamay-an

.modal(dagiti pagpilian) .

Aktiboenna ti linaonmo kas modal. Awaten ti maysa nga opsional a pagpilian object.

$ ( '#ti-modalko' ). modal nga ({
  closeOnEscape : pudno 
}) nga

.modal ('agbalbaliw') .

Manual nga i-toggle ti maysa a modal.

$ ( '#ti-modalko' ). modal ( 'agbaliwbaliw' ) .

.modal('ipakita') .

Manual a luktan ti maysa a modal.

$ ( '#ti-modalko' ). modal ( 'ipakita' ) .

.modal('ilemmeng') .

Manual nga ilemmeng ti maysa a modal.

$ ( '#ti-modalko' ). modal ( 'ilemmeng' ) .

.modal(pudno) .

Isubli ti maysa nga elemento a modal a klase nga instansia.

$ ( '#ti-modalko' ). modal ( pudno ) .

Pakaammo Saan laeng a dayta, mabalin a maala daytoy babaen ti $().data('modal').

Dagiti Pasamak

Ti modal a klase ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti modal a panagusar.

Pasamak	Panangiladawan
ipakita	Daytoy a pasamak ket agputok a dagus no ti showpamay-an ti pagarigan ket maawagan.
naipakita	Daytoy a pasamak ket mapaputok no ti modal ket naaramiden a makita ti agar-aramat (urayenna dagiti panagbalbaliw ti css a makompleto).
aglemmeng	Daytoy a pasamak ket dagus a mapaputok no ti hidepamay-an ti pagarigan ket naawagan.
naidulin	Daytoy a pasamak ket mapaputok no ti modal ket nalpas a nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti css a makompleto).

$ ( '#ti-modalko' ). bind ( 'nalimed' , trabaho () {   
  // aramiden ti maysa a banag ...
}) nga

Demo nga

Irugi ti Modal

Daytoy a plugin ket para iti pananginayon ti dropdown a panagtitinnulong iti bootstrap topbar wenno dagiti tabbed a nabigasion.

I-download

Babaen ti panangusar iti boostrap-dropdown.js

$ ( '#ngato a bara' ). dropdown nga () .

Panagmarka

Tapno napardas a manginayon ti dropdown a panagusar iti ania man nga elemento ti nav, usaren ti data-dropdownattribute. Aniaman a balido a bootstrap dropdown ket automatiko a mapaandar.

<ul klase = "dagiti tab" > 
  <li klase = "aktibo" ><a href = "#" > Pagtaengan </a></li>  
  <li klase = "agpababa" data-dropdown = "agpababa" >   
    <a href = "#" klase = "pababa-a-mabaliwan" > Agpababa </a>  
    <ul klase = "nababa-a-menu" > 
      <li><a href = "#" > Maikadua a silpo </a></li> 
      <li><a href = "#" > Sabali pay ditoy </a></li> 
      <li klase = "mangbingay" </li> 
      <li><a href = "#" > Sabali a silpo </a></li> 
    </ul>
  </li>
</ul>

Pakaammo No ti ui-mo ket addaan kadagiti sumagmamano a dropdown, ibilang ti pananginayon ti data-dropdownattribute iti ad-adu a naipangpangruna nga elemento ti pagkargaan a kas ti .tabswenno .topbar.

Dagiti Pamay-an

$ (). dropdown () .

Maysa a programatiko nga api para iti panangpaaktibo kadagiti menu para iti naited a topbar wenno tabbed a nabigasion.

Demo nga

Daytoy a plugin ket para iti pananginayon ti scrollspy (auto updating nav) a panagtitinnulong iti bootstrap topbar.

I-download

Babaen ti panangusar iti boostrap-scrollspy.js

$ ( '#ngato a bara' ). dropdown nga () .

Panagmarka

Tapno nalaka a mainayon ti scrollspy a kababalin iti nav-mo, basta inayon ti data-scrollspyattribute iti .topbar.

<div klase = "ngato a bara" data-scrollspy = "scrollspy" > ... </div>   

Dagiti Pamay-an

$ (). scrollspy () .

Auto nga aktiboenna dagiti buton ti nabigasion babaen ti posision ti panag-scroll dagiti agus-usar.

$ ( 'bagi > .ngato a bara' ). scrollEspia () .

Pakaammo Dagiti etiketa ti angkla ti Topbar ket masapul nga addaan kadagiti masolbar nga id a puntiria. Kas pagarigan, <a href="#home">home</a>masapul a katupag ti maysa a banag iti dom a kas iti <div id="home"></div>.

.scrollspy ('agpabaro') .

Ti scrollspy ket mangi-cache kadagiti buton ti nav ken dagiti koordinado ti benneg para iti panagaramid. No kasapulam nga i-update daytoy a cache (mabalin no addaanka iti dinamiko a linaon) awagan laeng daytoy a pamay-an ti panagpabaro. No inusarmo ti data attribute a mangikeddeng iti scrollspy-mo, awagam laeng ti refresh iti bagi.

$ ( 'bagi' ). scrollspy ( 'pabaro' ) .

Demo nga

Kitaen ti nabigasion ti topbar iti daytoy a panid.

Daytoy a plugin ket mangnayon ti napardas, dinamiko a panagandar ti tab ken pildoras.

I-download

Babaen ti panangusar iti boostrap-tabs.js

$ ( '.tabs' ). dagiti tab () .

Panagmarka

Mabalinmo nga aktiboen ti tab wenno pill navigation a dika agsurat iti aniaman a javascript babaen ti panangtedmo laeng kadakuada iti a data-tabswenno data-pillsattribute.

 <ul klase = "tabs" data-tabs = "tabs" > ... </ul>   

Dagiti Pamay-an

$().tabs wenno $().pildoras

Paaktiboenna ti panagandar ti tab ken pildoras para iti naited a pagkargaan. Dagiti silpo ti tab ket rumbeng a mangireperensia kadagiti id iti dokumento.

<ul klase = "dagiti tab" > 
  <li klase = "aktibo" ><a href = "#pagtaengan" > Pagtaengan </a></li>  
  <li><a href = "#profile" > Pakasaritaan </a></li> 
  <li><a href = "#mensahe" > Dagiti mensahe </a></li> 
  <li><a href = "#dagiti panagitunos" > Dagiti panagitunos </a></li> 
</ul>
 
<div class = "linaon ti pildoras" > 
  <div klase = "aktibo" id = "pagtaengan" > ... </div>  
  <div id = "profile" > ... </div> 
  <div id = "dagiti mensahe" > ... </div> 
  <div id = "dagiti panagitunos" > ... </div> 
</ul>
 
<iskrip>
  $ ( trabaho () { .  
    $ ( '.tabs' ). dagiti tab () .
  }) nga
</script>

Demo nga

• Balay
• Profile
• Dagiti Mensahe
• Dagiti Pagsaad

Maibatay iti nagsayaat a jQuery.tipsy plugin nga insurat ni Jason Frame; Ti twipsy ket maysa a napabaro a bersion, a saan nga agpannuray kadagiti ladawan, agus-usar ti css3 para kadagiti animasion, ken dagiti data-attribute para iti pagipempenan ti paulo!

I-download

Usar ti bootstrap-twipsy.js

$ ( '#pagarigan' ). twipsy ( dagiti pagpilian ) .

Dagiti Pagpilian

Nagan	tipo	default	panangiladawan
animate nga	boolean nga	agpayso	iyaplikar ti css fade a panagbalbaliw iti tooltip
delayIn	bilang	0 nga	panagtaktak sakbay nga ipakita ti tooltip (ms) .
delayOut nga	bilang	0 nga	panagtaktak sakbay ti panaglemmeng ti tooltip (ms) .
fallback nga	kuerdas	'' .	teksto nga usaren no awan ti paulo ti tooltip nga adda
pannakaikabil	kuerdas	'ngato'	no kasano nga iposision ti tooltip - iti ngato | iti baba | kanigid | kusto
html nga	boolean nga	saan nga agpayso	palubosanna ti linaon ti html iti uneg ti tooltip
agbiag	boolean nga	saan nga agpayso	usaren ti delegasion ti pasamak imbes a dagiti indibidual a managtengngel ti pasamak
offset nga	bilang	0 nga	pixel offset ti tooltip manipud iti puntiria nga elemento
titulo	kuerdas nga | amad	'titulo'	attribute wenno pamay-an para iti panangala iti teksto ti paulo
kalbiten	kuerdas	'ag-hover'.	no kasano a mai-trigger ti tooltip - hover | pokus | giya

Dagiti Pamay-an

$ ().twipsy (dagiti pagpilian) .

Ikapet ti twipsy handler iti maysa a koleksion ti elemento.

.twipsy('ipakita') .

Ipalgakna ti maysa nga elemento twipsy.

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

.twipsy('ilemmeng') .

Ilemmeng ti maysa nga elemento a twipsy.

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

.twipsy(pudno) .

Isubli ti maysa nga elemento a twipsy a klase nga instansia.

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

Pakaammo Saan laeng a dayta, mabalin a maala daytoy babaen ti $().data('twipsy').

Demo nga

Ti popover plugin ket mangipaay ti simple nga interface para iti pananginayon kadagiti popovers iti aplikasionmo. Daytoy ket mangpalawa ti boostrap-twipsy.js a plugin, isu a siguraduem a mangala met iti dayta a file no iraman dagiti popovers iti proyektom!

I-download

Babaen ti panangusar iti boostrap-popover.js

$ ( '#pagarigan' ). popover ( dagiti pagpilian ) .

Dagiti Pagpilian

Nagan	tipo	default	panangiladawan
animate nga	boolean nga	agpayso	iyaplikar ti css fade a panagbalbaliw iti tooltip
delayIn	bilang	0 nga	panagtaktak sakbay nga ipakita ti tooltip (ms) .
delayOut nga	bilang	0 nga	panagtaktak sakbay ti panaglemmeng ti tooltip (ms) .
fallback nga	kuerdas	'' .	teksto nga usaren no awan ti paulo ti tooltip nga adda
pannakaikabil	kuerdas	'kusto'	no kasano nga iposision ti tooltip - iti ngato | iti baba | kanigid | kusto
html nga	boolean nga	saan nga agpayso	palubosanna ti linaon ti html iti uneg ti tooltip
agbiag	boolean nga	saan nga agpayso	usaren ti delegasion ti pasamak imbes a dagiti indibidual a managtengngel ti pasamak
offset nga	bilang	0 nga	pixel offset ti tooltip manipud iti puntiria nga elemento
titulo	kuerdas nga | amad	'titulo'	attribute wenno pamay-an para iti panangala iti teksto ti paulo
linaon	kuerdas nga | amad	'linaon-ti-datos'.	attribute wenno pamay-an para iti panangala iti teksto ti linaon
kalbiten	kuerdas	'ag-hover'.	no kasano a mai-trigger ti tooltip - hover | pokus | giya

Dagiti Pamay-an

$ ().popover (dagiti pagpilian) .

Mangrugi kadagiti popovers para iti maysa a koleksion ti elemento.

.popover('ipakita') .

Ipalgakna ti maysa nga elemento popover.

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

.popover('ilemmeng') .

Ilemmeng ti maysa nga elemento popover.

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

Demo nga

hover para iti popover

Ti plugin ti alerto ket maysa a super bassit a klase para iti pananginayon ti asideg a panagusar kadagiti alerto.

I-download

Usar ti bootstrap-alerts.js

$ ( ".alerto-a-mensahe" ). alerto () .

Panagmarka

Manginayon laeng iti data-alertattribute kadagiti mensahem iti alerto tapno automatiko a maited kadakuada ti asideg a panagandar.

Dagiti Pamay-an

$ ().alerto () .

Balkotenna amin nga alerto nga addaan iti asideg a panagandar. Tapno dagiti alertom ket ag-animate out no naserraan, siguraduem nga addaanda iti .fadeken .inklase a dati a naipakat kadakuada.

.alert('serraan') .

Serraan ti maysa nga alerto.

$ ( ".alerto-a-mensahe" ). alerto ( 'serraan' ) .

Demo nga