Plugin Javascript Bootstrap - Alert Bootstrap, Modal Bootstrap, Popover Bootstrap, Tooltip Bootstrap

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

1 2 3 4 5 6 7 8

<div class="alert alert-block alert-error fade in">   <a class="close" data-dismiss="alert" href="#">&times;</a>     <h4 class="alert-heading">Oh snap! You got an error!</h4>     <p>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.</p>              <p>     <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>              </p> </div>

• Model Tidak Bertombol

1 2 3 4

<div class="alert fade in">     <a class="close" data-dismiss="alert" href="#">&times;</a>     <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good. </div>

Penampakanya :

• Modal

Modal ini semacam alert box yang biasa kita buat dengan javascript, namun bootstrap membuatnya lebih baik

1 2 3 4 5 6 7 8 9 10 11 12 13

<div id="modalku" class="modal hide fade">    <div class="modal-header">      <a class="close" data-dismiss="modal">&times;</a>      <h3>Contoh Modal</h3>    </div>    <div class="modal-body">      <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>                  </div>    <div class="modal-footer">      <a href="#" class="btn btn-success">lanjut</a>      <a href="#" class="btn" data-dismiss="modal">Batal</a>    </div>  </div>

Dan ini contoh memanggil/menampilkan/trigger modal nya

1	<a class="btn" data-toggle="modal" href="#modalku" >Tampilkan Contoh Modal</a>

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.

1	<a href="#" class="btn btn-info" rel="popover" title="Profil Saya" data-content="I am human I am human I am humanI am human I am human">Profil</a>

Selanjutnya tambahkan skrip javascript berikut ini, perhatian : skrip ini harus diletakkan dibawah Jquery.js

1 2 3 4 5 6 7 8

<script>     $(function(){                $("a[rel=popover]").popover({           placement : 'right',              trigger   : 'hover'       });          }) </script>

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.

1	<a href="#" rel="tooltip" title="ini adalah tooltip">hover over me</a>

Lalu tambahkan skrip javascript berikut harus dibawah skrip jquery.js kamu

1 2 3 4 5 6 7 8

<script> $(function(){ $('a').tooltip(); }); </script>

Gimana mudah bukan ? :D dengan bootstrap kita dapat menghasilkan sesuatu yang wow dengan sangat mudah. Ok sampai jumpa dikelanjutan tutorial ini. Bye...