Tutorial Programming

Plugin Javascript Bootstrap I

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="#">×</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="#">×</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
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">×</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 :
 photo popover.png
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.
 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.
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...

No comments:

Post a Comment

Tutorial Programming Designed by Templateism | Ary EJFA Copyright © 2015

Theme images by richcano. Powered by Blogger.