Membuat pesan sukses, error dengan jquery

Sudah lama g update web ini kangen juga :D, kali ini kita buat Artikel – artikel yang ringan tapi tetep mempercantik tampilan website kita. Apa yang kita bahas kali ini hanya untuk menampilkan pesan error dan sukses setelah kita melakukan penginputan data atau terjadinya error Scriptiing.
 
Buat css seperti dibawah ini :
#message {

display: none;
position: fixed;
font-size: 13px;
right: 5px;

}
#message .sukses, .error {
-moz-border-radius: 5px;
        -webkit-border-radius: 5px;
border-radius: 5px;
max-width: 400px;
line-height: 40px;
}
#message .sukses{
background: url(images/success.png) 3px 3px no-repeat #d6fdce;
padding: 0 10px 0 35px;
border: solid 1px #99de8e;
}
#message .error{
background: url(images/error.png) 3px 3px no-repeat #ffcecf;
padding: 0 10px 0 35px;
border: solid 1px #df8f90;
}
 
 
lalu buat javascript seperti dibawah :
 
function down(){
setTimeout(function(){
$(‘#message’)
.animate({"bottom": "-=55px"}, "slow")
.fadeOut(‘slow’ 
/* hilangkan saat anda apply di script */
,function(){
location.reload();
  }
/* end */
);
}, 3000); // setting berapa lama tampil
}
$(document).ready(function(){
var message="";
$("#error").click(function(){
message = "

Terdapat kesalahan input, silahkan ulangi lagi.

";

$("#message").html(message);
});
$("#sukses").click(function(){
message = "

Terima kasih data telah diinputkan.

";

$("#message").html(message);
});
         $(‘#message’).show().animate({"bottom": "+=55px"}, "slow", down);
});
 
Penjelasan singkat : 
$("#error").click(function(){  // fungsi saat id error terdapat even klik
$("#sukses").click(function(){ // fungsi saat id sukses terdapat even klik
 
$(‘#message’).show().animate({"bottom": "+=55px"}, "slow", down); // fungsi untuk Menampilkan Pesan  
 
setTimeout(function(){ // Lama waktu yang diperlukan untuk manampilkan pesan
 
// hilangkan fungsi dibawah, berfungsi untuk merefresh pages
,function(){
location.reload();
// end 
 
 
 

About Administrator

2016-01-12 10:32:36 2016-01-12 14:33:42

Check Also

Create Simple Chat App with Google App Engine Backend and Google Cloud Messaging

Mari membuat aplikasi chat sederhana menggunakan backend Google App Engine (bagian dari Google Cloud Platform) dan …

Tinggalkan Balasan

Translate »
error: Konten dilindungi !!