Hari ini dikantor lagi tidak ada kerjaan karena kerjaan semuanya sudah beres dan belum ada niat untuk memulai skripsi ini. Rencananya skripsi saya semuanya akan menggunakan jQuery… Amin, makanya saya belajar jQuery dari awal (basic).
Hal pertama yang saya pelajari adalah membuat show hide simple/sederhana dengan jQuery.
Pertama tidak lupa kita membaca basmalah dan load library jQuery nya.
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
Dan Selanjutnya tambahkan kode berikut di bawahnya.
<script type="text/javascript">
$(document).ready(function(){
// Load Page di awal
$("div#form").hide();
$("a#hideForm").hide();
// Tampilkan DIV ID=Form setelah klik A ID=ShowForm
$("a#showForm").click(function(){
//$("a").addClass("test");
$("div#form").show();
$("a#hideForm").show();
$("a#showForm").hide();
});
// Sembunyikan DIV ID=Form setelah klik A ID=HideForm
$("a#hideForm").click(function(){
// $("a").removeClass("test");
$("div#form").hide();
$("a#showForm").show();
$("a#hideForm").hide();
});
});
</script>
Coding HTML Lengkapnya
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Show Hide</title>
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Load Page di awal
$("div#form").hide();
$("a#hideForm").hide();
// Tampilkan DIV ID=Form setelah klik A ID=ShowForm
$("a#showForm").click(function(){
//$("a").addClass("test");
$("div#form").show();
$("a#hideForm").show();
$("a#showForm").hide();
});
// Sembunyikan DIV ID=Form setelah klik A ID=HideForm
$("a#hideForm").click(function(){
// $("a").removeClass("test");
$("div#form").hide();
$("a#showForm").show();
$("a#hideForm").hide();
});
});
</script>
<style type="text/css">
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
}
#form
{
padding:10px;
width:500px;
margin:20px 0px 20p 0px;
border:1px solid #CCCCCC;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
a img
{
border:0 none;
}
a
{
color:#003399;
text-decoration:none;
}
</style>
</head>
<body>
<a id="showForm" href="#"><img src="images/expand.gif" /> Show Form</a>
<a id="hideForm" href="#"><img src="images/collapse.gif" /> Hide Form</a>
<br /><br />
<div id="form">
<h2>Tadaaa ... I am the form.</h2>
<form>
<label>Update Score : </label>
<input type="text" size="50" />
<input type="submit" value="Save" />
</form>
</div>
<div >
<p>
You can click above link to show the form
</p>
</div>
</body>
</html>
Untuk melihat hasilnya , bisa dilihat di demo page
coding lengkapnya dapat di download disini : Download
Advertisement
Nyok, kita ubah sedikit coding-nya biar ada efek “slow” pas tampilkan ato sembunyikan form-nya
// Tampilkan DIV ID=Form setelah klik A ID=ShowForm
$(“a#showForm”).click(function(){
…
$(“div#form”).show(“slow”);
…
…
});
// Sembunyikan DIV ID=Form setelah klik A ID=HideForm
$(“a#hideForm”).click(function(){
…
$(“div#form”).hide(“slow”);
…
…
};
Ane juga lagi belajar gan.. Nice Code!!
wow mantap.
Nice addition Sir.
thanks mas bro, infonya
really nice post dude!
klo utk multi-div gmn caranya ya?
// Tampilkan DIV ID=Form setelah klik A ID=ShowForm
$(“a#showForm”).click(function(){
//$(“a”).addClass(“test”);
$(“div#form”).show();
$(“a#hideForm”).show();
$(“a#showForm”).hide();
});
itu kan yang di SHOW div dengan ID=form ya.
kalo mau banyak DIV tinggal di tambah aja di bawahnya, dengan caranya yang sama
$(“a#showForm”).click(function(){
//$(“a”).addClass(“test”);
$(“div#form”).show();
$(“div#form_1″).show();
$(“div#form_2″).show();
$(“div#form_3″).show();
//….. dan DIV DIV lainnya
$(“a#hideForm”).show();
$(“a#showForm”).hide();
});
perfect! this is what i’m looking for my blog
kopi paste langsung terapkan… trimakasih sob..
enjoy bro, senang bisa membantu
lumayan buat kopi paste
).
btw theme blognya ngikutin aja neh -_-
buahahhaha… santai um, gw sekali sebulan ganti theme kok
tapi bagus sih yang ini theme-nya hehe.