FYI
tips dan trik
tutorial
Menggunakan Modal Bootstrap dan Tooltip Bootstrap pada tabel
01.21Unknown
Ada yg sudah tau apa itu Modal Bootstrap? bukan, bukan berbentuk uang untuk buka usaha.
Modal bootstrap adalah kotak dialog yg muncul ketika di klik, untuk lebih lanjut silahkan lihat di dokumentasi dari Bootstrap sendiri, modal.
.png)
Lah kalo Tooltip Bootstrap apaan ya? tooltip adalah custom dari title tau kan fungsi title di html kek gimana? nah ini di kosum dari bootstrap hingga memiliki tampilan menarik, saat kursor kita berada di objek tersebut maka akan muncul sesuatu, seperti ini tooltip
.png)
.png)
Sekarang kita mulai, untuk gambarannya silahkan lihat demonya di INI DEMO
Untuk kebutuhannya css dari bootstrap, library jQuery, dan library js dari bootstrap.
ini script untuk kotak dialog modal, detailnya silahkan lihat di modal. atau seperti script dibawah ini:
Diatas adalah script untuk bagian modal
diatas adalah syntax untuk menampilkan tabel beserta action nya. perhatikan syntax yang berada di dalam tag <a>
ada syntax class="edit-record" dan data-id="1" yang berarti dia akan mengambil data yang memiliki id = 1.
sedangkan data-toggle dan data-placement merupakan syntax untuk menampilkan tooltip, jelasnya silahkan baca dokumen tootlip.
Untuk menampilkan modal, kita memerlukan bantuan dari jQuery, perhatikan pada bagian tag <a> yang ada di dalam tabel, jika kita meng-klik object yang memiliki class EDIT_RECORD maka selanjutnya akan menampilkan modal dialog. kemudian konten dari modal dialog tersebut berasal dari file hasil.php.
Berikut konten yang ada di hasil.php
Yaps, selesai. perlu diperhatikan kita harus meload css bootstrap, js bootstrap, dan js dari jQuery.
Jika anda memiliki alternatif lain mari kita diskusikan di kolom komentar.
Modal bootstrap adalah kotak dialog yg muncul ketika di klik, untuk lebih lanjut silahkan lihat di dokumentasi dari Bootstrap sendiri, modal.
.png)
Lah kalo Tooltip Bootstrap apaan ya? tooltip adalah custom dari title tau kan fungsi title di html kek gimana? nah ini di kosum dari bootstrap hingga memiliki tampilan menarik, saat kursor kita berada di objek tersebut maka akan muncul sesuatu, seperti ini tooltip
Nah, itu dia yang dimaksud Modal dan Tooltip Bootstrap. sekarang cara bikinnya gimana?
Sebenarnya kalo kita ngikutin dokumentasi dari getbootstrap.com udah bisa jalan, tapi masalahnya adalah kalo kita ingin menampilkan keduanya dalam 1 objek pasti selalu gagal, kenapa? itu karna mereka tidak dapat mengeksekusi tooltip dan modal secara bersamaan. Contoh saja pada aplikasi CRUD(Create Read Update Delete) yang kita buat ada fitur untuk mengedit data, agar fleksibel untuk fungsi Edit kita buat dengan menggunakan Modal.Sekarang kita mulai, untuk gambarannya silahkan lihat demonya di INI DEMO
Untuk kebutuhannya css dari bootstrap, library jQuery, dan library js dari bootstrap.
ini script untuk kotak dialog modal, detailnya silahkan lihat di modal. atau seperti script dibawah ini:
Diatas adalah script untuk bagian modal
diatas adalah syntax untuk menampilkan tabel beserta action nya. perhatikan syntax yang berada di dalam tag <a>
ada syntax class="edit-record" dan data-id="1" yang berarti dia akan mengambil data yang memiliki id = 1.
sedangkan data-toggle dan data-placement merupakan syntax untuk menampilkan tooltip, jelasnya silahkan baca dokumen tootlip.
Untuk menampilkan modal, kita memerlukan bantuan dari jQuery, perhatikan pada bagian tag <a> yang ada di dalam tabel, jika kita meng-klik object yang memiliki class EDIT_RECORD maka selanjutnya akan menampilkan modal dialog. kemudian konten dari modal dialog tersebut berasal dari file hasil.php.
Berikut konten yang ada di hasil.php
Yaps, selesai. perlu diperhatikan kita harus meload css bootstrap, js bootstrap, dan js dari jQuery.
Jika anda memiliki alternatif lain mari kita diskusikan di kolom komentar.
.png)
.png)
.png)
.png)
.png)
.png)
