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...

Plugin Javascript 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
<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
<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 :

 photo alert.jpg

    • Modal

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

 photo modal.png

<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

<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 :

 photo popover.png

Berikut implementasinya.

    <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

    
<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.

 photo popover2.png

    • Tooltip

Nah untuk yang satu ini sama seperti tooltip biasanya, hanya saja warna backgroundnya hitam dan tulisanya berwarna putih.

 photo tooltip.png

Implementasinya kamu cukup menambahkan rel="tooltip" dan title yang nilainynya akan ditampilkan pada tooltip.

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

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

        
 <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...

Download Demo


About Author

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 :).


Comment & Discussions