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
- $ ( '#my-modal' ). modal ( pilihan )
Nama | menaip | lalai | penerangan |
---|---|---|---|
latar belakang | boolean | salah | Termasuk unsur tirai latar modal |
papan kekunci | boolean | salah | Menutup modal apabila kekunci escape ditekan |
tunjuk | boolean | salah | Membuka modal pada permulaan kelas |
Anda boleh mengaktifkan modals pada halaman anda dengan mudah tanpa perlu menulis satu baris javascript. Hanya berikan elemen data-controls-modal
atribut 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 = "true" > Modal Pelancaran </a>
Notis Jika anda mahu modal anda dianimasikan masuk dan keluar, cuma tambahkan .fade
kelas pada .modal
elemen anda (rujuk demo untuk melihat tindakan ini).
Mengaktifkan kandungan anda sebagai modal. Menerima pilihan pilihan object
.
- $ ( '#my-modal' ). modal ({
- closeOnEscape : benar
- })
Togol mod secara manual.
- $ ( '#my-modal' ). modal ( 'togol' )
Membuka modal secara manual.
- $ ( '#my-modal' ). modal ( 'tunjukkan' )
Secara manual menyembunyikan modal.
- $ ( '#my-modal' ). modal ( 'sembunyi' )
Mengembalikan contoh kelas modal elemen.
- $ ( '#my-modal' ). modal ( benar )
Perhatikan Sebagai alternatif, ini boleh diambil dengan $().data('modal')
.
Kelas modal Bootstrap mendedahkan beberapa peristiwa untuk menyambung ke fungsi modal.
Peristiwa | Penerangan |
---|---|
tunjuk | Peristiwa ini menyala serta-merta apabila show kaedah contoh dipanggil. |
ditunjukkan | Peristiwa ini dicetuskan apabila modal telah dilihat kepada pengguna (akan menunggu peralihan css selesai). |
bersembunyi | Peristiwa ini dicetuskan serta-merta apabila hide kaedah 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 ...
- })
Pemalam ini adalah untuk menambah interaksi lungsur turun pada bar atas bootstrap atau navigasi tab.
Muat turun
- $ ( '#topbar' ). dropdown ()
Untuk menambah fungsi lungsur turun dengan cepat pada mana-mana elemen nav, gunakan data-dropdown
atribut. 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-dropdown
atribut pada elemen bekas yang lebih penting seperti .tabs
atau .topbar
.
Api terprogram untuk mengaktifkan menu untuk bar atas tertentu atau navigasi tab.
Pemalam ini adalah untuk menambah interaksi scrollspy (auto pengemaskinian nav) pada bar atas bootstrap.
Muat turun
- $ ( '#topbar' ). dropdown ()
Untuk menambahkan gelagat scrollspy pada navigasi anda dengan mudah, cuma tambahkan data-scrollspy
atribut pada .topbar
.
- <div class = "topbar" data-scrollspy = "scrollspy" > ... </div>
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 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' )
Lihat navigasi bar atas pada halaman ini.
Pemalam ini menambah fungsi tab dan pil yang cepat dan dinamik.
Muat turun
- $ ( '.tabs' ). tab ()
Anda boleh mengaktifkan navigasi tab atau pil tanpa menulis sebarang javascript dengan hanya memberi mereka atribut data-tabs
atau .data-pills
- <ul class = "tab" data-tabs = "tab" > ... </ul>
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>
- </ul>
- <skrip>
- $ ( fungsi () {
- $ ( '.tabs' ). tab ()
- })
- </script>
Denim mentah anda mungkin tidak pernah mendengarnya seluar pendek jean Austin. Nesciunt tauhu stumptown aliqua, pembersihan master synth retro. Misai cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex sotong. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan pakaian Amerika, tukang daging voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.
Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.
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
- $ ( '#contoh' ). twinsy ( 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 |
Melampirkan pengendali twipsy pada koleksi elemen.
Mendedahkan unsur twipsy.
- $ ( '#elemen' ). twipsy ( 'tunjukkan' )
Menyembunyikan elemen twipsy.
- $ ( '#elemen' ). twipsy ( 'sembunyi' )
Mengembalikan contoh kelas twipsy elemen.
- $ ( '#elemen' ). twipsy ( benar )
Perhatikan Sebagai alternatif, ini boleh diambil dengan $().data('twipsy')
.
Seluar ketat tahap seterusnya keffiyeh anda mungkin tidak pernah mendengarnya. Gerai foto janggut denim mentah letterpress vegan messenger bag stumptown. Seitan dari ladang ke meja, pakaian amerika quinoa 8-bit lestari fixie mcsweeney mempunyai terry richardson vinyl chambray. Beard stumptown, cardigan banh mi lomo thundercats. Tauhu biodiesel williamsburg marfa, empat chambray vegan pembersih loko mcsweeney. Seorang artis yang sangat ironik apa pun keytar, scenester farm-to-table banksy Austin twitter mengendalikan freegan cred denim mentah kopi asal tunggal yang viral.
Pemalam popover menyediakan antara muka yang mudah untuk menambah popover pada aplikasi anda. Ia memanjangkan pemalam boostrap-twipsy.js , jadi pastikan anda mengambil fail itu juga apabila menyertakan popover dalam projek anda!
Muat turun
- $ ( '#contoh' ). popover ( 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' | atribut atau kaedah untuk mendapatkan semula teks kandungan |
pencetus | tali | 'legar' | cara petua alat dicetuskan - tuding | tumpuan | manual |
Memulakan popover untuk koleksi elemen.
Mendedahkan unsur popover.
- $ ( '#elemen' ). popover ( 'tunjukkan' )
Menyembunyikan unsur popover.
- $ ( '#elemen' ). popover ( 'sembunyi' )
Pemalam amaran ialah kelas yang sangat kecil untuk menambah kefungsian rapat pada amaran.
Muat turun
- $ ( ".alert-message" ). berjaga- jaga ()
Cuma tambahkan data-alert
atribut pada mesej makluman anda untuk memberikannya kefungsian rapat secara automatik.
Membungkus semua makluman dengan kefungsian rapat. Untuk membolehkan makluman anda dianimasikan apabila ditutup, pastikan makluman tersebut mempunyai .fade
dan .in
kelas telah digunakan padanya.
Menutup makluman.
- $ ( ".alert-message" ). makluman ( 'tutup' )