Membuat Toggle Button dengan JQuery

Level: BASIC

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:

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

This entry was posted on Wednesday, December 16th, 2009 at 23:57 and is filed under jquery, Tutorial, _other. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

azul

Dec 17th

good post
lanjut gan jQuerynya

blog ane bole numpang mejeng di blogroll ente ga?
http://nuazul.net
tukeran link gituh…
Cheyuz

Dec 17th

hehehe… ok sip, tukeran link,,,
masukin link blog ane juga ya….

http://harian.cheyuz.com

ni main site ane, tp blm jadi

http://www.cheyuz.com
sketsaanonym

Feb 24th

wah ditunggu kang tutorial jquery selanjutnya… saya pengen belajar nih heuheu
Cheyuz

Feb 25th

Siiippp… nanti dilanjutin tutorialnya, hehehe…
adieaneh

Sep 16th

ko demonya g jalan gan

Harian Cheyuz