Jquery နဲ့ ajax ရေးတဲ့အခါမှာ loading ဆိုတာလေးပြဖို့အတွက်ပါ။ ကျွန်တော်တို့တွေအနေနဲ့ ajax loading လုပ်နေတဲ့အချိန်နဲ့ success ဖြစ်သွားတဲ့အချိန်အတွက် function ၂ ခု ရေးပေးရပါတယ်။ code ကတော့
loading.html ကို ဒီလိုရေးထားတယ်။
<html> <head> <title>Jquery Loading</title> <script src='jquery.js' type='text/javascript'></script> </head> <body> <div id="contentLoading" class="contentLoading"> <!-- <img src="loading.gif" alt="Loading data, please wait..."> --> Loading.... </div> <div id="contentArea"> </div> <input type="button" id="load" value="Load">
</body> </html>
loading.html ထဲမှာ jquery ကိုတော့ ဒီလိုရေးထားလိုက်တယ်။
<script type="text/javascript">
$(document).ready(function()
{
$("#contentLoading").hide();
$("#load").click(function(){$("#contentArea").load("test.php");});
});
$().ajaxSend(function(r,s){
$("#contentLoading").show();
});
$().ajaxStop(function(r,s){
$("#contentLoading").fadeOut("fast");
$("#load").fadeOut("fast");
});
//-->
</script>
test.php ကိုတော့ ဒီလိုရေးထားတယ်။ sleep က ခဏလောက် wait ဖြစ်နေအောင်လေ။ ဒါမှ loading လုပ်လား မလုပ်လား မြင်ရမှာပေါ့။
//sleep 3 seconds sleep(3); echo "Work....";
အစအဆုံး code ကိုတော့ ဒီမှာ Download ချနိုင်ပါတယ်။
Leave a Reply