Harian Cheyuz » jquery http://hariancheyuz.chevonest.com Konten tentang perjalanan kehidupan seorang Cheyuz Sat, 03 Jul 2010 00:37:39 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Membuat Toggle Button dengan JQuery http://hariancheyuz.chevonest.com/_other/membuat-toggle-button-dengan-jquery http://hariancheyuz.chevonest.com/_other/membuat-toggle-button-dengan-jquery#comments Wed, 16 Dec 2009 16:57:34 +0000 Cheyuz http://hariancheyuz.chevonest.com/?p=500

Pada postingan yang lalu, kita udah mengenal JQuery dan mengetahui cara bikin fade in dan fade out pada suatu halaman web dengan menggunakan JQuery..

Jika waktu itu kita menggunakan 2 tombol, yaitu tombol tampilkan dan sembunyikan, maka kali ini kita akan menggunakan tombol toggle, yaitu tombol yang berfungsi untuk menangani 2 fungsi tertentu atau lebih. Dengan menggunakan toggle, kasus yang kemarin bisa ‘dihandle’ dengan menggunakan satu tombol toggle aja…

Jangan lupa untuk memanggil terlebih dahulu script Jquery di bagian header, bisa dilihat di link ini: Mengenal JQuery

Pertama-tama, kita bikin dulu sebuah button dengan class tombol (sebenernya ada 2 buah, tetapi tombol yang satu lagi ga keliatan ato hidden), kode html-nya kayak gini:

<body>
    <button class="tombol">Foto 2</button>
    <button class="tombol" style="display:none">Foto 1</button>
</body>

Seperti yang terlihat di atas, ada 2 tombol… dan mempunyai class yang sama, jadi kedua tombol itu akan dijadikan sebuah tombol toggle, yang artinya klo tombol yang pertama diklik, maka tombol yang kedua akan tampil, sedangkan tombol yang pertama akan hilang (hidden), dan begitu sebaliknya.. itu konsep sederhana toggle..

Dan perlu diperhatikan, tombol lain harus diberi style style untuk display yang bernilai ‘none’ yang artinya tidak bisa terlihat..

OK, untuk membuktikan bahwa tombol tersebut bisa dijadikan toggle, tambahkan script berikut sebelum elemen button. Seperti ini:

<body>
    <script>
    $().ready(function(){
        $(".tombol").click(function(){
            $(".tombol").toggle();
        });
    });
    </script>
 
    <button class="tombol">Foto 2</button>
    <button class="tombol" style="display:none">Foto 1</button>
</body>

Jika tombol yang pertama diklik, maka dia akan hidden, sedangkan tombol yang kedua akan muncul, dan sebaliknya.. bila tombol yang kedua muncul dan diklik, maka tombol satu akan muncul, tombol 2 akan hidden… dan seterusnya.

Dan perlu diingat, klo kita ingin 2 elemen dijadikan 1 toggle button, maka yang berperan di jquery/yg dapat dimanipulasi jquery adalah class, bukan id. Jadi kita memberi class ‘tombol’ di masing-masing button. Dan perlu diperhatikan juga, jangan memakai this di objek yang merupakan isi dari fungsi jquery, misal seperti berikut:

    <script>
    $().ready(function(){
        $(".tombol").click(function(){
            $(this).toggle();
        });
    });
    </script>

Kalo temen2 bikin kayak script tersebut, bisa sih bisa cuman ngga ngerubah elemen menjadi tombol yang kedua, yang ada malah jadi hilang keduanya…

Nah, ceritanya si tombol tersebut akan menghandle sebuah foto menjadi foto lain secara bergantian ketika tombol tersebut diklik..
kita tambahkan sebuah gambar di bawah tombol.

<img class="gambar" src="foto.jpg" />

Karena gambar juga akan tampil bergantian dengan gambar lain kalo diklik, maka tambah lagi 1 gambar di bawah foto.jpg.

<img class="gambar" src="foto.jpg" />
<img class="gambar" src="foto2.jpg" style="display:none" />

Tambahkan juga script jquery yang tadi menjadi seperti ini:

<script>
    $().ready(function(){
        $(".tombol").click(function(){
            $(".gambar").toggle('fast');
            $(".tombol").toggle();
        });
    });
</script>

Di situ terlihat ada parameter di fungsi toggle yaitu bernilai ‘fast’, yang berarti akan di-toggle dengan ditambahkan animasi yang cepat, jika diberi nilai ’slow’, maka animasi akan bergerak lambat.

Jadi, kode html semuanya kira2 seperti ini:

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

<body>
    <script>
        $().ready(function(){
            $(".tombol").click(function(){
                $(".gambar").toggle('fast');
                $(".tombol").toggle();
            });
        });
    </script>
    <button class="tombol">Foto 2</button>
    <button class="tombol" style="display:none">Foto 1</button>
    <img class="gambar" src="foto.jpg" />
    <img class="gambar" src="foto2.jpg" style="display: none" />
</body>

Jadi, ketika nanti muncul sebuah button dengan label “foto 2″ dan foto yang muncul adalah foto pertama, maka ketika diklik button tersebut, maka label button akan berubah menjadi “foto 1″ dan foto akan menjadi foto yang kedua, bisa diklik berulang-ulang.
untuk DEMO, silakan klik DI SINI!

]]> http://hariancheyuz.chevonest.com/_other/membuat-toggle-button-dengan-jquery/feed 4 Fade In dan Fade Out dengan JQuery http://hariancheyuz.chevonest.com/tutorial/fade-in-dan-fade-out-dengan-jquery http://hariancheyuz.chevonest.com/tutorial/fade-in-dan-fade-out-dengan-jquery#comments Mon, 14 Dec 2009 03:06:12 +0000 Cheyuz http://hariancheyuz.chevonest.com/?p=486

OK, sesuai janji… (walopun bilangnya udah beberapa hari yang lalu).. Cheyuz bakal ngebahas tentang JQuery lanjutan…

Waktu di postingan kemaren kan kita udah mengenal JQuery itu apa, dan udah dikasi contoh cara menyembunyikan sebuah gambar di html gimana,,, dan itu pun sangat sangat dasar…

OK, kali ini kita akan mencoba memakai fungsi Jquery untuk menampilkan dan menyembunyikan suatu gambar dengan event tombol yang udah kita set supaya klo tombol itu ditekan, maka fungsi akan dijalankan… dan kita akan mengenal Fade In dan Fade Out, yaitu membuat gambar tampil secara halus (dari transparan hingga opacity) dan Fade Out adalah sebaliknya (dari ada menjadi tiada secara halus)…

Hal pertama yang perlu kita lakukan adalah menambahkan script buat nge-load JQuery, silakan liat postingan sebelumnya untuk meliat gimana caranya ngeload JQuery, klik di sini

Klo udah dipasang, kita tinggal membuat elemen img (gambar) di bagian tag body, misalnya nama gambarnya adalah “foto.jpg” dan beri atribut id=”foto” untuk memberikan ID buat elemen tersebut, maka kode html dibuat seperti berikut..

...
<body>
  <img id="foto" src="foto.jpg" />
</body>

Kemudian buatlah 2 tombol (button) masing-masing dengan label “Sembunyikan”, dan satunya lagi “Munculkan”… ID dari masing-masing tombol berturut-turut adalah “sembunyi” dan “muncul”, jadi kode htmlnya menjadi sebagai berikut:

...
<body>
  <img id="foto" src="foto.jpg" />
  <button id="sembunyi">Sembunyikan</button>
  <button id="muncul">Munculkan</button>
</body>

Nah, kita sekarang udah bikin 3 komponen yang aku rasa udah cukup buat tutorial ini… masing-masing udah punya ID, yaitu foto, sembunyi, dan muncul. Sekarang kita tinggal kasi Jquery..

Pertama, kita akan menyembunyikan gambar tersebut dengan menekan tombol “sembunyi”, jadi kita tinggal menambahkan script berikut di atas gambar (sebelum komponen di buat) seperti ini:

...
<body>
<script>
$().ready(function(){
  $("#sembunyi").click(function(){
    $("#foto").fadeOut("fast");
  });
});
</script>
 
<img id="foto" src="foto.jpg" />
...

di situ ada suatu fungsi dari objek yang mempunyai id=”gambar” yaitu fadeOut, fadeOut adalah suatu fungsi di mana si objek/elemen yang bersangkutan akan disembunyikan dengan berangsur-angsur hilang (dengan menurunkan opacitynya).. temen2 juga bisa berkreasi dengan mengubah parameter “fast” menjadi “slow”, supaya si gambar menghilang dengan pelan dan berangsur-angsur…

Nah, setelah kita menghilangkan si gambar, tentunya temen2 pengen supaya si gambar itu muncul kembali dan dengan berangsur2 pula…
OK, caranya kita tambahkan script yang tadi menjadi kayak gini…

...
<body>
<script>
$().ready(function(){
  $("#sembunyi").click(function(){
    $("#foto").fadeOut("fast");
  });
  $("#muncul").click(function(){
    $("#foto").fadeIn("fast");
  });
});
</script>
 
<img id="foto" src="foto.jpg" />
...

Fade In, berarti kebalikan dari Fade Out, yaitu memunculkan kembali gambar dengan berangsur-angsur (menaikkan opacity), jadi script/kode lengkapnya kayak gini….

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
<head>
  <title>Fade In Fade Out</title>
  <script src="jquery.js"></script>
</head>
<body>
  <script>
  $().ready(function(){
    $("#sembunyi").click(function(){
      $("#foto").fadeOut("fast");
    });
    $("#muncul").click(function(){
      $("#foto").fadeIn("fast");
    });
  });
  </script>
 
  <img id="foto" src="foto.jpg" />
  <button id="sembunyi">Sembunyikan</button>
  <button id="muncul">Munculkan</button>
</body>
</html>

Untuk DEMO, silakan klik di sini
OK, selamat mencoba!
nanti kita lanjut ke pemakaian toggle untuk fadein dan fadeout ini…

]]> http://hariancheyuz.chevonest.com/tutorial/fade-in-dan-fade-out-dengan-jquery/feed 6 Mengenal JQuery – Tutorial JQuery Dasar http://hariancheyuz.chevonest.com/_other/mengenal-jquery http://hariancheyuz.chevonest.com/_other/mengenal-jquery#comments Wed, 09 Dec 2009 17:21:05 +0000 Cheyuz http://hariancheyuz.chevonest.com/?p=465

OK, karena postinganku kemaren yang bertema Web Developing yang berjudul “Menggunakan AJAX yang Baik” ternyata mendapat respon yang baik juga dari temen2ku, khususnya temen2ku yang minat untuk belajar Web Developing… maka nanti Cheyuz bakal ngebahas tentang teknik AJAX itu sendiri, dan kita akan memakai Framework Jquery untuk Javascriptnya…

Tetapi, alangkah baiknya kita memulai untuk mengenal JQuery dasar dulu, soalnya lebih baik kita tau dasarnya dulu, sebelum lanjut ke AJAX dengan Jquery…

Sebelumnya ada yang tahu Jquery itu apa?

Yup, Jquery adalah sebuah Library Javascript yang cepat dan ringkas yang mana dapat menyederhakan document traversing, event handling, animating, dan Ajax interactions untuk pengembangan web secara cepat.

Nah, kali ini, Cheyuz bakal ngebahas tentang Jquery dari sangat sangat sangat dasar hingga mahir….. :)

Untuk Memulai JQuery

Supaya temen2 bisa menggunakan Jquery, silakan download Jquery (saat ini versi terakhir adalah v.1.3.2).

Download JQuery 1.3.2

Lalu simpan file jquery-1.3.2.min.js yang udah didownload ke folder javascript web punya temen2.. misalnya di folder javascripts, maka nanti temen2 tinggal tambahkan script ini di dalam tag header:

<head>
...
<script src="javascripts/jquery-1.3.2.min.js"></script>
...
</head>

Contoh penggunaan JQuery

1
2
3
4
5

<script>
$().ready(function(){
    $("#gambarku").hide();
});
</script>

Apa arti script di atas? :)
Mungkin buat temen2 yang belum tau JQuery bakal terasa asing dan berkata “WEW, BAHASA ANEH APA ITU?”… tapi setidaknya pasti tau maksud script di atas. Ya, script di atas memerintahkan sebuah fungsi hide() untuk menyembunyikan sebuah elemen yang mempunyai ID = “gambar”..

Nah, itulah JQuery..
Menurutku, enaknya memakai Jquery adalah perintah Javascript untuk berbagai elemen HTML bisa dideklarasikan terlebih dahulu, ID atau class apa yang ingin ‘dimainkan’… jadi nantinya script ga kayak gini,,,

1
2

<button class="tombol" onclick="hide('gambarku')">Sembunyikan Gambar</button>
<img id="gambarku" src="foto.jpg" />

Klo scriptnya seperti itu, gimana kalo si buttonnya ada 1000? tentu capek kan temen2 ngasi atribut onclick=”hide()” di setiap button? PASTI! Selain itu, klo ga menggunakan Jquery, kita harus membuat fungsi hide() terlebih dahulu, untuk menyembunyikan element…

Nah, dengan menggunakan Jquery, temen2 cuman bikin suatu deklarasi yang mana “memerintahkan” bahwa semua elemen yang mempunyai class “tombol” jika diklik akan memanggil fungsi hide(). Selain itu, temen2 ga usah bikin fungsi hide() lagi, karena semua fungsi untuk manipulasi elemen html sudah ada dalam JQuery, jadi temen2 tinggal pake… maka script Jquery-nya kayak gini:

1
2
3
4
5
6
7

<script>
$().ready(function(){
    $(".tombol").click(function(){
        $("#gambarku").hide();
    });
});
</script>

Lalu diikuti html yang sederhana seperti berikut:

8
9

<button class="tombol">Sembunyikan</button>
<img id="gambarku" src="foto.jpg" />

Jika tadi elemen dinyatakan dengan tanda “#”, script untuk class dinyatakan dengan tanda “.”. Jadi, .tombol berarti class=”tombol”, sedangkan #gambar berarti id=”gambar”

Huuuaaahh.. Cheyuz-nya udah ngantuk nih, mau tidur dulu…. malem bsok kita sambung tutorial Jquery berikutnya… kali ini kita perkenalan aja dulu… nanti “coming soon” kita langsung praktik ke materi ttg fade in dan fade out elemen… (masih dasar).. ok, selamat malam… hwaaah :ngantuk:

]]> http://hariancheyuz.chevonest.com/_other/mengenal-jquery/feed 4