jQuery
merupakan sebuah library javascript yg
saat pertama kali muncul langsung berimbas padaberalihnya para
developper untuk segera memanfaatkan nya sebagailibrary yang powerfull
untuk menyaingi ajax. Awal muncul nya sempatmembuat ajax hanya mendapat
hitungan jari kelingking dari paradevelopper. Karena seperti motto
jQuery sendiri adalah "Write Less, Do More". Wah pantes aja posisi ajax
langsung ketendang.
Berikut adalah tutorial sederhana
cara mengimplementasikan jQuery sebagailibrary yang powerfull, dapat
menciptakan interaktif user pada halamanwebsite lu :))
Sebelumnya download dlu library
nya:
Download
Page
jQuery 1.2.6 {The
Latest
Release}
jQuery Ajax Display for
Loading
Content
Siapkan
HTML
kosong
bwat halaman utama, pada header panggil dlu library jQuery
na:
- Code:
<script
language="javascript"
src="jquery-1.2.6.min.js"></script>
untuk
interaktif
user na, gunakan Ajax jQuery Animation, atau dalam code na dinamakan
sebagai AJAX DISPLAY
- Code:
<script
language="javascript">
//show
animation
$(function(){
$("#ajax_display").ajaxStart(function(){
$(this).html(<div
style="position:absolute;"><imgsrc="ajax-loader-refresh.gif"/> <br><strong>Loading....</strong><br><br>Pleasebe
patien,
do
not close the window. <br>Gathering data
beingprogress ...</div>);
});
$("#ajax_display").ajaxSuccess(function(){
$(this).html();
});
$("#ajax_display").ajaxError(function(url){
alert(jqSajax is
error );
});
});
</script>
Sedangkanuntuk
simulasi
load
external file na, gw pake script random padalibrary jQuery, script ini
gw temukan di salah satu forum luar, gw lupanama forum na, mudah2an
berguna bwat kalian:
- Code:
<script
type="text/javascript">
function getRandom()
{
$("#random").hide("slow");
$("#random").load("sleep.php",
,
callback);
}
function
callback()
{
$("#random").show("slow");
setTimeout("getRandom();",
10000);
}
$(document).ready(getRandom);
</script>
<div
id="random"></div>
"sleep.php"adalah
file
external yang diload oleh javascript random, dengan timeout10000
(10 detik). Timeout berarti, setelah 10 detik halaman akan diload ulang
dari awal kembali (setelah 10 detik).
sleep.php
berisi script yg akan di load, lu bisa isi apa aja seperti contoh code
dibawah ini untuk simulasi gw kasiin
sleep(10)
- Code:
<?
sleep(10);
echo
"<span style=font-weight:bold;font-color:green;> All Data
loaded successfully
!!</span>";
?>
For complete :
- Code:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=iso-8859-1"
/>
<title>jQuery Ajax
Display</title>
<script
language="javascript"
src="jquery-1.2.6.min.js"></script>
<script
language="javascript">
//show
animation
$(function(){
$("#ajax_display").ajaxStart(function(){
$(this).html(<div
style="position:absolute;"><imgsrc="ajax-loader-refresh.gif"/> <br><strong>Loading....</strong><br><br>Pleasebe
patien,
do
not close the window. <br>Gathering data
beingprogress ...</div>);
});
$("#ajax_display").ajaxSuccess(function(){
$(this).html();
});
$("#ajax_display").ajaxError(function(url){
alert(jqSajax is
error );
});
});
</script>
<style
type="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>
<div
id="ajax_display"></div>
<div
style="position:absolute;
top:100px;">
<script
type="text/javascript">
function
getRandom()
{
$("#random").hide("slow");
$("#random").load("sleep.php",
,
callback);
}
function
callback()
{
$("#random").show("slow");
setTimeout("getRandom();",
10000);
}
$(document).ready(getRandom);
</script>
<div
id="random"></div>
This
is
an
Implementation for jQuery Ajax Display, while loading a progress from
an external source.<br />
developped by
<a href="http://dremi.info"
target="_blank">dr.emi</a></div>
</body>
</html>
For preview :
For download code:
thanks for Ilmu Website category ajax title jQuery Ajax Display for Loading Content
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
