Program Sederhana Jquery UI Progress Bar - Progress bar menunjukan progress atau kemajuan dari sebuah proses yang sedang berlangsung. Bayangkan apabila kita sedang mendownload sesuatu akan tetapi tidak ada prgoress barnya pasti kita tidak akan sabar menunggunya, pasti kita berfikir ini jalan atau tidak sih kok lama. akan tetapi apabila ada progess barnya kita akan menunggu karna kita sudah tau samai dimana kemjuannya dan tiggal sebaerapa lama lagi kita harus enunggu. Progress bar ini dapat di buat dengan berbagai cari tapi kali ini kita kan membuat sebuah progress bar dengan menggunakan jQuery UI.
Baca juga : Program Sederhana JQuery UI Accordion
Downoad source filenya di sini : http://www.mediafire.com/?5wycj7cjj4ty4d7
Tetapi apa bila anda ingin ada action yang terjadi bila proses telah berhenti maka ubah file INDEX.php menjadi seperti di bawah ini :
<!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>Tes Jquery Progress</title>
<link type="text/css" href="css/black-tie/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<style type="text/css">
<!--
body {
background-color: #3A8D17;
}
-->
</style></head> <script type="text/javascript">
var proses=0;
var henti=0;
$(document).ready(function(){
mulai();
});
function mulai(){
myVar=setInterval(function(){tambahProses()},100);
}
function tambahProses(){
if(proses >= 100 ){
henti=0;
clearInterval(myVar)
alert('Proses Selsai'); //ini action yang di jalankan apabila proses selesai
}else{
proses+=1;
$( "#progressbar" ).progressbar({
value: proses
});
}
}
function ganti(){
if(henti==0){
henti=1;
document.getElementById('tombol').innerHTML='<img src="gambar/PlayHot.png" name="kotak1" width="50" height="50" id="kotak1" onclick="ganti()" />';
document.getElementById('tulisTombol').innerHTML='Play';
clearInterval(myVar)
}else{
henti=0;
document.getElementById('tombol').innerHTML='<img src="gambar/player-pause.png" name="kotak1" width="50" height="50" id="kotak1" onclick="ganti()" />';
mulai();
document.getElementById('tulisTombol').innerHTML='Pause';
}
}
</script>
<body>
<p align="center">Loading dengan Jquery </p>
<div id="progressbar">
</div>
<div style="display: none;" class="demo-description">
<p>Default determinate progress bar.</p>
</div>
<table width="173" border="0" align="center">
<tr>
<td><div align="center" id="tombol">
<img src="gambar/player-pause.png" name="kotak1" width="50" height="50" id="kotak1" onclick="ganti()" /></div>
</td>
</tr>
<tr>
<td width="167"><div align="center" id="tulisTombol">
Pause</div>
</td>
</tr>
</table>
<p align="center"> </p>
<p> </p>
</body>
</html>
maka hasilnya akan seperti gambar di awal.
Jquery UI Progress Bar anda sekarang sudah selesai, baca juga tutorial jQuery lainnya.
0 komentar