Pemalam Modal kami adalah pemalam yang sangat tipis pada pemalam modal js tradisional, mengambil perhatian khusus untuk memasukkan hanya fungsi kosong yang kami perlukan di twitter.

Muat turun

Menggunakan bootstrap-modal

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

Pilihan

Nama	menaip	lalai	penerangan
latar belakang	boolean, rentetan	salah	Termasuk unsur tirai latar modal. Tetapkan tirai latar kepada "static"jika anda tidak mahu modal ditutup apabila tirai latar diklik.
papan kekunci	boolean	salah	Menutup modal apabila kekunci escape ditekan
tunjuk	boolean	salah	Membuka modal pada permulaan kelas

Penanda

Anda boleh mengaktifkan modals pada halaman anda dengan mudah tanpa perlu menulis satu baris javascript. Hanya berikan elemen data-controls-modalatribut yang sepadan dengan id elemen modal, dan apabila diklik, ia akan melancarkan modal anda. Untuk menambah pilihan modal, cuma masukkannya sebagai atribut data juga.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Modal Pelancaran </a>    

Notis Jika anda mahu modal anda dianimasikan masuk dan keluar, cuma tambahkan .fadekelas pada .modalelemen anda (rujuk demo untuk melihat tindakan ini).

Kaedah

.modal(options)

Mengaktifkan kandungan anda sebagai modal. Menerima pilihan pilihan object.

$ ( '#my-modal' ). modal ({
  papan kekunci : benar 
})

.modal('togol')

Togol mod secara manual.

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

.modal('show')

Membuka modal secara manual.

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

.modal('sembunyi')

Secara manual menyembunyikan modal.

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

.modal(benar)

Mengembalikan contoh kelas modal elemen.

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

Perhatikan Sebagai alternatif, ini boleh diambil dengan $().data('modal').

Peristiwa

Kelas modal Bootstrap mendedahkan beberapa peristiwa untuk menyambung ke fungsi modal.

Peristiwa	Penerangan
tunjuk	Peristiwa ini menyala serta-merta apabila showkaedah contoh dipanggil.
ditunjukkan	Peristiwa ini dicetuskan apabila modal telah dilihat kepada pengguna (akan menunggu peralihan css selesai).
bersembunyi	Peristiwa ini dicetuskan serta-merta apabila hidekaedah contoh telah dipanggil.
tersembunyi	Peristiwa ini dicetuskan apabila modal telah selesai disembunyikan daripada pengguna (akan menunggu peralihan css selesai).

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

Demo

Lancarkan Modal

Pemalam ini adalah untuk menambah interaksi lungsur turun pada bar atas bootstrap atau navigasi tab.

Muat turun

Menggunakan bootstrap-dropdown.js

$ ( '#topbar' ). dropdown ()

Penanda

Untuk menambah fungsi lungsur turun dengan cepat pada mana-mana elemen nav, gunakan data-dropdownatribut. Sebarang dropdown bootstrap yang sah akan diaktifkan secara automatik.

<ul class = "tab" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Dropdown </a>  
    <ul class = "menu lungsur" > 
      <li><a href = "#" > Pautan sekunder </a></li> 
      <li><a href = "#" > Sesuatu yang lain di sini </a></li> 
      <li class = "pembahagi" ></li> 
      <li><a href = "#" > Pautan lain </a></li> 
    </ul>
  </li>
</ul>

Notis Jika ui anda mempunyai beberapa lungsur turun, pertimbangkan untuk menambah data-dropdownatribut pada elemen bekas yang lebih penting seperti .tabsatau .topbar.

Kaedah

$().dropdown()

Api terprogram untuk mengaktifkan menu untuk bar atas tertentu atau navigasi tab.

Demo

Pemalam ini adalah untuk menambah interaksi scrollspy (auto pengemaskinian nav) pada bar atas bootstrap.

Muat turun

Menggunakan bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

Penanda

Untuk menambahkan gelagat scrollspy pada navigasi anda dengan mudah, cuma tambahkan data-scrollspyatribut pada .topbar.

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

Kaedah

$().scrollSpy()

Auto mengaktifkan butang navigasi mengikut kedudukan tatal pengguna.

$ ( 'badan > .bar atas' ). scrollSpy ()

Notis tag anchor Topbar mesti mempunyai sasaran id yang boleh diselesaikan. Sebagai contoh, <a href="#home">home</a>mesti sepadan dengan sesuatu dalam dom seperti <div id="home"></div>.

.scrollSpy('refresh')

Scrollspy menyimpan butang nav dan koordinat bahagian untuk prestasi. Jika anda perlu mengemas kini cache ini (mungkin jika anda mempunyai kandungan dinamik) cuma panggil kaedah muat semula ini. Jika anda menggunakan atribut data untuk menentukan scrollspy anda, cuma panggil muat semula pada badan.

$ ( 'badan' ). scrollSpy ( 'refresh' )

Demo

Lihat navigasi bar atas pada halaman ini.

Pemalam ini menawarkan fungsi tambahan untuk menguruskan keadaan butang.

Muat turun

Menggunakan bootstrap-buttons.js

$ ( '.tabs' ). butang ()

Kaedah

$().button('togol')

Togol keadaan tolak. Memberikan btn rupa bahawa ia telah diaktifkan.

Notis Anda boleh mendayakan auto togol butang dengan menggunakan data-toggleatribut.

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

$().button('loading')

Menetapkan keadaan butang kepada memuatkan - melumpuhkan butang dan menukar teks kepada memuatkan teks. Memuatkan teks hendaklah ditakrifkan pada elemen butang menggunakan atribut data data-loading-text.

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

$().button('reset')

Menetapkan semula keadaan butang - menukar teks kepada teks asal.

$().butang(rentetan)

Menetapkan semula keadaan butang - menukar teks kepada mana-mana keadaan teks yang ditentukan data.

<button class = "btn" data-complete-text = "selesai!" > ... </butang>   
<skrip>
  $('.btn').button('complete')
</script>

Demo

Memuatkan Demo Togol Demo

Pemalam ini menambah fungsi tab dan pil yang cepat dan dinamik.

Muat turun

Menggunakan bootstrap-tabs.js

$ ( '.tabs' ). tab ()

Penanda

Anda boleh mengaktifkan navigasi tab atau pil tanpa menulis sebarang javascript dengan hanya memberi mereka atribut data-tabsatau .data-pills

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

Kaedah

$().tab atau $().pil

Mengaktifkan fungsi tab dan pil untuk bekas tertentu. Pautan tab harus merujuk id dalam dokumen.

<ul class = "tab" > 
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Mesej </a></li> 
  <li><a href = "#settings" > Tetapan </a></li> 
</ul>
 
<div class = "kandungan pil" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profil" > ... </div> 
  <div id = "mesej" > ... </div> 
  <div id = "tetapan" > ... </div> 
</div>
 
<skrip>
  $ ( fungsi () {  
    $ ( '.tabs' ). tab ()
  })
</script>

Peristiwa

Peristiwa	Penerangan
ubah	Peristiwa ini berlaku pada perubahan tab. Gunakan event.targetdan event.relatedTargetuntuk menyasarkan tab aktif dan tab aktif sebelumnya masing-masing.

$ ( '#.tabs' ). ikat ( 'ubah' , fungsi ( e ) {   
  e . sasaran // tab diaktifkan
  e . relatedTarget // tab sebelumnya
})

Demo

• Rumah
• Profil
• Mesej
• tetapan
• Jatuh turun
  • @gemuk
  • @mdo

Berdasarkan pemalam jQuery.tipsy yang sangat baik yang ditulis oleh Jason Frame; twipsy ialah versi yang dikemas kini, yang tidak bergantung pada imej, menggunakan css3 untuk animasi dan atribut data untuk penyimpanan tajuk!

Muat turun

Menggunakan bootstrap-twipsy.js

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

Pilihan

Nama	menaip	lalai	penerangan
menghidupkan	boolean	benar	gunakan peralihan pudar css pada petua alat
delayIn	nombor	0	kelewatan sebelum menunjukkan petua alat (ms)
delayOut	nombor	0	kelewatan sebelum menyembunyikan petua alat (ms)
sandaran	tali	''	teks untuk digunakan apabila tiada tajuk petua alat hadir
penempatan	tali	'di atas'	cara meletakkan petua alat - di atas | di bawah | kiri | betul
html	boolean	salah	membenarkan kandungan html dalam petua alat
hidup	boolean	salah	gunakan perwakilan acara dan bukannya pengendali acara individu
mengimbangi	nombor	0	mengimbangi piksel petua alat daripada elemen sasaran
tajuk	rentetan, fungsi	'tajuk'	atribut atau kaedah untuk mendapatkan semula teks tajuk
pencetus	tali	'legar'	cara petua alat dicetuskan - tuding | tumpuan | manual
templat	tali	[penanda lalai]	Templat html yang digunakan untuk membuat twipsy.

Notis Pilihan contoh twipsy individu boleh ditentukan secara alternatif melalui penggunaan atribut data.

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

Kaedah

$().twipsy(pilihan)

Melampirkan pengendali twipsy pada koleksi elemen.

.twipsy('show')

Mendedahkan unsur twipsy.

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

.twipsy('sembunyi')

Menyembunyikan elemen twipsy.

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

.twipsy(benar)

Mengembalikan contoh kelas twipsy elemen.

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

Perhatikan Sebagai alternatif, ini boleh diambil dengan $().data('twipsy').

Demo

Pemalam popover menyediakan antara muka yang mudah untuk menambah popover pada aplikasi anda. Ia memanjangkan pemalam bootstrap-twipsy.js , jadi pastikan anda mengambil fail itu juga apabila menyertakan popover dalam projek anda!

Notis Anda mesti memasukkan fail bootstrap-twipsy.js sebelum bootstrap-popover.js.

Muat turun

Menggunakan bootstrap-popover.js

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

Pilihan

Nama	menaip	lalai	penerangan
menghidupkan	boolean	benar	gunakan peralihan pudar css pada petua alat
delayIn	nombor	0	kelewatan sebelum menunjukkan petua alat (ms)
delayOut	nombor	0	kelewatan sebelum menyembunyikan petua alat (ms)
sandaran	tali	''	teks untuk digunakan apabila tiada tajuk petua alat hadir
penempatan	tali	'betul'	cara meletakkan petua alat - di atas | di bawah | kiri | betul
html	boolean	salah	membenarkan kandungan html dalam petua alat
hidup	boolean	salah	gunakan perwakilan acara dan bukannya pengendali acara individu
mengimbangi	nombor	0	mengimbangi piksel petua alat daripada elemen sasaran
tajuk	rentetan, fungsi	'tajuk'	atribut atau kaedah untuk mendapatkan semula teks tajuk
kandungan	rentetan, fungsi	'kandungan data'	rentetan atau kaedah untuk mendapatkan semula teks kandungan. jika tiada yang disediakan, kandungan akan diperoleh daripada atribut kandungan data.
pencetus	tali	'legar'	cara petua alat dicetuskan - tuding | tumpuan | manual
templat	tali	[penanda lalai]	Templat html yang digunakan untuk memaparkan popover.

Notis Pilihan contoh popover individu boleh ditentukan secara alternatif melalui penggunaan atribut data.

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

Kaedah

$().popover(pilihan)

Memulakan popover untuk koleksi elemen.

.popover('show')

Mendedahkan unsur popover.

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

.popover('sembunyi')

Menyembunyikan unsur popover.

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

Demo

tuding untuk popover

Pemalam amaran ialah kelas yang sangat kecil untuk menambah kefungsian rapat pada amaran.

Muat turun

Menggunakan bootstrap-alerts.js

$ ( ".alert-message" ). berjaga- jaga ()

Penanda

Cuma tambahkan data-alertatribut pada mesej makluman anda untuk memberikannya kefungsian rapat secara automatik.

Pilihan

Nama	menaip	lalai	penerangan
pemilih	tali	'.tutup'	Apakah pemilih untuk disasarkan untuk menutup makluman.

Kaedah

$().alert()

Membungkus semua makluman dengan kefungsian rapat. Untuk membolehkan makluman anda dianimasikan apabila ditutup, pastikan makluman tersebut mempunyai .fadedan .inkelas telah digunakan padanya.

.alert('close')

Menutup makluman.

$ ( ".alert-message" ). makluman ( 'tutup' )

Demo