Kamis, 03 September 2015

Loading Halaman Dinamis Dengan Jquery

Assalamu'alaikum, selamat pagi...
Pada pagi yang cerah ini, saya akan menulis bagaimana cara memanggil halaman secara dinamis dengan menggunakan jquery. Dengan attribut href akan diambil sebagai data yang akan dipanggil dalam kode jquery.

Kita akan membuat tiga file untuk mengaplikasikannya. Yang pertama kita akan buat file index.html. isinya adalah sebagai berikut :
index.html
 <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(e){
e.preventDefault();
var url=$(this).attr('href');
$.ajax({
    type : 'GET',
    url  : url,
    success: function(data){
        $(".kolom2").fadeOut(300, function(){
        $(".kolom2").html(data).delay(250).fadeIn(300);
        });
    }
});

});
 });
</script>

</head>
<body>
<div class="container">
    <div class="kolom1">
        <ul>
            <li><a href="handphone.html">Handphone</a></li>
            <li><a href="komputer.html">Komputer</a></li>
        </ul>
    </div>
    <div class="kolom2">
        Halaman Awal
    </div>
</div>
</body>
</html>

Text warna biru adalah kode jquery yang diperlukan untuk memanggil halaman text komputer.html dan handphone.html yang akan kita buat berikut ini.
komputer.html
KOMPUTER
handphone.html
HANDPHONE

Nah, ketiga file tersebut kita simpan pada folder yang sama, misalkan kita beri nama folder page.
Kemudian kita coba pada browser yang kita punya.Terserah mau pakai Mozila atau Chrome atau lainnya.
ketik: localhost/page
Jangan lupa sebelumnya running Xampp-nya terlebih dahulu.
Selamat mencoba.


Tidak ada komentar:

Posting Komentar