Kali ini kita akan membahas bagaimana mengganti halaman dengan event load pada jquery. Untuk praktisnya kita akan buat dua file html.
Sebelumnya download dulu plugin jquery lalu letakkan di folder js.folder js kita simpan pada folder tempat menyimpan file-file yang akan kita buat dibawah ini. Kita misalkan nama folder-nya "LOADPAGE".
Siapkan file index.html dengan kode htmlnya seperti dibawah ini :
<html>
<head>
<title>Ganti Halaman</title>
<style>
.container {
height:100px;
width:100%;
}
.kolom1 {
height:100px;
width:20%;
background-color:grey;
float:left;
}
.kolom2 {
height:100px;
width:80%;
background-color:red;
float:right;
}
</style>
<script type="text/javascript" language="javascript" src="js/jquery-1.11.2.min.js">
</script>
<script>
$(document).ready(function(){
$(".kolom1 ul li a").click(function(){
$(".kolom2").load("handphone.html");
});
});
</script>
</head>
<body>
<div class="container">
<div class="kolom1">
<ul>
<li><a>Handphone</a></li>
</ul>
</div>
<div class="kolom2">
Disini untuk Halaman Ganti
</div>
</div>
</body>
</html>
Yang berwarna biru adalah kode jquery. kemudian index.html kita simpan di folder LOADPAGE.
Lalu siapkan file yang akan kita panggil. Berinama File tersebut handphone.html, kemudian simpan di flder LOADPAGE. isi file berupa text misal sebagai berikut :
"Halaman untuk etalase Handphone"
Setelah selesai kita coba ketik di address browse: localhost/loadpage
Jangan lupa running Xampp terlebih dahulu.
Selamat mencoba!!
Tidak ada komentar:
Posting Komentar