Simple Show Hide dengan JQuery
Wah...dah lama kagak ngeblog ni...
Mau ngeblog apa ya ??
Yaudah deh, googling bentar, jadi keinget ama mainannya si Jeffry dulu di Cimandenya yang
buat aplikasi Acrylic yg di dalame ada Jquery.
Wah..jadi ngeblog mendadak ni...
Googling bentar, nemu link donlot JQuery.Langsung sedot aja lah...
Wah..berhubung saya juga masih awam mengenai mainan JQuery ini, tidak ada pilihan lain kecuali
tanya sama si mbah google. hehehehe
Maaf semuanya, kalo tulisan saya ini masih sangat bahula.Soalnya saya juga masih level bahula juga. :)
OK langsung saja, kali ini saya mau mencatat pelajaran baru saya mengenai bagaimana membuat
show/hide dengan JQuery.tapi yang simple aja ya..masih belajaran :-p
- Pertama, donlot dulu Jquery di situs resminya
Setelah itu buat file html, dan untuk memanggilnya sama kayak javascript biasa,tinggal
ketikkan
<script type="text/javascript" src="jquery.js"></script>
file src nya disesuaikan sama lokasi file jquery.js berada ya.kalo dalam contoh ini saya
naruh file jquery.js nya di tempat yang sama ama file html saya, jadi ya begitu nulisnya.
Oiya, sebelum lanjut, saya mau nulis tentang penjelasan JQuery Selector dulu ya,
JQuery selector
Selector adalah fungsi utama pada JQuery, kalo saya amati secara sekilas, fungsinya hampir
sama kayak CSS ya.Bisa mengakses taq-taq html, juga bisa mempassing ekspresi CSS.
Intinya fungsinya untuk memilih elemen-elemen pada halaman web.
Penggunaan selector sebaiknya dilakukan setelah semua page selesai terbaca semua.Jadi webpagenya
sudah lengkap, baru scriptnya dijalankan.Untuk itu maka terciptalah syntax
$(document).ready()
OK, kita mulai buat ya..
buka editor anda dan ketikkan
COba jalankan, dan amati hasilnya.
Untuk penjelasannya..
<script src="jquery.js" type="text/javascript"></script>
Syntax di atas untuk memanggil file JQuery.js nya.
$("#toggle-div").click(function(){
$("#hidden-div").slideToggle('slow');
});
});
Syntax $("#toggle-div") ini yang dinamakan selector, seprti di CSS, fungsinya untuk memberi
pengaturan pada semua yang masuk di div dengan nama "toggle-div".Dalam hal ini merujuk pada bagian
html
<a id="toggle-div" href="#toggle-div">Klik disini untuk show/hide </a>
<div id="hidden-div" style="display:none">
<p>Saya lagi belajar JQuery</p>
</div>
Jadi secara ringkasnya, saat link "klik disini untuk show/hide" di click, maka akan memanggil
bagian hidden-div nya di dalamnya terdapat paragraph <p>Saya lagi belajar JQuery</p>.
lalu diakses method slideToggle untuk memberikan efek slide.
Selain SlideToggle ada juga lho yang effect lain yang musti dicoba:
- slideUp()
- slideDown()
- slideToggle()
- fadeIn()
- fadeOut()
Akhirnya selesai juga sedikit catatan saya ini.
Semoga bisa bermanfaat
Mau ngeblog apa ya ??
Yaudah deh, googling bentar, jadi keinget ama mainannya si Jeffry dulu di Cimandenya yang
buat aplikasi Acrylic yg di dalame ada Jquery.
Wah..jadi ngeblog mendadak ni...
Googling bentar, nemu link donlot JQuery.Langsung sedot aja lah...
Wah..berhubung saya juga masih awam mengenai mainan JQuery ini, tidak ada pilihan lain kecuali
tanya sama si mbah google. hehehehe
Maaf semuanya, kalo tulisan saya ini masih sangat bahula.Soalnya saya juga masih level bahula juga. :)
OK langsung saja, kali ini saya mau mencatat pelajaran baru saya mengenai bagaimana membuat
show/hide dengan JQuery.tapi yang simple aja ya..masih belajaran :-p
- Pertama, donlot dulu Jquery di situs resminya
Setelah itu buat file html, dan untuk memanggilnya sama kayak javascript biasa,tinggal
ketikkan
<script type="text/javascript" src="jquery.js"></script>
file src nya disesuaikan sama lokasi file jquery.js berada ya.kalo dalam contoh ini saya
naruh file jquery.js nya di tempat yang sama ama file html saya, jadi ya begitu nulisnya.
Oiya, sebelum lanjut, saya mau nulis tentang penjelasan JQuery Selector dulu ya,
JQuery selector
Selector adalah fungsi utama pada JQuery, kalo saya amati secara sekilas, fungsinya hampir
sama kayak CSS ya.Bisa mengakses taq-taq html, juga bisa mempassing ekspresi CSS.
Intinya fungsinya untuk memilih elemen-elemen pada halaman web.
Penggunaan selector sebaiknya dilakukan setelah semua page selesai terbaca semua.Jadi webpagenya
sudah lengkap, baru scriptnya dijalankan.Untuk itu maka terciptalah syntax
$(document).ready()
OK, kita mulai buat ya..
buka editor anda dan ketikkan
Simpan dengan nama Terserah.html.
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//script dijalankan setelah webpage complete
$("#toggle-div").click(function(){
$("#hidden-div").slideToggle('slow');
});
});
</script>
</head>
<body>
<p>Belajar JQuery</p>
<a id="toggle-div" href="#toggle-div">Klik disini untuk show/hide </a>
<div id="hidden-div" style="display:none">
<p>Saya lagi belajar JQuery</p>
</div>
<p>Saya belajar JQuery lagi</p>
</body>
</html>
COba jalankan, dan amati hasilnya.
Untuk penjelasannya..
<script src="jquery.js" type="text/javascript"></script>
Syntax di atas untuk memanggil file JQuery.js nya.
$("#toggle-div").click(function(){
$("#hidden-div").slideToggle('slow');
});
});
Syntax $("#toggle-div") ini yang dinamakan selector, seprti di CSS, fungsinya untuk memberi
pengaturan pada semua yang masuk di div dengan nama "toggle-div".Dalam hal ini merujuk pada bagian
html
<a id="toggle-div" href="#toggle-div">Klik disini untuk show/hide </a>
<div id="hidden-div" style="display:none">
<p>Saya lagi belajar JQuery</p>
</div>
Jadi secara ringkasnya, saat link "klik disini untuk show/hide" di click, maka akan memanggil
bagian hidden-div nya di dalamnya terdapat paragraph <p>Saya lagi belajar JQuery</p>.
lalu diakses method slideToggle untuk memberikan efek slide.
Selain SlideToggle ada juga lho yang effect lain yang musti dicoba:
- slideUp()
- slideDown()
- slideToggle()
- fadeIn()
- fadeOut()
Akhirnya selesai juga sedikit catatan saya ini.
Semoga bisa bermanfaat