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, kuerdas	saan nga agpayso	Iramanna ti modal-backdrop nga elemento. Itakderan ti backdrop iti "static"no dimo kayat a maiserra ti modal no mai-click ti backdrop.
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 agsurat iti uray maysa 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-click, 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 = "estatiko" > 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 ({
  teklado : 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 (urayennanto 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

Usar ti bootstrap-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 pay 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

Usar ti bootstrap-scrollspy.js

$ ( '#ngato a bara' ). scrollEspia () .

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

$ (). i-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 mangitukon ti kanayonan a panagusar para iti panagituray ti estado ti buton.

I-download

Usar ti bootstrap-buttons.js

$ ( '.tabs' ). buton () .

Dagiti Pamay-an

$ (). buton ('ag-toggle') .

Toggles ti estado ti iduron. Mangted ti btn ti langa nga na-activate na.

Pakaammo Mabalinmo nga ipalubos ti auto toggling ti maysa a buton babaen ti panagusar ti data-toggleattribute.

< klase ti buton = "btn" data-toggle = "mabaliwan" > ... </button>   

$ (). buton ( 'agkarga') .

Itakderanna ti estado ti buton iti panagkarga - balbaliwanna ti buton ken isukat ti teksto iti panagkarga ti teksto. Ti panagkarga ti teksto ket rumbeng a maipalawag iti elemento ti buton babaen ti panagusar ti kabileg ti datos data-loading-text.

<button class = "btn" data-loading-text = "agkarga kadagiti bambanag..." > ... </button>   

$ (). buton ('i-reset') .

Isubli ti estado ti buton - isukat ti teksto iti orihinal a teksto.

$ ().buton (kuerdas) .

Isubli ti estado ti buton - agsinnukat ti teksto iti ania man a datos a naikeddeng nga estado ti teksto.

<button class = "btn" datos-kompleto-a-teksto = "nalpasen!" > ... </buton> nga   
<iskrip>
  $ ('.btn ').button ('kompleto') .
</scrip>

Demo nga

Pagkargaan ti Demo I-toggle ti Demo

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

I-download

Usar ti bootstrap-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> 
</div>
 
<iskrip>
  $ ( trabaho () { .  
    $ ( '.tabs' ). dagiti tab () .
  }) nga
</script>

Dagiti Pasamak

Pasamak	Panangiladawan
baliwan	Daytoy a pasamak ket agputok iti panagbalbaliw ti tab. Usaren ti event.targetken event.relatedTargettapno puntiriaen ti aktibo a tab ken ti napalabas nga aktibo a tab a nagsasaruno.

$ ( '#.dagiti tab' ). bind ( 'baliwan' , trabaho ( e ) { .   
  e . target // na-activate nga tab
  e . mainaig a Target // napalabas a tab
}) nga

Demo nga

• Balay
• Profile
• Dagiti Mensahe
• Dagiti Pagsaad
• Dropdown nga
  • @nalukmeg
  • @mdo nga

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, trabaho	'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
plantilia nga	kuerdas	[default a panagmarka].	Ti plantilia ti html a naus-usar para iti panagiparang ti twipsy.

Pakaammo Dagiti indibidual a pagpilian ti pagarigan ti twipsy ket mabalin a alternatibo a maikeddeng babaen ti panagusar kadagiti kababalin ti datos.

<a href = "#" data-placement = "baba" rel = 'twipsy' title = 'Sumagmamano a teksto ti paulo' > teksto </a>    

Dagiti Pamay-an

$ ().twipsy (dagiti pagpilian) .

Ikapet ti twipsy handler iti maysa a koleksion ti elemento.

.twipsy('ipakita') .

Ipalgakna ti maysa nga elemento a 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 bootstrap-twipsy.js a plugin, isu a siguraduem a mangala met iti dayta a file no iraman dagiti popovers iti proyektom!

Pakaammo Masapul nga iramanmo ti bootstrap-twipsy.js a papeles sakbay ti bootstrap-popover.js.

I-download

Usar ti bootstrap-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, trabaho	'titulo'	attribute wenno pamay-an para iti panangala iti teksto ti paulo
linaon	kuerdas, trabaho	'linaon-ti-datos'.	maysa a kuerdas wenno pamay-an para iti panangala iti teksto ti linaon. no awan ti naited, ti linaon ket magun-odto manipud iti maysa a data-content attribute.
kalbiten	kuerdas	'ag-hover'.	no kasano a mai-trigger ti tooltip - hover | pokus | giya
plantilia nga	kuerdas	[default a panagmarka].	Ti plantilia ti html a naus-usar para iti panagiparang ti popover.

Pakaammo Dagiti indibidual a pagpilian ti pagarigan ti popover ket mabalin a alternatibo a maikeddeng babaen ti panagusar kadagiti kababalin ti datos.

<a data-placement = "baba" href = "#" klase = "peggad ti btn" rel = "popover" > teksto </a>    

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 Pagpilian

Nagan	tipo	default	panangiladawan
agpili nga	kuerdas	'.iserra'	Ania a selector ti puntiriaen para iti panangserra iti maysa nga alerto.

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