What is jQuery ?Apa sih jQuery itu?
jQuery merupakan sebuahlibrary javascript ygsaat pertama kali muncul langsung berimbas padaberalihnya paradevelopper untuk segera memanfaatkan nya sebagailibrary yang powerfulluntuk menyaingi ajax. Awal muncul nya sempatmembuat ajax hanya mendapathitungan jari kelingking dari paradevelopper. Karena seperti mottojQuery sendiri adalah "Write Less, Do More". Wah pantes aja posisi ajaxlangsung ketendang.
Berikutadalah tutorial sederhanacara mengimplementasikan jQuery sebagailibrary yang powerfull, dapatmenciptakan interaktif user pada halamanwebsite lu :))
Sebelumnya download dlu librarynya:
DownloadPage
jQuery 1.2.6 {TheLatestRelease}
jQuery Ajax Display forLoadingContent
SiapkanHTMLkosongbwat halaman utama, pada header panggil dlu library jQueryna:
- Code:
<scriptlanguage="javascript"src="jquery-1.2.6.min.js"></script>
untukinteraktifuser na, gunakan Ajax jQuery Animation, atau dalam code na dinamakansebagai AJAX DISPLAY
- Code:
<scriptlanguage="javascript">
//showanimation
$(function(){
$("#ajax_display").ajaxStart(function(){
$(this).html(<divstyle="position:absolute;"><imgsrc="ajax-loader-refresh.gif"/> <br><strong>Loading....</strong><br><br>Pleasebepatien,donot close the window. <br>Gathering databeingprogress ...</div>);
});
$("#ajax_display").ajaxSuccess(function(){
$(this).html();
});
$("#ajax_display").ajaxError(function(url){
alert(jqSajax iserror );
});
});
</script>
Sedangkanuntuksimulasiloadexternal file na, gw pake script random padalibrary jQuery, script inigw temukan di salah satu forum luar, gw lupanama forum na, mudah2anberguna bwat kalian:
- Code:
<scripttype="text/javascript">
function getRandom(){
$("#random").hide("slow");
$("#random").load("sleep.php",,callback);
}
functioncallback(){
$("#random").show("slow");
setTimeout("getRandom();",10000);
}
$(document).ready(getRandom);
</script>
<divid="random"></div>
"sleep.php"adalahfileexternal yang diload oleh javascript random, dengan timeout10000(10 detik). Timeout berarti, setelah 10 detik halaman akan diload ulangdari awal kembali (setelah 10 detik).
sleep.phpberisi script yg akan di load, lu bisa isi apa aja seperti contoh codedibawah ini untuk simulasi gw kasiinsleep(10)
- Code:
<?
sleep(10);
echo"<span style=font-weight:bold;font-color:green;> All Dataloaded successfully!!</span>";
?>
Jadiuntuklengkapna, berikut code HTML na:
- Code:
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=iso-8859-1"/>
<title>jQuery AjaxDisplay</title>
<scriptlanguage="javascript"src="jquery-1.2.6.min.js"></script>
<scriptlanguage="javascript">
//showanimation
$(function(){
$("#ajax_display").ajaxStart(function(){
$(this).html(<divstyle="position:absolute;"><imgsrc="ajax-loader-refresh.gif"/> <br><strong>Loading....</strong><br><br>Pleasebepatien, donot close the window. <br>Gathering databeingprogress ...</div>);
});
$("#ajax_display").ajaxSuccess(function(){
$(this).html();
});
$("#ajax_display").ajaxError(function(url){
alert(jqSajax iserror );
});
});
</script>
<styletype="text/css">
<!--
body,td,th{
font-family:Arial, Helvetica,sans-serif;
font-size:11px;
color:#000000;
}
body {
background-color: #FFFFFF;
margin-left: 10px;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}
a:link {
color:#0066FF;
}
a:visited {
color: #0066FF;
}
a:hover{
color:#009900;
}
a:active {
color:#0066FF;
}
-->
</style></head>
<body>
<divid="ajax_display"></div>
<divstyle="position:absolute;top:100px;">
<scripttype="text/javascript">
functiongetRandom(){
$("#random").hide("slow");
$("#random").load("sleep.php",,callback);
}
functioncallback(){
$("#random").show("slow");
setTimeout("getRandom();",10000);
}
$(document).ready(getRandom);
</script>
<divid="random"></div>
ThisisanImplementation for jQuery Ajax Display, while loading a progress froman external source.<br />
developped by<a href="http://dremi.info"target="_blank">dr.emi</a></div>
</body>
</html>
woke,siapdicoba, klik disini bwat preview hasilna:
nibwatdownload code na:
Sumber dari situs Ilmu Website dalam kategori ajax dengan judul jQuery Ajax Display for Loading Content
Komentar (0)
Cetak
Beri tau temen
Atas
