nah sekarang kita akan membuat versi 3 bedanya cuma dikit cuma di
tambahin animasi doang oh iya karna di blog ini nya ada file animasinya
agan cari sendiri ya di mbah google gampang ko nyarinya.. tinggal ketik
di mbah loading.gif langsung dah jutaan animasi muncul tinggal di pilih"
hehehe..
langsung ke TKP aja gan...
<html>
<head>
<script src="jquery-1.4.js"></script> <!--file ini bisa di dapet dari download file-->
<script>
$(document).ready(function(){
// nah ini dia modif versy 3 nya kita tambahin variable
var loading = $("#loading");
var tampilkan = $('#tampilkan');
// nah ini yang kita modif ya itu membuat fiel menampilkan data langsung ke form ok
function tampildata(){
// disini kita munculin tuh animasi mudah ko tingal show atau hide doang
tampilkan.hide();
loading.fadeIn();
$.ajax({
type : "POST",
url : "proses.php",
data : "aksi=tampil",
success : function(data){
$('#tampilkan').html(data);
// disini juga modif gan
loading.fadeOut();
tampilkan.html(data);
tampilkan.fadeIn(2000);
}
});
}
// jalankan fungsi tampil data
tampildata();
//yang dibawah ini hampir sama dengan proses ajax1 yang kita bikin sebelumnya hanya modif dikit
$('#simpan').click(function(){
//ambil value data dari form
var nama = $('#nama').val();
var pesan = $('#pesan').val();
//kirim dengan metode post ke proses.php
$.ajax({
type: "POST",
url: "proses.php",
// apabila dari 1 data dikirimkan, pesahkan dengan simbol &
// nah di sini sedikit modif nya kita tambahkan nilai tambah
data : "aksi=tambah&nama="+nama+"&pesan="+pesan,
success: function(data){
$("#info").html(data);
// nah disini juga ada modif ya itu kita panggil fungsi tampilakn data dengan cara
tampildata();
}
});
});
});
</script>
<head>
<body>
Nama : <input type="text" id="nama"/><br/>
Pesan : <input type="text" id="pesan" size="50"><br/>
<input type="submit" value="Simpan" id="simpan"/>
<div id="info"></div><hr>
<!-- disini kita tambahin untuk tampilin loading.gif di form-->
<div id="loading"><img src="loading.gif"/></div>
<!--nah di sini dimana data akan di show ook-->
<ul id="tampilkan"></ul>
</body>
</html>
udah deh selesai oh iya file sama loading.gif nya harus satu folder ya jangan di pisah entar nga bakal tampil tuh animasi .. kasian komputernya punyeng nyari" animasi nya ... hehehehe selamat mencoba gan..
langsung ke TKP aja gan...
<html>
<head>
<script src="jquery-1.4.js"></script> <!--file ini bisa di dapet dari download file-->
<script>
$(document).ready(function(){
// nah ini dia modif versy 3 nya kita tambahin variable
var loading = $("#loading");
var tampilkan = $('#tampilkan');
// nah ini yang kita modif ya itu membuat fiel menampilkan data langsung ke form ok
function tampildata(){
// disini kita munculin tuh animasi mudah ko tingal show atau hide doang
tampilkan.hide();
loading.fadeIn();
$.ajax({
type : "POST",
url : "proses.php",
data : "aksi=tampil",
success : function(data){
$('#tampilkan').html(data);
// disini juga modif gan
loading.fadeOut();
tampilkan.html(data);
tampilkan.fadeIn(2000);
}
});
}
// jalankan fungsi tampil data
tampildata();
//yang dibawah ini hampir sama dengan proses ajax1 yang kita bikin sebelumnya hanya modif dikit
$('#simpan').click(function(){
//ambil value data dari form
var nama = $('#nama').val();
var pesan = $('#pesan').val();
//kirim dengan metode post ke proses.php
$.ajax({
type: "POST",
url: "proses.php",
// apabila dari 1 data dikirimkan, pesahkan dengan simbol &
// nah di sini sedikit modif nya kita tambahkan nilai tambah
data : "aksi=tambah&nama="+nama+"&pesan="+pesan,
success: function(data){
$("#info").html(data);
// nah disini juga ada modif ya itu kita panggil fungsi tampilakn data dengan cara
tampildata();
}
});
});
});
</script>
<head>
<body>
Nama : <input type="text" id="nama"/><br/>
Pesan : <input type="text" id="pesan" size="50"><br/>
<input type="submit" value="Simpan" id="simpan"/>
<div id="info"></div><hr>
<!-- disini kita tambahin untuk tampilin loading.gif di form-->
<div id="loading"><img src="loading.gif"/></div>
<!--nah di sini dimana data akan di show ook-->
<ul id="tampilkan"></ul>
</body>
</html>
udah deh selesai oh iya file sama loading.gif nya harus satu folder ya jangan di pisah entar nga bakal tampil tuh animasi .. kasian komputernya punyeng nyari" animasi nya ... hehehehe selamat mencoba gan..
Tidak ada komentar:
Posting Komentar
Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.