What is jQuery ?
Apa sih jQuery itu
?
jQuery
merupakan sebuahlibrary 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.
Berikutadalah 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>"; ?>
Jadi
untuk
lengkapna, 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"> <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>
woke,
siap
dicoba, klik disini bwat preview hasil
na:
ni
bwat
download code na:
Sumber dari situs Ilmu Website dalam kategori ajax dengan judul jQuery Ajax Display for Loading Content
Artikel Lainnya Yang Lebih Menarik:
Jika Anda ingin artikel jQuery Ajax dikirim ke email anda, Silahkan masukan alamat email anda untuk berlangganan.
|
|
Penulis : Dodik Gaghan | BLOG : InfocusNine [Be Your Best Partner]InfocusNine menyediakan informasi dan tutorial buat anda yang ingin belajar blogging, design, internet, dsb. Silahkan Copy/Paste tapi cantumkan link kami.
.gif)
.gif)
1 komentar: