Membuat loading saat klik menu dengan ajax

Publish Date : 06-08-2017 , dibaca 13089 kali, Hari ini dibaca : 2 kali ,0 comments

Artikel kali ini kita akan membuat Animasi Loading halaman , saat menu website kita klik maka akan muncul loading animasi di website kita, Untuk membuat loading saat di klik menu kita membutuhkan javascript jquery ajax untuk menangani masalah tersebut

FORM HTML :

<body>
<div id="loading" style="display:none">Loading...</div>
<h4>jQuery Ajax</h4>
<div>
    <div id="menu">
        <ul>
            <li><a href="content.php?id=1">Menu 1</a></li>
            <li><a href="content.php?id=2">Menu 2</a></li>
            <li><a href="content.php?id=3">Menu 3</a></li>
            <li><a href="content.php?id=4">Menu 4</a></li>
        </ul>
    </div>
    
    <div id="container">
        Isi dari file content.php akan ditampilkan di sini
    </div>
</div>
</body>

Javascript :

<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript">
$(function() {
    $('#loading').ajaxStart(function(){
        $(this).fadeIn();
    }).ajaxStop(function(){
        $(this).fadeOut();
    });

    $('#menu a').click(function() {
        var url = $(this).attr('href');
        $('#container').load(url);
        return false;
    });
});
</script>

content.php

<?php
if ($_GET['id']==1){
 echo "Menu 1";
}
elseif ($_GET['id']==2){
 echo "Menu 2";
}
elseif ($_GET['id']==3){
 echo "Menu 3";
}
elseif ($_GET['id']==4){
 echo "Menu 4";
}
?>

Demo Download

Parse HTML Tools Blogger
Previous Post

Menggabungkan variabel dan string di javascript
Next Post