Bootstrap merupakan salah satu framework CSS yang paling populer dikalangan web developer. Selain dari kemampuanya, bootstrap juga menjadi pelopor dalam metode mobile first. Dimana pembuatan desain website, didahulukan dari tampilan mobile terlebih dahulu. Pertama kali saya menggunakan bootstrap itu dikala namanya masih twitter bootstrap. Saya kurang tau versi berapa, cuman bootstrap ini menjadi pengganti dari Ext2JS.
Komponen Bootstrap
Seperti framework css pada umumnya, bootstrap telah memiliki elemen yang sudah ada bawaan salah satunya Modal. Modal atau kalau dalam istilah pemrograman dekstopnya Pop-Up dialog, ini memang sangat banyak sekali manfaatnya. Mulai dari hanya pemberitahuan biasa, isian satu halaman, pemilihan satu halaman, dan masih banyak lagi.
Sekilas Tentang Event
Event atau kejadian merupakan hal yang lumrah ada divarian bahasa pemrograman Java DKK. Event tersebut biasanya adalah istilah lain ketika sesuatu telah terjadi. Misalkan dalam javascript, ketika di klik maka event yang dikenali secara bahasa pemrograman adalah onclick. Kemudian event ketika mouse ada diatas elemen tertentu, maka eventnya adalah onmousehover. Event ini bisa kita gunakan untuk menanam listener – atau istilah lumrahnya, menanam fungsi ketika – event itu dieksekusi.
Event Khusus
Event khusus atau event bentukan biasanya ada secara bawaan dari setiap framework CSS yang kita gunakan. Event ini tidak ada secara umum, hanya untuk framework-framework tertentu. Tentu saja hal ini hanya bisa didapatkan dari dokumentasi resmi masing-masing framework.
Event Modal Bootstrap
Pada umumnya hanya ada dua event dalam modal ini, salah satunya adalah event onshow dan onhide. Namun, karena event ini pasti akan saling timpa antara event yang sudah ada pada bawaan, maka event ini dialiaskan kembali menjadi event bentukan bawaan bootstrap.
Event Modal Bootstrap Show
Untuk menanam event show cukup gunakan kode seperti ini
$("#nama_id_modal").on("shown.bs.modal",function(e){ //lakukan fungsi ini console.log('Modal tampil!'); });
Event Modal Bootstrap Hide
Untuk menanam event show cukup gunakan kode seperti ini untuk bootstrap versi 3.
$("#nama_id_modal").on("hidden.bs.modal",function(e){ //lakukan fungsi ini console.log('Modal hidden!'); });
Sementara untuk bootstrap versi 2
$("#nama_id_modal").on("hidden",function(e){ //lakukan fungsi ini console.log('Modal hidden!'); });
Demikian. Semoga membantu.