Ang aming Modal plugin ay isang napakaliit na pagkuha sa tradisyunal na modal js plugin, na may espesyal na pangangalaga na isama lamang ang hubad na functionality na kailangan namin dito sa twitter.

I-download

Gamit ang bootstrap-modal

$ ( '#my-modal' ). modal ( mga pagpipilian )

Mga pagpipilian

Pangalan	uri	default	paglalarawan
backdrop	boolean	mali	May kasamang modal-backdrop na elemento
keyboard	boolean	mali	Isinasara ang modal kapag pinindot ang escape key
palabas	boolean	mali	Nagbubukas ng modal sa pagsisimula ng klase

Markup

Madali mong maisaaktibo ang mga modal sa iyong pahina nang hindi kinakailangang sumulat ng isang linya ng javascript. Bigyan lang ang isang elemento ng data-controls-modalattribute na tumutugma sa isang modal element id, at kapag na-click, ilulunsad nito ang iyong modal. Para magdagdag ng mga opsyon sa modal, isama lang ang mga ito bilang mga attribute ng data.

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

Pansinin Kung gusto mong mag-animate ang iyong modal sa loob at labas, magdagdag lamang ng .fadeklase sa iyong .modalelemento (sumangguni sa demo para makita ito sa pagkilos).

Paraan

.modal(options)

Ina-activate ang iyong content bilang modal. Tumatanggap ng opsyonal na opsyon object.

$ ( '#my-modal' ). modal ({
  closeOnEscape : totoo 
})

.modal('toggle')

Manu-manong i-toggle ang isang modal.

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

.modal('show')

Manu-manong nagbubukas ng modal.

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

.modal('itago')

Manu-manong nagtatago ng modal.

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

.modal(totoo)

Ibinabalik ang isang halimbawa ng mga elemento ng modal class.

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

Pansinin Bilang kahalili, ito ay maaaring makuha gamit ang $().data('modal').

Mga kaganapan

Ang modal class ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa hooking sa modal functionality.

Kaganapan	Paglalarawan
palabas	Agad na gagana ang kaganapang ito kapag showtinawag ang paraan ng instance.
ipinakita	Ang kaganapang ito ay pinapagana kapag ang modal ay ginawang nakikita ng user (maghihintay na makumpleto ang mga css transition).
tago	Agad na pinapagana ang kaganapang ito kapag hidetinawag na ang paraan ng instance.
nakatago	Ang kaganapang ito ay pinapagana kapag ang modal ay tapos nang itago mula sa user (maghihintay para sa mga transition ng css na makumpleto).

$ ( '#my-modal' ). bind ( 'nakatago' , function () {   
  // gumawa ng paraan ...
})

Demo

Ilunsad ang Modal

Ang plugin na ito ay para sa pagdaragdag ng dropdown na pakikipag-ugnayan sa bootstrap topbar o mga tab na nabigasyon.

I-download

Gamit ang boostrap-dropdown.js

$ ( '#topbar' ). dropdown ()

Markup

Upang mabilis na magdagdag ng dropdown na functionality sa anumang elemento ng nav, gamitin ang data-dropdownattribute. Awtomatikong maa-activate ang anumang wastong bootstrap dropdown.

<ul class = "mga tab" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Dropdown </a>  
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Pangalawang link </a></li> 
      <li><a href = "#" > Iba dito </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Isa pang link </a></li> 
    </ul>
  </li>
</ul>

Pansinin Kung may ilang dropdown ang iyong ui, isaalang-alang ang pagdaragdag ng data-dropdownattribute sa isang mas makabuluhang elemento ng container tulad ng .tabso .topbar.

Paraan

$().dropdown()

Isang programatic api para sa pag-activate ng mga menu para sa isang naibigay na topbar o tabbed navigation.

Demo

Ang plugin na ito ay para sa pagdaragdag ng scrollspy (auto updating nav) na pakikipag-ugnayan sa bootstrap topbar.

I-download

Gamit ang boostrap-scrollspy.js

$ ( '#topbar' ). dropdown ()

Markup

Upang madaling magdagdag ng scrollspy na gawi sa iyong nav, idagdag lang ang data-scrollspyattribute sa .topbar.

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

Paraan

$().scrollspy()

Awtomatikong ina-activate ang mga navigation button ayon sa posisyon ng pag-scroll ng mga user.

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

Pansinin Ang mga tag ng anchor sa Topbar ay dapat na may mga nareresolbang id target. Halimbawa, <a href="#home">home</a>dapat na tumutugma sa isang bagay sa dom tulad ng <div id="home"></div>.

.scrollspy('refresh')

Inilalagay ng scrollspy ang mga nav button at mga coordinate ng seksyon para sa pagganap. Kung kailangan mong i-update ang cache na ito (malamang kung mayroon kang dynamic na nilalaman) tawagan lang ang paraan ng pag-refresh na ito. Kung ginamit mo ang attribute ng data para tukuyin ang iyong scrollspy, tumawag lang ng refresh sa body.

$ ( 'katawan' ). scrollspy ( 'refresh' )

Demo

Tingnan ang topbar navigation sa page na ito.

Ang plugin na ito ay nagdaragdag ng mabilis, dynamic na tab at pagpapagana ng tableta.

I-download

Paggamit ng boostrap-tabs.js

$ ( '.tabs' ). mga tab ()

Markup

Maaari mong i-activate ang isang tab o pill navigation nang hindi sumusulat ng anumang javascript sa pamamagitan lamang ng pagbibigay sa kanila ng isang data-tabso data-pillsattribute.

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

Paraan

$().tabs o $().pills

Ina-activate ang pagpapagana ng tab at tableta para sa isang partikular na lalagyan. Ang mga link ng tab ay dapat sumangguni sa mga id sa dokumento.

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

Demo

• Bahay
• Profile
• Mga mensahe
• Mga setting

Batay sa mahusay na jQuery.tipsy plugin na isinulat ni Jason Frame; Ang twipsy ay isang na-update na bersyon, na hindi umaasa sa mga larawan, gumagamit ng css3 para sa mga animation, at data-attribute para sa imbakan ng pamagat!

I-download

Gamit ang bootstrap-twipsy.js

$ ( '#example' ). Twipsy ( mga pagpipilian )

Mga pagpipilian

Pangalan	uri	default	paglalarawan
buhayin	boolean	totoo	maglapat ng css fade transition sa tooltip
pagkaantala sa	numero	0	antala bago ipakita ang tooltip (ms)
delayOut	numero	0	antala bago itago ang tooltip (ms)
umurong	string	''	tekstong gagamitin kapag walang pamagat ng tooltip
pagkakalagay	string	'sa itaas'	paano iposisyon ang tooltip - sa itaas | sa ibaba | kaliwa | tama
html	boolean	mali	nagbibigay-daan sa nilalaman ng html sa loob ng tooltip
mabuhay	boolean	mali	gumamit ng pagtatalaga ng kaganapan sa halip na mga indibidwal na humahawak ng kaganapan
offset	numero	0	pixel offset ng tooltip mula sa target na elemento
pamagat	string | function	'title'	katangian o paraan para sa pagkuha ng teksto ng pamagat
gatilyo	string	'hover'	kung paano na-trigger ang tooltip - hover | focus | manwal

Paraan

$().twipsy(mga opsyon)

Nag-attach ng twipsy handler sa isang koleksyon ng elemento.

.twipsy('show')

Nagpapakita ng mga elementong twipsy.

$ ( '#elemento' ). twisty ( 'palabas' )

.twipsy('itago')

Itinatago ang isang elemento na twipsy.

$ ( '#elemento' ). Twipsy ( 'itago' )

.twipsy(totoo)

Nagbabalik ng isang element na twipsy class instance.

$ ( '#elemento' ). twisty ( totoo )

Pansinin Bilang kahalili, ito ay maaaring makuha gamit ang $().data('twipsy').

Demo

Ang popover plugin ay nagbibigay ng isang simpleng interface para sa pagdaragdag ng mga popover sa iyong application. Pinapalawak nito ang boostrap-twipsy.js plugin, kaya siguraduhing kunin din ang file na iyon kapag nagsasama ng mga popover sa iyong proyekto!

I-download

Gamit ang boostrap-popover.js

$ ( '#example' ). popover ( mga pagpipilian )

Mga pagpipilian

Pangalan	uri	default	paglalarawan
buhayin	boolean	totoo	maglapat ng css fade transition sa tooltip
pagkaantala sa	numero	0	antala bago ipakita ang tooltip (ms)
delayOut	numero	0	antala bago itago ang tooltip (ms)
umurong	string	''	tekstong gagamitin kapag walang pamagat ng tooltip
pagkakalagay	string	'tama'	paano iposisyon ang tooltip - sa itaas | sa ibaba | kaliwa | tama
html	boolean	mali	nagbibigay-daan sa nilalaman ng html sa loob ng tooltip
mabuhay	boolean	mali	gumamit ng pagtatalaga ng kaganapan sa halip na mga indibidwal na humahawak ng kaganapan
offset	numero	0	pixel offset ng tooltip mula sa target na elemento
pamagat	string | function	'title'	katangian o paraan para sa pagkuha ng teksto ng pamagat
nilalaman	string | function	'data-content'	katangian o paraan para sa pagkuha ng teksto ng nilalaman
gatilyo	string	'hover'	kung paano na-trigger ang tooltip - hover | focus | manwal

Paraan

$().popover(mga opsyon)

Sinisimulan ang mga popover para sa isang koleksyon ng elemento.

.popover('show')

Nagpapakita ng mga elementong popover.

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

.popover('itago')

Itinatago ang isang elemento ng popover.

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

Demo

mag-hover para sa popover

Ang alerto plugin ay isang napakaliit na klase para sa pagdaragdag ng malapit na pag-andar sa mga alerto.

I-download

Paggamit ng bootstrap-alerts.js

$ ( ".alert-message" ). alerto ()

Markup

Magdagdag lang ng data-alertattribute sa iyong mga alertong mensahe para awtomatikong mabigyan sila ng malapit na functionality.

Paraan

$().alerto()

Binabalot ang lahat ng alerto na may malapit na paggana. Upang mai-animate ang iyong mga alerto kapag isinara, tiyaking nailapat na sa kanila ang .fadeat klase..in

.alert('close')

Nagsasara ng alerto.

$ ( ".alert-message" ). alerto ( 'close' )

Demo