Posts

Showing posts with the label JQuery

JQuery $(this) & addClass

Fungsi addClass() digunakan untuk menambahkan class baru pada element-element tertentu yang diinginkan. Misalnya ketika mau membuat tabbed menu pada sebuah website, kita bisa menggunakan fungsi addClass untuk memudahkannya.

So, Guys! mari kita belajar bersama, simaklah short tutorial di bawah ini:

Membuat element h2 yang akan diberi event untuk menambah class pada element h2. Untuk melihat apakah penambahan class berhasil atau tidak, silahkan klik element h2 lalu seleksi/blok element h2 dan div yang muncul setelah diklik. Setelah itu klik kanan dan pilih view selection source di Mozilla.
//perhatikan id yang digunakan <h2>Klik aku dan lihat di source code apakah classnya bertambah atau tidak</h2> Membuat element div untuk diberi event klik, ID digunakan untuk pemanggilan element dari JQuery nanti.
//perhatikan id yang digunakan <div class="answer"> Hore!!! Classnya h2 bertambah, aku berhasil.</div>
Script JQuery hover
//import file jQuery <script …

Mengisi input Jquery

Tadi malam melakukan blogwalking untuk mencari bagaimana caranya mengisi elemen input dengan menggunakan JQuery. Cara ini kubutuhkan untuk melanjutkan pembuatan pembelajaran berbasis simulasi untuk materi penghitungan kependudukan. Dulu, sebenarnya sudah pernah membuat dengan Java Script, namun scriptnya terlalu panjang dan membuat pusing kepala. Dengan JQuery, sepertinya script itu bisa disederhanakan.

Setelah cara itu didapat, sekarang saatnya diarsipkan di sini. :-)

Membuat element input dengan name istilah, NAME digunakan untuk inisiasi value element input dengan JQuery nanti.
//perhatikan id yang digunakan <input type="text" name="istilah"> Membuat element div untuk diberi event klik, ID digunakan untuk pemanggilan element dari JQuery nanti.
//perhatikan id yang digunakan <div id="klik">Klik aku</div>
Script JQuery hover
//import file jQuery <script type="text/javascript" src="sumber/jquery.js"></script&…

JQuery fadeIn & fadeOut

Cara menggunakan fungsi fadeIn() dan fadeOut() pada JQuery adalah sebagai berikut.

ELemen yang akan diberi event, dalam hal ini menggunakan event hover
//perhatikan id yang digunakan <div id="hover">Hover/sorot aku</div> Tampilan/pesan ketika sudah dihover/disorot
//perhatikan id yang digunakan <div id="msg">Horee!! Aku berhasil membuat fadeIn() dan fadeOut()</div>
Script JQuery hover
//import file jQuery <script type="text/javascript" src="sumber/jquery.js"></script> <script type="text/javascript"> //agar jQuery bekerja ketika dokumen siap $(document).ready(function(){ //menyembunyikan isi pesan $('#msg').hide(); //memberi event hover pada id hover $('#hover').hover(function(){ //memberi tugas pada id msg agar tampil dengan animasi slideDown $('#msg').fadeIn(600); }, function(){ //menyembunyikan id msg ketika tidak dihover dengan animasi slideUp $('#msg').fad…

JQuery slideDown & slideUp

Pernah melihat menu yang ketika disorot menampilkan sub menu dengan animasi slide? pernah bertanya bagaimana cara membuatnya? sudah ketemu? sudah bisa? Pada artikel ini akan dibahas fungsi JQuery dasar sebelum melanjutkan ke pembahasan pembuatan menu drop down dengan animasi slide.
Sekarang, pelajari dulu dasar-dasarnya, berlatih terus menerus dan coba dimodifikasi sesuai kehendak hati. Kalau kesulitan, tanyakan pada ahlinya. Kalau sudah mahir, silahkan kembangkan ke fungsi yang lebih rumit. Langsung saja ke pembahasan.

Cara menggunakan fungsi slideDown() dan slideUp() pada JQuery adalah sebagai berikut.

ELemen yang akan diberi event, dalam hal ini menggunakan event hover
//perhatikan id yang digunakan <div id="hover">Hover/sorot aku</div> Tampilan/pesan ketika sudah dihover/disorot
//perhatikan id yang digunakan <div id="msg">Terimakasih telah berkenan menyentuhku</div>
Script JQuery hover
//import file jQuery <script type="text/jav…

JQuery Hover, Show, Hide

Fungsi hover biasanya digunakan untuk membuat menu dropdown pada sebuah website.  Namun, tidak hanya untuk itu fungsi hover digunakan. Misalnya ketika kita ingin gambar yang disorot melakukan animasi berputar, zoom, fade, slide dan lain sebagainya, maka kita memerlukan fungsi hover jika menggunakan JQuery.
Di bawah ini sedikit contoh penggunaan fungsi hover untuk menampilkan dan menyembunyikan sebuah element div.

Cara menggunakan fungsi hover atau ketika mouse berada di atas element tertentu pada JQuery adalah sebagai berikut.

ELemen yang dihover/disorot mouse
//perhatikan id yang digunakan <div id="hover">Hover/sorot aku</div> Tampilan/pesan ketika sudah dihover/disorot
//perhatikan id yang digunakan <div id="msg">Terimakasih telah berkenan menyentuhku</div>
Script JQuery hover
//import file jQuery <script type="text/javascript" src="sumber/jquery.js"></script> <script type="text/javascript"> …

JQuery onClick, toggleFade

Cara menggunakan fungsi onClick pada JQuery adalah sebagai berikut.

ELemen yang diklik
//perhatikan id yang digunakan <div id="klik">klik aku</div> Tampilan/pesan ketika sudah diklik
//perhatikan id yang digunakan <div id="msg">Terimakasih telah berkenan menyentuhku</div>
Script JQuery onClick
//import file jQuery <script type="text/javascript" src="sumber/jquery.js"></script> <script type="text/javascript"> //agar jQuery bekerja ketika dokumen siap $(document).ready(function(){ //menyembunyikan isi pesan $('#msg').hide(); //memberi event onclick pada id klik $('#klik').click(function(){ //memberi tugas pada id msg agar tampil $('#msg').fadeToggle(500); }); }); </script>Keterangan: fungsi fadeToggle digunakan untuk even ganda. Pada script ini, event (klik) pertama menampilkan isi pesan dengan animasi fade. event (klik) kedua menyembunyikan isi pesan dengan animasi…

Daftar Fungsi JQuery 1.7.2

0
_toggle
add
addClass
after
ajaxComplete
ajaxError
ajaxSend
ajaxStart
ajaxStop
ajaxSuccess
andSelf
animate
append
appendTo
attr
before
bind
blur
change
children
clearQueue
click
clone
closest
constructor
contents
context
contextmenu
css
data
dblclick
delay
delegate
dequeue
detach
die
domManip
each
empty
end
eq
error
extend
fadeIn
fadeOut
fadeTo
fadeToggle
filter
find
first
focus
focusin
focusout
get
has
hasClass
height
hide
hover
html
index
init
innerHeight
innerWidth
insertAfter
insertBefore
is
jquery
keydown
keypress
keyup
last
length
live
load
map
mousedown
mouseenter
mouseleave
mousemove
mouseout
mouseover
mouseup
next
nextAll
nextUntil
not
off
offs…