Wednesday, June 13, 2012

Cara Membuat Kotak Berubah Warna Dengan JQuery Event


Lumayan dapet materi postingan lagi. Makin ke sini makin tambah tertarik sama JQuery, meskipun belum bisa ngapa-ngapain tapi cukup asik juga belajar JQuery. Kali ini saya coba posting mengenai Jquery Event Double Klik. Langsung saja, karena materi postingan kali ini sedikit, Pertama hal yang dilakukan adalah membuat CSS nya
dbklik {
        background: yellow;
        width: 60px;
        height: 60px;
        float: left;
        margin: 10px;
        border:2px dotted #39f;
        cursor: pointer;
      }​
Kemudian Buat Script JQuery nya, dalam script ini berfungsi saat area/kotak diDouble klik maka warna kotak akan berubah warna menjadi merah, yaitu pada fungsi pertama dari kode di bawah ini, kemudian saat mengklik satu kali maka warna kotak akan berubah menjadi warna biru begitu seterusnya. Tapi saya belum nemuin nih buat balikin lagi ke warna awal. Maklum baru belajar hehe.
$(function() {
          $("dbklik").dblclick(function(){
                $(this).css({ background: "red"});
            });          
});

$(function() {
          $("dbklik").click(function(){
                $(this).css({ background: "blue"});
            });          
        });

​
Lalu kode pemanggilnya
Klik 2x pada setiap kotak untuk mengubah warnanya
    <dbklik></dbklik>
    <dbklik></dbklik>
    <dbklik></dbklik>
    <dbklik></dbklik>
    <dbklik></dbklik>
    <dbklik></dbklik>
Di sini saya menggunakan JQuery <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
Untuk lebih jelasnya bisa melihat demonya pada tombol di samping kanan ==>

17 comments:

  1. wiw, udah bisa jquery ternyata, nice dah =D

    ReplyDelete
  2. aje gile efek css3-nya brooo, mancappp \m/
    semeriwing lihat opening blog master :-d

    ReplyDelete
  3. Kalau saya belum mau belajar Jquery, masih mau mengasah css :D

    ReplyDelete
  4. wah, keren nih sob, saya doakan semoga nemuin kode buat mengembalikan warna pada posisi awal,

    ReplyDelete