Kita Modal plugin punika super slim njupuk ing tradisional modal js plugin, njupuk care khusus kanggo nyakup mung fungsi gundhul sing kita mbutuhake kene ing twitter.

Ngundhuh

Nggunakake bootstrap-modal

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

Pilihan

jeneng	jinis	gawan	katrangan
latar mburi	boolean, string	palsu	Kalebu unsur modal-backdrop. Setel latar "static"mburi yen sampeyan ora pengin modal ditutup nalika latar mburi diklik.
papan ketik	boolean	palsu	Nutup modal nalika tombol uwal ditekan
nuduhake	boolean	palsu	Mbukak modal ing initialization kelas

Markup

Sampeyan bisa ngaktifake modals ing kaca kanthi gampang tanpa kudu nulis siji baris javascript. Cukup wenehi data-controls-modalatribut atribut sing cocog karo id unsur modal, lan nalika diklik, bakal mbukak modal sampeyan. Kanggo nambah opsi modal, mung kalebu minangka atribut data uga.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "statis" > Modal Bukak </a>    

Kabar Yen sampeyan pengin modal kanggo animate lan metu, mung nambah .fadekelas kanggo .modalunsur (ndeleng demo kanggo ndeleng iki ing tumindak).

Metode

.modal(pilihan)

Ngaktifake konten sampeyan minangka modal. Nampa opsi opsional object.

$ ( '#my-modal' ). modal ({
  keyboard : bener 
})

.modal('toggle')

Ngalih modal kanthi manual.

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

.modal('show')

Mbukak modal kanthi manual.

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

.modal('ndhelikake')

Kanthi manual ndhelikake modal.

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

.modal(bener)

Ngasilake conto kelas modal unsur.

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

Kabar Utawa, iki bisa dijupuk karo $().data('modal').

Acara

Kelas modal Bootstrap nyedhiyakake sawetara acara kanggo nyambung menyang fungsionalitas modal.

Acara	Katrangan
nuduhake	Acara iki langsung murub nalika showmetode conto diarani.
ditampilake	Acara iki dipecat nalika modal wis katon kanggo pangguna (bakal ngenteni transisi css rampung).
ndhelikake	Acara iki langsung dipecat nalika hidemetode conto wis diarani.
didhelikake	Acara iki dipecat nalika modal wis rampung didhelikake saka pangguna (bakal ngenteni transisi css rampung).

$ ( '#my-modal' ). bind ( 'didhelikake' , function () {   
  // gawe opo...
})

Demo

Bukak Modal

Plugin iki kanggo nambah interaksi gulung mudhun menyang bootstrap topbar utawa navigasi tab.

Ngundhuh

Nggunakake bootstrap-dropdown.js

$ ( '#topbar' ). gulung mudhun ()

Markup

Kanggo nambah fungsi gulung mudhun kanthi cepet menyang unsur nav, gunakake data-dropdownatribut kasebut. Sembarang gulung mudhun bootstrap sing bener bakal diaktifake kanthi otomatis.

<ul class = "tab" > 
  <li class = "aktif" ><a href = "#" > Ngarep </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Dropdown </a>  
    <ul class = "menu dropdown" > 
      <li><a href = "#" > Tautan sekunder </a></li> 
      <li><a href = "#" > Ana liyane ing kene </a></li> 
      <li class = "pembagi" ></li> 
      <li><a href = "#" > Link liyane </a></li> 
    </ul>
  </li>
</ul>

Kabar Yen ui sampeyan duwe sawetara dropdown, coba tambahake data-dropdownatribut menyang unsur wadhah sing luwih penting kaya .tabsutawa .topbar.

Metode

$(). dropdown()

Api terprogram kanggo ngaktifake menu kanggo pandhu arah topbar utawa tab.

Demo

Plugin iki kanggo nambah interaksi scrollspy (update otomatis nav) menyang bootstrap topbar.

Ngundhuh

Nggunakake bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

Markup

Kanggo gampang nambah prilaku scrollspy kanggo nav, mung nambah data-scrollspyatribut menyang .topbar.

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

Metode

$().scrollSpy()

Otomatis ngaktifake tombol navigasi miturut posisi gulung pangguna.

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

Kabar tag jangkar Topbar kudu duwe target id sing bisa ditanggulangi. Contone, <a href="#home">home</a>kudu cocog karo soko ing dom kaya <div id="home"></div>.

.scrollSpy('refresh')

The scrollspy caches tombol nav lan koordinat bagean kanggo kinerja. Yen sampeyan kudu nganyari cache iki (bisa uga yen sampeyan duwe konten dinamis) mung nelpon metode refresh iki. Yen sampeyan nggunakake atribut data kanggo nemtokake scrollspy, mung nelpon refresh ing awak.

$ ( 'awak' ). scrollSpy ( 'refresh' )

Demo

Priksa pandhu arah topbar ing kaca iki.

Plugin iki nawakake fungsi tambahan kanggo ngatur status tombol.

Ngundhuh

Nggunakake bootstrap-buttons.js

$ ( '.tabs' ). tombol ()

Metode

$().button('toggle')

Ngalih status push. Menehi btn dipikir sing wis diaktifake.

Kabar Sampeyan bisa ngaktifake otomatis malik tombol kanthi nggunakake data-toggleatribut.

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

$().button('loading')

Nyetel status tombol kanggo loading - mateni tombol lan ngganti teks menyang loading teks. Isi teks kudu ditetepake ing unsur tombol nggunakake atribut data data-loading-text.

<button class = "btn" data-loading-text = "muat barang..." > ... </tombol>   

$().button('reset')

Reset status tombol - ngganti teks menyang teks asli.

$().tombol(string)

Reset status tombol - swap teks menyang sembarang data ditetepake negara teks.

<button class = "btn" data-complete-text = "rampung!" > ... </tombol>   
<script>
  $('.btn').button('lengkap')
</script>

Demo

Loading Demo Ngalih Demo

Plugin iki nambah cepet, dinamis tab lan fungsi pil.

Ngundhuh

Nggunakake bootstrap-tabs.js

$ ( '.tabs' ). tab ()

Markup

Sampeyan bisa ngaktifake navigasi tab utawa pil tanpa nulis javascript apa wae kanthi menehi atribut data-tabsutawa data-pillsatribut.

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

Metode

$().tab utawa $().pil

Ngaktifake fungsi tab lan pil kanggo wadhah tartamtu. Tautan tab kudu ngrujuk id ing dokumen kasebut.

<ul class = "tab" > 
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Pesen </a></li> 
  <li><a href = "#settings" > Setelan </a></li> 
</ul>
 
<div class = "isi pil" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profil" > ... </div> 
  <div id = "pesen" > ... </div> 
  <div id = "setelan" > ... </div> 
</div>
 
<script>
  $ ( fungsi () {  
    $ ( '.tabs' ). tab ()
  })
</script>

Acara

Acara	Katrangan
owah-owahan	Acara iki murub ing owah-owahan tab. Gunakake event.targetlan event.relatedTargetkanggo target tab aktif lan tab aktif sadurunge.

$ ( '#.tabs' ). bind ( 'ganti' , fungsi ( e ) {   
  e . target // tab aktif
  e . relatedTarget // tab sadurungé
})

Demo

• Ngarep
• Profile
• Pesen
• Setelan
• Dropdown
  • @lemak
  • @mdo

Adhedhasar jQuery.tipsy plugin banget ditulis dening Jason Frame; twipsy versi dianyari, kang ora gumantung ing gambar, nggunakake css3 kanggo animasi, lan data-atribut kanggo panyimpenan judhul!

Ngundhuh

Nggunakake bootstrap-twipsy.js

$ ( '#conto' ). twipsy ( pilihan )

Pilihan

jeneng	jinis	gawan	katrangan
animate	boolean	bener	aplikasi transisi fade css menyang tooltip
delayIn	nomer	0	tundha sadurunge nuduhake tooltip (ms)
delayOut	nomer	0	tundha sadurunge ndhelikake tooltip (ms)
mundur	senar	''	teks sing digunakake nalika ora ana judhul tooltip
panggonan panggonan	senar	'ndhuwur'	carane posisi tooltip - ndhuwur | ing ngisor iki | kiwa | bener
html	boolean	palsu	ngidini isi html ing tooltip
urip	boolean	palsu	nggunakake delegasi acara tinimbang panangan acara individu
ngimbangi	nomer	0	piksel ngimbangi tooltip saka unsur target
judhul	string, fungsi	'judul'	atribut utawa cara kanggo njupuk teks judhul
pemicu	senar	'ngalayang'	carane tooltip dipicu - hover | fokus | manual
cithakan	senar	[markup standar]	Cithakan html sing digunakake kanggo nggawe twipsy.

Kabar Pilihan conto twipsy individu bisa uga ditemtokake liwat nggunakake atribut data.

<a href = "#" data-placement = "ngisor" rel = 'twipsy' title = 'Sawetara teks judhul' > teks </a>    

Metode

$().twipsy(opsi)

Masang pawang twipsy menyang koleksi unsur.

.twipsy('show')

Nuduhake unsur twipsy.

$ ( '#elemen' ). twipsy ( 'show' )

.twipsy('ndhelikake')

Ndhelikake unsur twipsy.

$ ( '#elemen' ). twipsy ( 'ndhelikake' )

.twipsy(bener)

Ngasilake conto kelas twipsy unsur.

$ ( '#elemen' ). twipsy ( bener )

Kabar Utawa, iki bisa dijupuk karo $().data('twipsy').

Demo

Plugin popover nyedhiyakake antarmuka sing gampang kanggo nambah popover menyang aplikasi sampeyan. Iku ngluwihi plugin bootstrap-twipsy.js , dadi manawa kanggo njupuk file kasebut uga nalika kalebu popovers ing proyek sampeyan!

Kabar Sampeyan kudu nyakup file bootstrap-twipsy.js sadurunge bootstrap-popover.js.

Ngundhuh

Nggunakake bootstrap-popover.js

$ ( '#conto' ). popover ( pilihan )

Pilihan

jeneng	jinis	gawan	katrangan
animate	boolean	bener	aplikasi transisi fade css menyang tooltip
delayIn	nomer	0	tundha sadurunge nuduhake tooltip (ms)
delayOut	nomer	0	tundha sadurunge ndhelikake tooltip (ms)
mundur	senar	''	teks sing digunakake nalika ora ana judhul tooltip
panggonan panggonan	senar	'bener'	carane posisi tooltip - ndhuwur | ing ngisor iki | kiwa | bener
html	boolean	palsu	ngidini isi html ing tooltip
urip	boolean	palsu	nggunakake delegasi acara tinimbang panangan acara individu
ngimbangi	nomer	0	piksel ngimbangi tooltip saka unsur target
judhul	string, fungsi	'judul'	atribut utawa cara kanggo njupuk teks judhul
isi	string, fungsi	'isi data'	string utawa cara kanggo njupuk teks isi. yen ora ana sing disedhiyakake, isi bakal sumber saka atribut isi data.
pemicu	senar	'ngalayang'	carane tooltip dipicu - hover | fokus | manual
cithakan	senar	[markup standar]	Cithakan html sing digunakake kanggo nggawe popover.

Kabar Opsi conto popover individu bisa uga ditemtokake liwat nggunakake atribut data.

<a data-placement = "ngisor" href = "#" class = "btn bahaya" rel = "popover" > teks </a>    

Metode

$().popover(opsi)

Inisialisasi popovers kanggo koleksi unsur.

.popover('show')

Nuduhake unsur popover.

$ ( '#elemen' ). popover ( 'show' )

.popover('ndhelikake')

Ndhelikake popover unsur.

$ ( '#elemen' ). popover ( 'ndhelikake' )

Demo

hover kanggo popover

Plugin tandha minangka kelas super cilik kanggo nambah fungsi sing cedhak karo tandha.

Ngundhuh

Nggunakake bootstrap-alerts.js

$ ( ".pesen-waspada" ). waspada ()

Markup

Cukup nambah data-alertatribut menyang pesen tandha supaya kanthi otomatis menehi fungsi sing cedhak.

Pilihan

jeneng	jinis	gawan	katrangan
pamilih	senar	'.cedhak'	Apa pamilih kanggo target kanggo nutup tandha.

Metode

$().waspada()

Bungkus kabeh tandha kanthi fungsi sing cedhak. Supaya tandha sampeyan bisa urip nalika ditutup, priksa manawa tandha .fadelan .inkelas kasebut wis ditrapake.

.alert('nutup')

Nutup tandha.

$ ( ".pesen-waspada" ). waspada ( 'cedhak' )

Demo