contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Membuat loading saat klik menu dengan ajax

Posted in Javascript Jquery Life at 06 Agustus 2017 With 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

membuat loading animasi halaman saat menu di klik

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>
▼ Download Source Code Dibawah Ini ▼


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

Artikel Rekomendasi



Artikel Terkait

Diskusi