Plugin Javascript Bootstrap Oleh: ricky orlando napitupulu
Salam bro/sis :) kali ini saya akan menunjukkan plugin javascript yang keren-keren dari bootstrap, yang dapat membuat halaman web menjadi lebih interaktif. Apa saja itu ? Check this out :D Sebelumnya siapkan dulu file yang dibutuhkan yaitu bootstrap.css jquery.js dan bootstrap.js Kamu bisa download disini Jika sudah didownload jangan dibiarin aje ye :D di embed ke dokumen html nya :D Jika su...
Salam bro/sis :) kali ini saya akan menunjukkan plugin javascript yang keren-keren dari bootstrap, yang dapat membuat halaman web menjadi lebih interaktif. Apa saja itu ? Check this out :D Sebelumnya siapkan dulu file yang dibutuhkan yaitu bootstrap.css jquery.js dan bootstrap.js Kamu bisa download disini Jika sudah didownload jangan dibiarin aje ye :D di embed ke dokumen html nya :D Jika sudah yuk kita mulai ❍
Alert
alert ini digunakan untuk menampilkan pesan notifikasi kepada user, ada yang menggunakan tombol ada juga yang tidak. Difitur alert ini tersedia juga loh tombol close nya :D. Kamu bisa kostumisasi dimana alert ini akan ditampilkan ■
Model Bertombol
× Oh snap! You got an error!
Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Take this action Or do this
■
Model Tidak Bertombol
× <strong>Holy guacamole! Best check yo self, you're not looking too good.
Penampakanya :
❍
Modal
Modal ini semacam alert box yang biasa kita buat dengan javascript, namun bootstrap membuatnya lebih baik
A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart
defaults.
Dan ini contoh memanggil/menampilkan/trigger modal nya
Tampilkan Contoh Modal Yang perlu diperhatikan adalah pastikan id modal yang dipanggil sama dengan nilai href pada trigger. Pada contoh diatas id modalku pada modal dan href modalku pada trigger nya ❍
POPOVER
popover ini masih saudara kandung dengan yang namanya tooltip Jadi ketika kamu mengarahkan kursor kesuatu objek muncul la si popover ini. Berikut penampakanya :
Berikut implementasinya.
Profil Selanjutnya tambahkan skrip javascript berikut ini, perhatian : skrip ini harus diletakkan dibawah Jquery.js
<script> $(function(){ $("a[rel=popover]").popover({ placement : 'right', trigger : 'hover' }); }) Kamu harus menambahkan rel="popover" title dan data-content untuk menampilkan popover pada suatu objek. Jadi ketika kursor diarahkan kepada link profil maka akan muncul popover nya, menampilkan sesuai dengan nilai yang diberi pada atribut title dan data-content Atribut untuk popover ini bisa dikostumisasi, silahkan liat atribut serta nilai yang tersedia pada gambar dibawah ini.
❍
Tooltip
Nah untuk yang satu ini sama seperti tooltip biasanya, hanya saja warna backgroundnya hitam dan tulisanya berwarna putih.
Implementasinya kamu cukup menambahkan rel="tooltip" dan title yang nilainynya akan ditampilkan pada tooltip.
hover over me Lalu tambahkan skrip javascript berikut harus dibawah skrip jquery.js kamu
<script> $(function(){ $('a').tooltip(); }); Gimana mudah bukan ? :D dengan bootstrap kita dapat menghasilkan sesuatu yang wow dengan sangat mudah. Ok sampai jumpa dikelanjutan tutorial ini. Bye...
Download Demo
Tentang Penulis
ricky orlando napitupulu Nothing special :) Saya seorang lelaki, mahasiswa, blogger, cinta musik
dan juga sedang mencoba ilmu desain grafis. Tidak banyak pengetahuan yang bisa saya bagikan, Namun saya akan sangat senang membagikan pengetahuan tersebut bila dibutuhkan :).
