Dalam posting kali ini kita akan membuat Progress Bar Seperti YouTube menggunakan jquery. Mungkin anda
sering nonton ataupun upload video di youtube, maka Anda sering melihat progress bar warna merah di halaman atas YouTube saat proses loading halaman nah
Progress Bar Seperti YouTube yang
akan coba kita implementasikan untuk kode fulny di sini
Kita
langsung saja apa saja yang di
butuhkan
1.
jquery.min.js
2.
jquery.transit.js
3.
ytLoad.jquery.js
Setelah
bahan sudah siap lalu ikuti langkah-langkah di bawah ini untuk menampilkan Progress
Bar di bagian atas halaman.
Langkah 1 :
Letakan file
file jquery tadi
<link href="ytLoad.jquery.css"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="jquery.min.js"></script>
<script type="text/javascript"
src="ytLoad.jquery.js"></script> >
Langkah 2 :
Sertakan
skrip jquery.transit.js untuk efek transisi CSS
<script type = "text / javascript" src =
"jquery.transit.js"> </ script>
Langkah - :
Panggil
fungsi jquery di bawah ini untuk menampilkan Progress Bar di bagian atas
halaman.
$ (document) .ready (function () {
$ .ytLoad ();
// Lakukan panggilan ajax ...
$ ('# displayAjaxContent'). load
('ajax.php');
});
Langkah-4:
Pastekan
code di bawah untuk menampilkan data
<div id = "displayAjaxContent"> </ div>
Sampai
di sini kitas sudah selesai dengan bagian konfigurasi. Pada
dasarnya Plugin ini menampilkan Progress Bar, ketika kita mencoba memuat halaman .
untuk source
code lengkapnya bisa anda donload di sini atau copy code di bawah
index.html
Halaman ini
terdiri dari file library jquery, ajax progress bar css dan file jquery.
<!DOCTYPE html>
<html>
<head>
<title>jQuery ytLoad demo</title>
<link href="ytLoad.jquery.css" rel="stylesheet"
type="text/css">
<script type="text/javascript"
src="jquery.min.js"></script>
<script type="text/javascript"
src="jquery.transit.js"></script>
<script type="text/javascript"
src="ytLoad.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ytLoad();
// Perform ajax
call...
$('#displayAjaxContent').load('ajax.php');
});
</script>
<style>
body {
margin: 0px;
padding: 0px;
background-color: #EBEBEB;
border-bottom: 1px solid #e8e8e8;
}
#displayAjaxContent {
width: 800px;
margin: auto;
margin-top: 15px;
}
</style>
</head>
<body>
<div id="displayAjaxContent"> </div>
</body>
</html>
Cukup
sekian postingan kali ini semoga bermanfaat jika ada yang di tanyakan silahkan
berkomentar
0 Komentar