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, string	mali	May kasamang modal-backdrop na elemento. Itakda ang backdrop sa "static"kung ayaw mong isara ang modal kapag na-click ang backdrop.
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 = "static" > Ilunsad ang Modal </a>    

Pansinin Kung gusto mong mag-animate ang iyong modal sa loob at labas, magdagdag lang 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 ({
  keyboard : 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

Paggamit ng bootstrap-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 bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

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.

Nag-aalok ang plugin na ito ng karagdagang pag-andar para sa pamamahala ng estado ng button.

I-download

Paggamit ng bootstrap-buttons.js

$ ( '.tabs' ). pindutan ()

Paraan

$().button('toggle')

I-toggle ang estado ng push. Binibigyan btn ang hitsura na ito ay na-activate.

Paunawa Maaari mong paganahin ang auto toggling ng isang button sa pamamagitan ng paggamit ng data-togglekatangian.

<button class = "btn" data-toggle = "toggle" > ... </button>   

$().button('loading')

Itinatakda ang estado ng button sa paglo-load - dini-disable ang button at pagpapalit ng text sa paglo-load ng text. Ang paglo-load ng text ay dapat tukuyin sa elemento ng button gamit ang attribute ng data data-loading-text.

<button class = "btn" data-loading-text = "loading stuff..." > ... </button>   

$().button('reset')

Nire-reset ang estado ng button - pinapalitan ang text sa orihinal na text.

$().button(string)

Nire-reset ang estado ng button - pinapalitan ang teksto sa anumang tinukoy na estado ng teksto ng data.

<button class = "btn" data-complete-text = "tapos na!" > ... </button>   
<script>
  $('.btn').button('complete')
</script>

Demo

Naglo-load ng Demo I-toggle ang Demo

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

I-download

Paggamit ng bootstrap-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> 
</div>
 
<script>
  $ ( function () {  
    $ ( '.tabs' ). mga tab ()
  })
</script>

Mga kaganapan

Kaganapan	Paglalarawan
pagbabago	Ang kaganapang ito ay gumagana sa pagbabago ng tab. Gamitin event.targetat event.relatedTargeti-target ang aktibong tab at ang nakaraang aktibong tab ayon sa pagkakabanggit.

$ ( '#.tabs' ). bind ( 'change' , function ( e ) {   
  e . target // na-activate na tab
  e . relatedTarget // nakaraang tab
})

Demo

• Bahay
• Profile
• Mga mensahe
• Mga setting
• Dropdown
  • @mataba
  • @mdo

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'	paano na-trigger ang tooltip - hover | focus | manwal
template	string	[default markup]	Ang html template na ginamit para sa pag-render ng twipsy.

Pansinin Ang mga opsyon sa indibidwal na twipsy instance ay maaaring alternatibong tukuyin sa pamamagitan ng paggamit ng mga katangian ng data.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Some title text' > text </a>    

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 plugin na bootstrap-twipsy.js , kaya siguraduhing kunin din ang file na iyon kapag nagsasama ng mga popover sa iyong proyekto!

Paunawa Dapat mong isama ang bootstrap-twipsy.js file bago ang bootstrap-popover.js.

I-download

Gamit ang bootstrap-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'	isang string o paraan para sa pagkuha ng text ng nilalaman. kung walang ibinigay, kukunin ang content mula sa attribute na data-content.
gatilyo	string	'hover'	paano na-trigger ang tooltip - hover | focus | manwal
template	string	[default markup]	Ang html template na ginamit para sa pag-render ng popover.

Pansinin Ang mga opsyon sa indibidwal na halimbawa ng popover ay maaaring tukuyin sa pamamagitan ng paggamit ng mga katangian ng data.

<a data-placement = "below" href = "#" class = "btn danger" rel = "popover" > text </a>    

Paraan

$().popover(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.

Mga pagpipilian

Pangalan	uri	default	paglalarawan
tagapili	string	'.malapit'	Anong tagapili ang ita-target para sa pagsasara ng alerto.

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