Plugin Modal kami mangrupikeun super langsing dina plugin modal js tradisional, jaga-jaga khusus pikeun ngan ukur fungsionalitas bulistir anu kami butuhkeun di twitter.

Ngundeur

Ngagunakeun bootstrap-modal

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

Pilihan

Ngaran	ngetik	standar	katerangan
latar	boolean	palsu	Ngawengku unsur modal-backdrop
kibor	boolean	palsu	Nutup modal nalika konci kabur dipencet
nempokeun	boolean	palsu	Muka modal dina initialization kelas

Markup

Anjeun tiasa ngaktipkeun modals dina halaman anjeun kalayan gampang tanpa kedah nyerat hiji baris javascript. Ngan masihan unsur data-controls-modalatribut anu pakait sareng id unsur modal, sareng nalika diklik, éta bakal ngaluncurkeun modal anjeun. Pikeun nambahkeun pilihan modal, ngan kaasup aranjeunna salaku atribut data ogé.

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

Perhatikeun Upami anjeun hoyong modal anjeun ngahirupkeun asup jeung kaluar, ngan nambahan .fadekelas ka .modalelemen Anjeun (tingali demo pikeun nempo ieu dina aksi).

Métode

.modal(pilihan)

Aktipkeun eusi anjeun salaku modal. Narima hiji pilihan pilihan object.

$ ( '#abdi-modal' ). modal ({
  closeOnEscape : leres 
})

.modal('toggle')

Sacara manual toggles modal.

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

.modal('show')

Sacara manual muka modal.

$ ( '#abdi-modal' ). modal ( 'tunjukkeun' )

.modal('sumputkeun')

Sacara manual nyumputkeun modal.

$ ( '#abdi-modal' ). modal ( 'sumputkeun' )

.modal(leres)

Mulih hiji conto kelas modal elemen.

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

Perhatikeun Alternatipna, ieu tiasa dicandak nganggo $().data('modal').

Kajadian

Kelas modal Bootstrap ngungkabkeun sababaraha acara pikeun nyambungkeun kana fungsionalitas modal.

Acara	Katerangan
nempokeun	Kajadian ieu langsung hurung nalika showmetode conto disebut.
ditémbongkeun	Kajadian ieu dipecat nalika modal parantos katingali ku pangguna (bakal ngantosan transisi css réngsé).
nyumput	Kajadian ieu langsung dipecat nalika hidemetode conto parantos disebut.
disumputkeun	Kajadian ieu dipecat nalika modal parantos disumputkeun tina pangguna (bakal ngantosan transisi css réngsé).

$ ( '#abdi-modal' ). ngabeungkeut ( 'disumputkeun' , fungsi () {   
  // ngalakukeun hiji hal ...
})

Demo

Ngajalankeun Modal

Plugin ieu kanggo nambihan interaksi dropdown kana bootstrap topbar atanapi navigasi tab.

Ngundeur

Ngagunakeun boostrap-dropdown.js

$ ( '#topbar' ). dropdown ()

Markup

Pikeun gancang nambahkeun fungsionalitas dropdown kana sagala elemen nav, make data-dropdownatribut. Sagala dropdown bootstrap valid bakal otomatis diaktipkeun.

<ul class = "tab" > 
  <li class = "aktif" ><a href = "#" > Imah </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Dropdown </a>  
    <ul class = "menu dropdown" > 
      <li><a href = "#" > Tautan sekundér </a></li> 
      <li><a href = "#" > Lain di dieu </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Tumbu sejen </a></li> 
    </ul>
  </li>
</ul>

Perhatikeun Lamun ui anjeun boga sababaraha dropdowns, mertimbangkeun nambahkeun data-dropdownatribut ka unsur wadahna leuwih signifikan kawas .tabsatawa .topbar.

Métode

$().dropdown()

Api program pikeun ngaktipkeun ménu pikeun topbar atanapi navigasi tab.

Demo

plugin Ieu pikeun nambahkeun interaksi scrollspy (otomatis ngamutahirkeun nav) kana bootstrap topbar.

Ngundeur

Ngagunakeun boostrap-scrollspy.js

$ ( '#topbar' ). dropdown ()

Markup

Pikeun gampang nambahkeun kabiasaan scrollspy mun nav Anjeun, ngan nambahan data-scrollspyatribut ka .topbar.

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

Métode

$().scrollspy()

Otomatis ngaktifkeun tombol navigasi ku posisi gulung pamaké.

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

Perhatikeun tag jangkar Topbar kudu boga target id resolvable. Contona, hiji <a href="#home">home</a>kudu pakait jeung hal di dom kawas <div id="home"></div>.

.scrollspy('refresh')

The scrollspy caches tombol nav jeung koordinat bagian pikeun pagelaran. Upami anjeun kedah ngapdet cache ieu (sigana upami anjeun gaduh eusi dinamis) ngan nelepon metodeu refresh ieu. Lamun dipaké atribut data pikeun ngartikeun scrollspy Anjeun, ngan nelepon Anyarkeun dina awak.

$ ( 'awak' ). scrollspy ( 'refresh' )

Demo

Pariksa navigasi topbar dina kaca ieu.

Plugin ieu nambihan gancang, tab dinamis sareng fungsionalitas pil.

Ngundeur

Ngagunakeun boostrap-tabs.js

$ ( '.tabs' ). tab ()

Markup

Anjeun tiasa ngaktipkeun navigasi tab atanapi pil tanpa nyerat JavaScript ku ngan ukur masihan aranjeunna atribut data-tabsatanapi .data-pills

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

Métode

$().tabs atanapi $().pil

Aktipkeun tab jeung pungsi pungsi pikeun wadahna dibikeun. Tautan tab kedah ngarujuk kana id dina dokumen éta.

<ul class = "tab" > 
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Propil </a></li> 
  <li><a href = "#messages" > Talatah </a></li> 
  <li><a href = "#settings" > Setélan </a></li> 
</ul>
 
<div class = "eusi pil" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profil" > ... </div> 
  <div id = "pesen" > ... </div> 
  <div id = "setélan" > ... </div> 
</ul>
 
<script>
  $ ( fungsi () {  
    $ ( '.tabs' ). tab ()
  })
</script>

Demo

• Imah
• Propil
• Talatah
• Setélan

Dumasar kana jQuery.tipsy plugin unggulan ditulis ku Jason pigura; twipsy mangrupikeun versi anu diropéa, anu henteu ngandelkeun gambar, ngagunakeun CSS3 pikeun animasi, sareng atribut data pikeun neundeun judul!

Ngundeur

Ngagunakeun bootstrap-twipsy.js

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

Pilihan

Ngaran	ngetik	standar	katerangan
ngahirupkeun	boolean	leres	nerapkeun transisi fade css ka tooltip
delayIn	angka	0	reureuh saméméh némbongkeun tooltip (ms)
delayOut	angka	0	reureuh saméméh nyumputkeun tooltip (ms)
dijengkang	senar	''	téks pikeun dipaké lamun euweuh judul tooltip hadir
panempatan	senar	'di luhur'	kumaha posisi tooltip - luhur | handap | ditinggalkeun | leres
html	boolean	palsu	ngamungkinkeun eusi html dina tooltip
hirup	boolean	palsu	make delegasi acara tinimbang pawang acara individu
ngimbangan	angka	0	piksel offset of tooltip ti elemen target
judul	string | fungsi	'judul'	atribut atawa métode pikeun retrieving téks judul
pemicu	senar	'ngalayang'	kumaha tooltip dipicu - hover | fokus | manual

Métode

$().twipsy(pilihan)

Ngagantelkeun pawang twipsy kana kumpulan unsur.

.twipsy('acara')

Nembongkeun hiji elemen twipsy.

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

.twipsy('sumputkeun')

Nyumputkeun hiji elemen twisty.

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

.twipsy (leres)

Mulih hiji elemen conto kelas twipsy.

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

Perhatikeun Alternatipna, ieu tiasa dicandak nganggo $().data('twipsy').

Demo

The popover plugin nyadiakeun panganteur basajan pikeun nambahkeun popovers kana aplikasi Anjeun. Éta ngalegaan plugin boostrap-twipsy.js , janten pastikeun nyandak file éta ogé nalika kalebet popovers dina proyék anjeun!

Ngundeur

Ngagunakeun boostrap-popover.js

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

Pilihan

Ngaran	ngetik	standar	katerangan
ngahirupkeun	boolean	leres	nerapkeun transisi fade css ka tooltip
delayIn	angka	0	reureuh saméméh némbongkeun tooltip (ms)
delayOut	angka	0	reureuh saméméh nyumputkeun tooltip (ms)
dijengkang	senar	''	téks pikeun dipaké lamun euweuh judul tooltip hadir
panempatan	senar	'leres'	kumaha posisi tooltip - luhur | handap | ditinggalkeun | leres
html	boolean	palsu	ngamungkinkeun eusi html dina tooltip
hirup	boolean	palsu	make delegasi acara tinimbang pawang acara individu
ngimbangan	angka	0	piksel offset of tooltip ti elemen target
judul	string | fungsi	'judul'	atribut atawa métode pikeun retrieving téks judul
eusi	string | fungsi	'eusi data'	atribut atawa métode pikeun retrieving téks eusi
pemicu	senar	'ngalayang'	kumaha tooltip dipicu - hover | fokus | manual

Métode

$().popover(pilihan)

Initializes popovers pikeun kumpulan unsur.

.popover('show')

Nembongkeun hiji popover unsur.

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

.popover('sumputkeun')

Nyumputkeun hiji unsur popover.

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

Demo

hover pikeun popover

Plugin ngageter mangrupikeun kelas super leutik pikeun nambihan fungsionalitas anu caket kana panggeuing.

Ngundeur

Ngagunakeun bootstrap-alerts.js

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

Markup

Cukup tambahkeun data-alertatribut kana pesen waspada anjeun pikeun otomatis masihan aranjeunna fungsionalitas anu caket.

Métode

$().siaga()

Bungkus sadaya panggeuing kalayan fungsionalitas anu caket. Pikeun ngahirupkeun panggeuing anjeun nalika ditutup, pastikeun aranjeunna gaduh .fadesareng .inkelas anu parantos dilarapkeun ka aranjeunna.

.alert('deukeut')

Nutup béja.

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

Demo