Kenalan dengan jQuery bagian 2

Setelah pada artikel pertama saya membahas bagaimana memasang jquery pada code html kita, menyeleksi element html (DOM) kita dan membahas juga event-event pada jquery yang tidak jauh beda dengan event-event di javascript. Sekarang kita bahas mengenai efek-efek animasi di jquery.

Mungkin buat teman-teman yang pernah menggunakan atau memasang jquery pada website sudah sering sekali melihat efek-efek wow milik jquery. Dengan memahami konsep dasar efek-efek di jquery, kita akan mudah sekali memasang code download jquery tepat pada website kita. Karena memang sekarang jquery sudah mantab sekali, tinggal kita sesuaikan pada website kita, yang tentunya mesti paham terlebih dahulu konsep dasarnya.

Saya mau menjelaskan sepintas saja ya,
Berikut adalah code sederhananya :

<html>
<head>
  <title>Kenalan dengan jQuery bag 2</title>
  <script language="javascript" src='../../js/jquery-1.4.2.min.js'></script>
  
  <script type='text/javascript'>
	
	$(function(){
		$("#tombol_up").click(function(){
			$(".text_class").slideUp('slow');
		});
		
		$("#tombol_down").click(function(){
			$(".text_class").slideDown();
		});
		
		$("#tombol_toggle_sld").click(function(){
			$(".text_class").slideToggle();
		});
		
		$("#tombol_toggle").click(function(){
			$(".text_class").toggle(1500);
		});
		
		$("#tombol_fadeIn").click(function(){
			$(".text_class").fadeIn();
		});
		
		$("#tombol_fadeOut").click(function(){
			$(".text_class").fadeOut();
		});
		
		$("#tombol_fadeTo").click(function(){
			$(".text_class").fadeTo("slow",0.5);
		});
		
		$("#tombol_callback").click(function(){
			$(".text_class").toggle(1500,function(){
				alert("kata ini muncul setelah efek toggle selesai melakukan tugasnya ")
			});
		});
		
		$("#tombol_hide").click(function(){
			$(".email").hide();
		});
		
		$("#tombol_show").click(function(){
			$(".email").show();
		});
		
		$("#tombol_hide_slow").click(function(){
			$(".email").hide("slow");
		});
		
		$("#tombol_show_slow").click(function(){
			$(".email").show("slow");
		});
		
		
		
		
	});
	
  </script>
</head>

<body>
	<input type='button' id='tombol_up' value='Slide Up'>
	<input type='button' id='tombol_down' value='Slide Down'>
	<input type='button' id='tombol_toggle_sld' value='Slide Toggle'>
	<input type='button' id='tombol_toggle' value='Toggle'>
	<input type='button' id='tombol_fadeIn' value='FadeIn'>
	<input type='button' id='tombol_fadeOut' value='FadeOut'>
	<input type='button' id='tombol_fadeTo' value='FadeTo'>
	<input type='button' id='tombol_callback' value='Callback'>
	<form>
		<table>
		  <tr class='identitas'>
		    <textarea class='text_class' cols='55' rows='5' noresize>
				TestingTestingTestingTestingTestingTestingTestingTesting
			</textarea>
		  </tr>
		</table>
	</form>
	
	<form>
		<table>
		  <tr class='identitas'>
		    <td class='nama'>adiputra</td>
			<td class='colon'>:</td>
			<td class='email'>ad1[dot]putr4[et]yahoo[dot]co[dot]id</td>
		  </tr>
		</table>
		<input type='button' id='tombol_hide' value='Hide Email'>
		<input type='button' id='tombol_show' value='Show Email'>
		<input type='button' id='tombol_hide_slow' value='Hide Email Slow'>
		<input type='button' id='tombol_show_slow' value='Show Email Slow'>
	</form>
</body>

</html>

Demonya bisa di liat disini : [ demo ]

Kalau udah liat demonya pasti sudah paham bukan ?

Hampir setiap efek bentuknya seperti ini :

$(selector).nama_efek(speed,callback)

Baik speed atau callback bersifat opsi, atau cukup dengan hide() atau show() saja, terserah kebutuhan kita.

Lalu apa itu speed dan callback ?

Speed adalah kecepatan saat hide() atau show(). Ukurannya bisa anda masukan dengan milidetik atau dengan 3 opsi : slow, fast, atau normal.
Mengenai callback, fungsi dimana apabila suatu efek telah selesai dijalankan. Coba liat kembali code ini :

$("#tombol_callback").click(function(){
$(".text_class").toggle(1500,function(){
		alert("kata ini muncul setelah efek toggle selesai melakukan tugasnya 🙂 ")
	});
});

Sampai disini sudah paham bukan ?
Sekarang kita explore lagi fungsi lainnya di alamat INI

Oiya,saya membuat sample code karena tertarik dengan tampilan show spoiler pada kaskus. Apa itu spoiler ? wah masa gak tau ne kaskuser..:)

Jadi kalau kaskuser ingin melihat spoiler, klik tombol Show namun apabila ingin menutupnya klik tombol Hide. Ingat tombol cuma satu ya. Jadi kita ubah saja value dari tombol tersebut.

Berikut adalah codenya :

<html>
<head>
  <title>Kenalan dengan jQuery bag 2</title>
  <script language="javascript" src='../../js/jquery-1.4.2.min.js'></script>
  
  <script type='text/javascript'>
	
	$(document).ready(function(){
		$(".text_class").hide();
	});
	
	$(function(){
	
		$("#tombol_spoiler").click(function(){
			$(".text_class").slideToggle(1000,function(){
				var cek = $("#tombol_spoiler").val();
				if(cek=="Hide")
					$("#tombol_spoiler").val('Show');
				else
					$("#tombol_spoiler").val('Hide');
			});
		});
		
	});
	
	
	
  </script>
</head>

<body>
	<input type='button' id='tombol_spoiler' value='Show'>
	<form>
		<table>
		  <tr class='identitas'>
		    <textarea class='text_class' cols='55' rows='5' noresize>
				TestingTestingTestingTestingTestingTestingTestingTesting
			</textarea>
		  </tr>
		</table>
	</form>
</body>

</html>

Demonya bisa dilihat disini : [ demo ]

Logikanya sederhana, bila spoiler telah tampil ubah nama tombol menjadi hide, dan bila spoiler belum tampil ubah nama tombol menjadi show. Yang tentunya menggunakan callback dari pemanggilan efek.

Satu lagi latihan mengenai artikel ini, ada kasus seperti ini pada program validasi form.

Pada gambar, saya diminta menampilkan form untuk proses kalkulasi pemasangan listrik. Sederhana, hanya saja ada validasi mengenai jenis tariff (R1, R2, R3) dengan daya yang masing-masing memiliki harga biaya penyambungan dan harga jaminan langganan per VA. Proses kalkulasinya adalah menghitung Biaya penyambungan dan Biaya Uang Jaminan Langganan. Dimana :

  • Biaya Penyambungan didapat dari daya yang diminta dikalikan dengan harga penyambungan per VA , dan
  • Biaya Uang Jaminan Langganan didapat dari daya yang diminta dikalikan dengan harga uang jaminan per VA.

Validasi disini adalah apabila user memilih tipe tarif R1 maka hanya daya 450, 900, 1300, 1200 saja bukan yang akan dipilih. User tidak boleh memilih daya 6600 karena dia / user memilih tariff R1 kecuali user memilih tarif R3.

Berikut adalah code yang saya buat :

  <html>
<head>
  <script type="text/javascript" src='../../js/jquery-1.4.2.min.js'></script>
  <script type="text/javascript">
  	$(document).ready(function(){
		$(".hidden").hide();
		$(".att_daya").hide();
	});
	
	
	var sambungan_va;
	var langganan_va;
	
	$(function(){
		
		// kode untuk mengecek input tarif
		$(".tarif").change(function(){
			$(".hidden").hide();
			if($(".tarif").val()=="00"){
				alert('data tidak boleh kosong');
				$(".tarif").focus();
			}else{
				var tarif = $(".tarif").val();
				//alert(tarif);
				$(".att_daya").show();
				
				if(tarif == "R1"){
					$(".cls_select").remove();
					$(".cls_daya").append(
					"<option value='00' class='cls_select'>--</option><option value='450' class='cls_select'>450</option><option value='900' class='cls_select'>900</option><option value='1300' class='cls_select'>1300</option><option value='2200' class='cls_select'>2200</option>");
					
					$(".cls_daya").change(function(){
						var daya = $(".cls_daya").val();
						switch(daya){
							case "450" : 
										sambungan_va = 100;
										langganan_va = 125;
										break;
							case "900" : 
										sambungan_va = 125;
										langganan_va = 150;
										break;
							case "1300" : 
										sambungan_va = 150;
										langganan_va = 175;
										break;
							case "2200" : 
										sambungan_va = 175;
										langganan_va = 200;
										break;
						}
				
				
						var cost_penyambungan = daya * sambungan_va;
						var cost_langganan = daya * langganan_va;
						//alert(cost_penyambungan +" "+cost_langganan );
						
						$(".cost_jaminan").val(cost_langganan);
						$(".cost_sambung").val(cost_penyambungan);
						
						$(".hidden").show();
					});	
					
				}else if(tarif == "R2"){
					$(".cls_select").remove();
					$(".cls_daya").append("<option value='00' class='cls_select'>--</option><option value='3500' class='cls_select'>3500</option><option value='4400' class='cls_select'>4400</option>");
					
					$(".cls_daya").change(function(){
						var daya = $(".cls_daya").val();
						//alert(daya);
						switch(daya){
							case "3500" : 
										sambungan_va = 200;
										langganan_va = 225;
										break;
							case "4400" : 
										sambungan_va = 225;
										langganan_va = 250;
										break;
						}	
					
					
						var cost_penyambungan = daya * sambungan_va;
						var cost_langganan = daya * langganan_va;
						//alert(cost_penyambungan +" "+cost_langganan );
						
						$(".cost_jaminan").val(cost_langganan);
						$(".cost_sambung").val(cost_penyambungan);
						
						$(".hidden").show();							
					});		
					
				}else if(tarif == "R3"){
					$(".cls_select").remove();
					$(".cls_daya").append("<option value='00' class='cls_select'>--</option><option value='4400' class='cls_select'>4400</option>");
					
					$(".cls_daya").change(function(){
						var daya = $(".cls_daya").val();
						//alert(daya);
						
						sambungan_va = 250;
						langganan_va = 125;
					
					
						var cost_penyambungan = daya * sambungan_va;
						var cost_langganan = daya * langganan_va;
						//alert(cost_penyambungan +" "+cost_langganan );
						
						$(".cost_jaminan").val(cost_langganan);
						$(".cost_sambung").val(cost_penyambungan);
						
						$(".hidden").show();
					});
				}
			}
		});
		
		
		$("#form_pln").submit(function(){
			var cek = $(".cost_jaminan").val();
			//alert(cek);
			if(cek==0 || cek==''){
				alert("Anda belum memilih daya");
				return false;
			}else{
				return true;
			}
		});
		
	});
	
  </script>
</head>
<body>
<form action="rekap.php" method="post" id='form_pln'>
  <table>
    <tr>
      <td>Nama Pemohon</td>
      <td>:</td>
      <td><input type="text" name="nama_pemohon" class="" /></td>
    </tr>
    <tr>
      <td>Alamat</td>
      <td>:</td>
      <td><textarea name="alamat_pemohon" cols="20" rows="5"></textarea></td>
    </tr>
    <tr>
      <td>Nomor Pelanggan Terdekat</td>
      <td>:</td>
      <td><input type="text" name="no_pelanggan" class="" /></td>
    </tr>
    <tr>
      <td>Tarif yang diminta</td>
      <td>:</td>
      <td>
      	<select name="tarif" class="tarif">
	        <option value="00">-- pilih tarif --</option>
        	<option value="R1">R1</option>
            <option value="R2">R2</option>
            <option value="R3">R3</option>
      	</select>
      </td>
    </tr>
    <tr class="att_daya">
      <td>Daya yang diminta</td>
      <td>:</td>
      <td>
      	<select name="daya" class="cls_daya">
			
      	</select>
      </td>
    </tr>
    <tr class="hidden">
      <td>Biaya penyambungan</td>
      <td>:</td>
      <td><input type="text" name="cost_sambung" class="cost_sambung" /></td>
    </tr>
    <tr class="hidden">
      <td>Biaya uang jaminan Langganan</td>
      <td>:</td>
      <td><input type="text" name="cost_jaminan" class="cost_jaminan" /></td>
    </tr>
    <tr>
      <td colspan="3"><input type="submit" value="REKAP">&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="RESET"></td>
    </tr>
  </table>
</form>
</body>
</html>



Untuk langsung melihat code nyatanya : [ demo ]

Semoga bermanfaat ya 🙂

exercise does not make us perfect because no one is perfect but the exercise made us accustomed to making code. let’s continue to learn and practice…

5 thoughts on “Kenalan dengan jQuery bagian 2

  1. rumit juga ya, padahal sata ingin belajar, tapi kalau ortodidak kayanya susah… 🙂
    kalau punya tutorial tentang Jquery dan cara membuat template share dong..
    thanks…

  2. Bisa nggak Joomla diberi sentuhan Jquery ? … cos Joomla kan pake mootools .. pernah bikin mas, gabungan joomla+jquery .. ?

Silahkan Komentar...

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s