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, string	palsu	Ngawengku unsur modal-backdrop. Setel latar ka "static"upami anjeun henteu hoyong modal ditutup nalika latar diklik.
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 = "statis" > 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 ({
  keyboard : 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 bootstrap-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 scrollspy (otomatis ngamutahirkeun nav) interaksi ka bootstrap topbar.

Ngundeur

Ngagunakeun bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

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 nawiskeun fungsionalitas tambahan pikeun ngatur kaayaan tombol.

Ngundeur

Ngagunakeun bootstrap-buttons.js

$ ( '.tabs' ). tombol ()

Métode

$().button('toggle')

Toggles kaayaan push. Méré btn katingal yén éta geus diaktipkeun.

Bewara Anjeun tiasa ngaktipkeun otomatis toggling hiji tombol ku ngagunakeun data-toggleatribut.

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

$().button('loading')

Nyetél kaayaan tombol pikeun ngamuat - nganonaktipkeun tombol sareng swap téks kana ngamuat téks. Ngamuat téks kedah ditetepkeun dina unsur tombol nganggo atribut data data-loading-text.

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

$().button('reset')

Reset kaayaan tombol - swaps téks kana téks aslina.

$().tombol(string)

Reset kaayaan tombol - swaps téks kana sagala data ditetepkeun kaayaan téks.

<button class = "btn" data-complete-text = "réngsé!" > ... </tombol>   
<script>
  $('.btn').button('lengkep')
</script>

Demo

Ngamuat Demo Togél Demo

Plugin ieu nambihan gancang, tab dinamis sareng fungsionalitas pil.

Ngundeur

Ngagunakeun bootstrap-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 atawa $().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> 
</div>
 
<script>
  $ ( fungsi () {  
    $ ( '.tabs' ). tab ()
  })
</script>

Kajadian

Acara	Katerangan
robah	Kajadian ieu lumangsung dina parobahan tab. Anggo event.targetsareng event.relatedTargetnargétkeun tab aktip sareng tab aktip sateuacana masing-masing.

$ ( '#.tabs' ). ngabeungkeut ( 'robah' , fungsi ( e ) {   
  e . target // tab diaktipkeun
  e . relatedTarget // tab saméméhna
})

Demo

• Imah
• Propil
• Talatah
• Setélan
• Puragkeun
  • @gajih
  • @mdo

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
citakan	senar	[markup standar]	The html template dipaké pikeun Rendering twipsy a.

Perhatikeun Pilihan instansi twipsy individu tiasa ditunjukkeun ku cara ngagunakeun atribut data.

<a href = "#" data-placement = "di handap" rel = 'twipsy' title = 'Sababaraha téks judul' > téks </a>    

Métode

$().twipsy(pilihan)

Ngagantelkeun pawang twipsy kana kumpulan unsur.

.twipsy('acara')

Nembongkeun hiji elemen twisty.

$ ( '#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 bootstrap-twipsy.js , janten pastikeun nyandak file éta ogé nalika kalebet popovers dina proyék anjeun!

Bewara Anjeun kudu ngawengku file bootstrap-twipsy.js saméméh bootstrap-popover.js.

Ngundeur

Ngagunakeun bootstrap-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'	string atawa métode pikeun retrieving téks eusi. lamun euweuh disadiakeun, eusi bakal sourced ti atribut data-eusi.
pemicu	senar	'ngalayang'	kumaha tooltip dipicu - hover | fokus | manual
citakan	senar	[markup standar]	The html template dipaké pikeun Rendering popover a.

Perhatikeun Pilihan instansi popover individu tiasa ditunjukkeun ku cara ngagunakeun atribut data.

<a data-placement = "handap" href = "#" class = "btn bahaya" rel = "popover" > téks </a>    

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.

Pilihan

Ngaran	ngetik	standar	katerangan
pamilih	senar	'.deukeut'	Pamilih naon anu dituju pikeun nutup ngageter.

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