Plugin Modal kami adalah versi super tipis dari plugin modal js tradisional, dengan sangat hati-hati untuk hanya menyertakan fungsionalitas telanjang yang kami butuhkan di sini di twitter.

Unduh

Menggunakan bootstrap-modal

$ ( '#modal-saya' ). modal ( opsi )

Pilihan

Nama	Tipe	bawaan	keterangan
latar belakang	boolean	Salah	Termasuk elemen modal-backdrop
papan ketik	boolean	Salah	Menutup modal saat tombol escape ditekan
menunjukkan	boolean	Salah	Membuka modal pada inisialisasi kelas

Markup

Anda dapat mengaktifkan modals di halaman Anda dengan mudah tanpa harus menulis satu baris javascript. Cukup berikan elemen data-controls-modalatribut yang sesuai dengan id elemen modal, dan ketika diklik, itu akan meluncurkan modal Anda. Untuk menambahkan opsi modal, cukup sertakan sebagai atribut data juga.

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

Perhatikan Jika Anda ingin modal Anda masuk dan keluar, cukup tambahkan .fadekelas ke .modalelemen Anda (lihat demo untuk melihat ini beraksi).

Metode

.modal(opsi)

Mengaktifkan konten Anda sebagai modal. Menerima opsi opsional object.

$ ( '#modal-saya' ). modal ({
  closeOnEscape : benar 
})

.modal('beralih')

Mengalihkan modal secara manual.

$ ( '#modal-saya' ). modal ( 'beralih' )

.modal('tampilkan')

Secara manual membuka modal.

$ ( '#modal-saya' ). modal ( 'tampilkan' )

.modal('sembunyikan')

Secara manual menyembunyikan modal.

$ ( '#modal-saya' ). modal ( 'sembunyikan' )

.modal(benar)

Mengembalikan instance kelas modal elemen.

$ ( '#modal-saya' ). modal ( benar )

Pemberitahuan Atau, ini dapat diambil dengan $().data('modal').

Acara

Kelas modal Bootstrap memperlihatkan beberapa peristiwa untuk menghubungkan ke fungsionalitas modal.

Peristiwa	Keterangan
menunjukkan	Acara ini langsung aktif ketika showmetode instance dipanggil.
ditampilkan	Acara ini dipicu ketika modal telah dibuat terlihat oleh pengguna (akan menunggu transisi css selesai).
bersembunyi	Acara ini dipecat segera ketika hidemetode instance telah dipanggil.
tersembunyi	Acara ini dipicu ketika modal telah selesai disembunyikan dari pengguna (akan menunggu transisi css selesai).

$ ( '#modal-saya' ). mengikat ( 'tersembunyi' , fungsi () {   
  // lakukan sesuatu ...
})

Demo

Luncurkan Modal

Plugin ini untuk menambahkan interaksi dropdown ke bootstrap topbar atau navigasi tab.

Unduh

Menggunakan boostrap-dropdown.js

$ ( '#topbar' ). tarik -turun ()

Markup

Untuk menambahkan fungsionalitas tarik-turun dengan cepat ke elemen navigasi apa pun, gunakan data-dropdownatribut. Setiap dropdown bootstrap yang valid akan diaktifkan secara otomatis.

<ul class = "tab" > 
  <li class = "aktif" ><a href = "#" > Beranda </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Dropdown </a>  
    <ul class = "menu tarik-turun" > 
      <li><a href = "#" > Tautan sekunder </a></li> 
      <li><a href = "#" > Ada yang lain di sini </a></li> 
      <li class = "pembagi" ></li> 
      <li><a href = "#" > Tautan lain </a></li> 
    </ul>
  </li>
</ul>

Perhatikan Jika ui Anda memiliki beberapa dropdown, pertimbangkan untuk menambahkan data-dropdownatribut ke elemen penampung yang lebih signifikan seperti .tabsatau .topbar.

Metode

$().dropdown()

Api terprogram untuk mengaktifkan menu untuk navigasi topbar atau tab tertentu.

Demo

Plugin ini untuk menambahkan interaksi scrollspy (autoupdate nav) ke bootstrap topbar.

Unduh

Menggunakan boostrap-scrollspy.js

$ ( '#topbar' ). tarik -turun ()

Markup

Untuk dengan mudah menambahkan perilaku scrollspy ke nav Anda, cukup tambahkan data-scrollspyatribut ke file .topbar.

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

Metode

$().scrollspy()

Otomatis mengaktifkan tombol navigasi dengan posisi gulir pengguna.

$ ( 'tubuh > .topbar' ). gulirSpy ()

Perhatikan tag jangkar Topbar harus memiliki target id yang dapat diselesaikan. Misalnya, a <a href="#home">home</a>harus sesuai dengan sesuatu di dom seperti <div id="home"></div>.

.scrollspy('segarkan')

Scrollspy men-cache tombol nav dan koordinat bagian untuk kinerja. Jika Anda perlu memperbarui cache ini (kemungkinan jika Anda memiliki konten dinamis) panggil saja metode penyegaran ini. Jika Anda menggunakan atribut data untuk mendefinisikan scrollspy Anda, panggil saja refresh di badan.

$ ( 'tubuh' ). scrollspy ( 'segarkan' )

Demo

Lihat navigasi bilah atas di halaman ini.

Plugin ini menambahkan fungsionalitas tab dan pil yang cepat dan dinamis.

Unduh

Menggunakan boostrap-tabs.js

$ ( '.tab' ). tab ()

Markup

Anda dapat mengaktifkan navigasi tab atau pil tanpa menulis javascript apa pun hanya dengan memberi mereka a data-tabsatau data-pillsatribut.

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

Metode

$().tabs atau $().pills

Mengaktifkan fungsionalitas tab dan pil untuk wadah tertentu. Tautan tab harus merujuk id dalam dokumen.

<ul class = "tab" > 
  <li class = "aktif" ><a href = "#home" > Beranda </a></li>  
  <li><a href = "#profile"> Profil </a> </li> 
  <li><a href = "#messages"> Pesan </a> </li> 
  <li><a href = "#settings"> Setelan </a> </li> 
</ul>
 
<div class = "konten pil" > 
  <div class = "aktif" id = "home" > ... </div>  
  <div id = "profil" > ... </div> 
  <div id = "pesan" > ... </div> 
  <div id = "pengaturan" > ... </div> 
</ul>
 
<skrip>
  $ ( fungsi () {  
    $ ( '.tab' ). tab ()
  })
</skrip>

Demo

• Rumah
• Profil
• Pesan
• Pengaturan

Berdasarkan plugin jQuery.tipsy yang luar biasa yang ditulis oleh Jason Frame; twipsy adalah versi terbaru, yang tidak bergantung pada gambar, menggunakan css3 untuk animasi, dan atribut data untuk penyimpanan judul!

Unduh

Menggunakan bootstrap-twipsy.js

$ ( '#contoh' ). Twipsy ( pilihan )

Pilihan

Nama	Tipe	bawaan	keterangan
menghidupkan	boolean	BENAR	terapkan transisi fade css ke tooltip
delayIn	nomor	0	delay sebelum menampilkan tooltip (ms)
delayOut	nomor	0	delay sebelum menyembunyikan tooltip (ms)
mundur	rangkaian	''	teks untuk digunakan saat tidak ada judul tooltip
penempatan	rangkaian	'di atas'	bagaimana memposisikan tooltip - di atas | di bawah | kiri | Baik
html	boolean	Salah	memungkinkan konten html dalam tooltip
hidup	boolean	Salah	gunakan delegasi acara alih-alih penangan acara individu
mengimbangi	nomor	0	offset piksel dari tooltip dari elemen target
judul	string | fungsi	'judul'	atribut atau metode untuk mengambil teks judul
pemicu	rangkaian	'melayang'	bagaimana tooltip dipicu - arahkan kursor | fokus | panduan

Metode

$().twipsy(opsi)

Melampirkan handler twipsy ke koleksi elemen.

.twipsy('tampilkan')

Mengungkapkan elemen twipsy.

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

.twipsy('sembunyikan')

Menyembunyikan elemen twipsy.

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

.twipsy(benar)

Mengembalikan instance kelas twipsy elemen.

$ ( '#elemen' ). twipe ( benar )

Pemberitahuan Atau, ini dapat diambil dengan $().data('twipsy').

Demo

Plugin popover menyediakan antarmuka sederhana untuk menambahkan popover ke aplikasi Anda. Ini memperluas plugin boostrap-twipsy.js , jadi pastikan untuk mengambil file itu juga saat menyertakan popover di proyek Anda!

Unduh

Menggunakan boostrap-popover.js

$ ( '#contoh' ). popover ( opsi )

Pilihan

Nama	Tipe	bawaan	keterangan
menghidupkan	boolean	BENAR	terapkan transisi fade css ke tooltip
delayIn	nomor	0	delay sebelum menampilkan tooltip (ms)
delayOut	nomor	0	delay sebelum menyembunyikan tooltip (ms)
mundur	rangkaian	''	teks untuk digunakan saat tidak ada judul tooltip
penempatan	rangkaian	'Baik'	bagaimana memposisikan tooltip - di atas | di bawah | kiri | Baik
html	boolean	Salah	memungkinkan konten html dalam tooltip
hidup	boolean	Salah	gunakan delegasi acara alih-alih penangan acara individu
mengimbangi	nomor	0	offset piksel dari tooltip dari elemen target
judul	string | fungsi	'judul'	atribut atau metode untuk mengambil teks judul
isi	string | fungsi	'data-konten'	atribut atau metode untuk mengambil teks konten
pemicu	rangkaian	'melayang'	bagaimana tooltip dipicu - arahkan kursor | fokus | panduan

Metode

$().popover(opsi)

Menginisialisasi popover untuk koleksi elemen.

.popover('tampilkan')

Mengungkapkan popover elemen.

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

.popover('sembunyikan')

Menyembunyikan popover elemen.

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

Demo

arahkan untuk popover

Plugin lansiran adalah kelas super kecil untuk menambahkan fungsionalitas dekat ke lansiran.

Unduh

Menggunakan bootstrap-alerts.js

$ ( ".alert-pesan" ). waspada ()

Markup

Cukup tambahkan data-alertatribut ke pesan peringatan Anda untuk secara otomatis memberi mereka fungsionalitas yang dekat.

Metode

$().peringatan()

Membungkus semua peringatan dengan fungsionalitas yang dekat. Agar lansiran Anda bernyawa saat ditutup, pastikan lansiran .fadedan .inkelas sudah diterapkan padanya.

.alert('tutup')

Menutup peringatan.

$ ( ".alert-pesan" ). waspada ( 'tutup' )

Demo