Ang among Modal nga plugin usa ka super slim nga pagkuha sa tradisyonal nga modal js plugin, nga nag-amping sa pag-apil lamang sa walay gamit nga gamit nga among gikinahanglan dinhi sa twitter.

Pag-download

Paggamit sa bootstrap-modal

$ ( '#akong-modal' ). modal ( mga kapilian )

Mga kapilian

Ngalan	matang	default	paghulagway
backdrop	boolean	bakak	Naglakip sa usa ka elemento sa modal-backdrop
keyboard	boolean	bakak	Pagsira sa modal kung ang escape key gipugos
ipakita	boolean	bakak	Gibuksan ang modal sa pagsugod sa klase

Markup

Mahimo nimo nga ma-aktibo ang mga modals sa imong panid nga dali nga dili kinahanglan nga magsulat usa ka linya sa javascript. Hatagi lang ang usa ka elemento og usa ka data-controls-modalattribute nga katumbas sa usa ka modal element id, ug kung gi-klik, kini maglunsad sa imong modal. Aron madugangan ang mga kapilian sa modal, iapil lang sila ingon nga mga hiyas sa datos usab.

<a class = "btn" data-controls-modal = "akong-modal" data-backdrop = "tinuod" > Ilunsad ang Modal </a>    

Matikdi Kung gusto nimo nga ang imong modal mo-animate sa sulod ug gawas, idugang lang ang usa ka .fadeklase sa imong .modalelemento (tan-awa ang demo aron makita kini nga aksyon).

Pamaagi

.modal(mga kapilian)

Gi-aktibo ang imong sulud ingon usa ka modal. Modawat ug opsyonal nga mga kapilian object.

$ ( '#akong-modal' ). modal ({
  closeOnEscape : tinuod 
})

.modal('toggle')

Manwal nga mag-toggle sa usa ka modal.

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

.modal('show')

Manwal nga nagbukas sa usa ka modal.

$ ( '#akong-modal' ). modal ( 'pakita' )

.modal('tago')

Manwal nga nagtago sa usa ka modal.

$ ( '#akong-modal' ). modal ( 'tago' )

.modal(tinuod)

Nagbalik sa usa ka pananglitan sa mga elemento sa modal class.

$ ( '#akong-modal' ). modal ( tinuod )

Matikdi Sa laing paagi, kini mahimong makuha gamit ang $().data('modal').

Mga panghitabo

Ang modal nga klase sa Bootstrap nagbutyag sa pipila ka mga panghitabo alang sa pag-hook sa modal functionality.

Panghitabo	Deskripsyon
ipakita	Kini nga panghitabo nagdilaab dayon kung ang showpamaagi sa pananglitan gitawag.
gipakita	Kini nga panghitabo gipabuto kung ang modal nahimo nga makita sa tiggamit (maghulat nga makompleto ang mga transisyon sa css).
itago	Kini nga panghitabo gipabuto dayon kung ang hidepamaagi sa pananglitan gitawag na.
gitago	Kini nga panghitabo gipabuto kung ang modal nahuman na nga gitago gikan sa tiggamit (maghulat alang sa mga transisyon sa css nga makompleto).

$ ( '#akong-modal' ). pagbugkos ( 'tinago' , function () {   
  // buhata ang usa ka butang ...
})

Demo

Ilunsad ang Modal

Kini nga plugin alang sa pagdugang sa dropdown nga interaksyon sa bootstrap topbar o tabbed navigations.

Pag-download

Gamit ang boostrap-dropdown.js

$ ( '#topbar' ). dropdown ()

Markup

Aron dali nga makadugang sa pagpaandar sa dropdown sa bisan unsang elemento sa nav, gamita ang data-dropdownattribute. Ang bisan unsang balido nga bootstrap dropdown awtomatiko nga ma-aktibo.

<ul class = "mga tab" > 
  <li class = "aktibo" ><a href = "#" > Panimalay </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Dropdown </a>  
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Ikaduhang sumpay </a></li> 
      <li><a href = "#" > Lain pa dinhi </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Lain nga link </a></li> 
    </ul>
  </li>
</ul>

Matikdi Kung ang imong ui adunay daghang mga dropdown, ikonsiderar ang pagdugang sa data-dropdownhiyas sa usa ka labi ka hinungdanon nga elemento sa sulud sama sa .tabso .topbar.

Pamaagi

$().dropdown()

Usa ka programatic api alang sa pagpaaktibo sa mga menu alang sa gihatag nga topbar o tabbed navigation.

Demo

Kini nga plugin alang sa pagdugang sa scrollspy (awtomatikong pag-update sa nav) nga interaksyon sa bootstrap topbar.

Pag-download

Gamit ang boostrap-scrollspy.js

$ ( '#topbar' ). dropdown ()

Markup

Aron dali nga makadugang sa scrollspy nga kinaiya sa imong nav, idugang lang ang data-scrollspyattribute sa .topbar.

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

Pamaagi

$().scrollspy()

Gi-aktibo sa awto ang mga buton sa nabigasyon sa posisyon sa pag-scroll sa mga tiggamit.

$ ( 'lawas > .topbar' ). scrollSpy ()

Matikdi ang Topbar anchor tags kinahanglang adunay masulbad nga mga target sa id. Pananglitan, <a href="#home">home</a>kinahanglan nga katumbas sa usa ka butang sa dom sama sa <div id="home"></div>.

.scrollspy('refresh')

Ang scrollspy nagtago sa mga buton sa nav ug mga coordinate sa seksyon alang sa pasundayag. Kung kinahanglan nimo nga i-update kini nga cache (tingali kung adunay ka dinamikong sulud) tawga lang kini nga pamaagi sa pag-refresh. Kung imong gigamit ang data attribute aron ipasabot ang imong scrollspy, tawag lang ug refresh sa lawas.

$ ( 'lawas' ). scrollspy ( 'refresh' )

Demo

Tan-awa ang topbar nabigasyon niini nga panid.

Kini nga plugin nagdugang dali, dinamikong tab ug pagpaandar sa tableta.

Pag-download

Gamit ang boostrap-tabs.js

$ ( '.tabs' ). tabs ()

Markup

Mahimo nimong i-aktibo ang usa ka tab o pildoras nga nabigasyon nga wala’y pagsulat sa bisan unsang javascript pinaagi lamang sa paghatag kanila usa ka data-tabso data-pillshiyas.

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

Pamaagi

$().tabs o $().pills

Gi-activate ang tab ug pill functionality alang sa gihatag nga sudlanan. Ang mga link sa tab kinahanglan nga maghisgot sa mga id sa dokumento.

<ul class = "mga tab" > 
  <li class = "aktibo" ><a href = "#home" > Balay </a></li>  
  <li><a href = "#profile" > Profile </a></li> 
  <li><a href = "#messages" > Mga Mensahe </a></li> 
  <li><a href = "#settings" > Settings </a></li> 
</ul>
 
<div class = "pill-content" > 
  <div class = "aktibo" id = "balay" > ... </div>  
  <div id = "profile" > ... </div> 
  <div id = "mga mensahe" > ... </div> 
  <div id = "setting" > ... </div> 
</ul>
 
<script>
  $ ( function () {  
    $ ( '.tabs' ). tabs ()
  })
</script>

Demo

• Balay
• Profile
• Mga mensahe
• Mga setting

Base sa maayo kaayo nga jQuery.tipsy plugin nga gisulat ni Jason Frame; Ang twipsy usa ka updated nga bersyon, nga wala magsalig sa mga hulagway, naggamit sa css3 para sa mga animation, ug data-attributes alang sa pagtipig sa titulo!

Pag-download

Gamit ang bootstrap-twipsy.js

$ ( '#pananglitan' ). twipsy ( mga kapilian )

Mga kapilian

Ngalan	matang	default	paghulagway
buhion	boolean	tinuod	paggamit ug css fade transition sa tooltip
paglanganSa	numero	0	paglangan sa dili pa ipakita ang tooltip (ms)
delayOut	numero	0	paglangan sa dili pa itago ang tooltip (ms)
fallback	hilo	''	teksto nga gamiton kung walay ulohan sa tooltip
pagbutang	hilo	'ibabaw'	unsaon pagbutang sa tooltip - sa ibabaw | ubos | wala | husto
html	boolean	bakak	nagtugot sa sulod sa html sulod sa tooltip
mabuhi	boolean	bakak	gamita ang delegasyon sa panghitabo imbes nga indibidwal nga tigdumala sa panghitabo
offset	numero	0	pixel offset sa tooltip gikan sa target nga elemento
titulo	hilo | function	'titulo'	hiyas o paagi sa pagkuha sa teksto sa ulohan
trigger	hilo	'lutaw'	giunsa pag-trigger ang tooltip - hover | focus | manwal

Pamaagi

$().twipsy(mga opsyon)

Naglakip sa usa ka twipsy handler sa usa ka koleksyon sa elemento.

.twipsy('show')

Nagpadayag sa usa ka elemento nga twipsy.

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

.twipsy('tago')

Nagtago sa usa ka elemento nga twipsy.

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

.twipsy(tinuod)

Nagbalik sa usa ka elemento nga twipsy class nga pananglitan.

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

Matikdi Sa laing paagi, kini mahimong makuha gamit ang $().data('twipsy').

Demo

Ang popover plugin naghatag og usa ka yano nga interface alang sa pagdugang popovers sa imong aplikasyon. Gipalugway niini ang plugin nga boostrap -twipsy.js , busa siguruha nga makuha usab kana nga file kung ilakip ang mga popover sa imong proyekto!

Pag-download

Gamit ang boostrap-popover.js

$ ( '#pananglitan' ). popover ( mga kapilian )

Mga kapilian

Ngalan	matang	default	paghulagway
buhion	boolean	tinuod	paggamit ug css fade transition sa tooltip
paglanganSa	numero	0	paglangan sa dili pa ipakita ang tooltip (ms)
delayOut	numero	0	paglangan sa dili pa itago ang tooltip (ms)
fallback	hilo	''	teksto nga gamiton kung walay ulohan sa tooltip
pagbutang	hilo	'tama'	unsaon pagbutang sa tooltip - sa ibabaw | ubos | wala | husto
html	boolean	bakak	nagtugot sa sulod sa html sulod sa tooltip
mabuhi	boolean	bakak	gamita ang delegasyon sa panghitabo imbes nga indibidwal nga tigdumala sa panghitabo
offset	numero	0	pixel offset sa tooltip gikan sa target nga elemento
titulo	hilo | function	'titulo'	hiyas o paagi sa pagkuha sa teksto sa ulohan
sulod	hilo | function	'data-content'	hiyas o paagi sa pagkuha sa sulod nga teksto
trigger	hilo	'lutaw'	giunsa pag-trigger ang tooltip - hover | focus | manwal

Pamaagi

$().popover(mga opsyon)

Nagsugod sa mga popover para sa koleksyon sa elemento.

.popover('pakita')

Nagpadayag sa usa ka elemento nga popover.

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

.popover('tago')

Nagtago sa usa ka elemento nga popover.

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

Demo

hover para sa popover

Ang alert plugin usa ka super gamay nga klase alang sa pagdugang sa suod nga pagpaandar sa mga alerto.

Pag-download

Gamit ang bootstrap-alerts.js

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

Markup

Pagdugang lang ug data-alertattribute sa imong mga alert messages para awtomatiko silang mahatagan ug close functionality.

Pamaagi

$().alerto()

Giputos ang tanan nga mga alerto nga adunay suod nga pagpaandar. Aron ma-animate ang imong mga alerto kung sirado, siguruha nga naa na nila ang .fadeug .inklase nga na-apply sa kanila.

.alerto('close')

Pagsira sa usa ka alerto.

$ ( ".alerto-mensahe" ). alerto ( 'close' )

Demo