Sekarang ane share gimana cara buat animasi kedatangan dan kepergian kotak chatboxnya pake jquery. ane comot dr sini js nya http://jqueryui.com/dialog/
pertama, masukin library jquerynya.
taro script ini diatas</head>
PHP Code:
<script src="http://code.jquery.com/jquery-1.8.2.js"></script><script src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
eh, iya.. CSS nya juga sekalian. soalnya udah disediain jg. taro script ini diatas </head>
PHP Code:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="/resources/demos/style.css" /> kalo yg ini script buat ngatur jenis animasi sama kecepatan animasinya.
script ini juga ditaro diatas </head>
PHP Code:
<script>
$.fx.speeds._default = 1000; //kecepatan animasi
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind", //jenis animasi munculnya kotak dialog
hide: "explode" //jenis animasi hilangnya kotak dialog
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});</script> Quote:jenis-jenis animasinya yg dibagian ini
PHP Code:
show: "blind", hide: "explode"
bisa diganti ganti dengan ini :
1. blind
2. bounce
3. clip
4. drop
5. explode
6. fade
7. fold
8. highlight
9. puff
10. pulsate
11. scale
12. shake
13. size
14. slide
15. transfer
silakan dicoba sendiri efek2 nya
Jadi script lengkapnya, yang ditaro diatas </head> kaya gini
PHP Code:
<script src="http://code.jquery.com/jquery-1.8.2.js"></script><script src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$.fx.speeds._default = 1000; //kecepatan animasi
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind", //jenis animasi munculnya kotak dialog
hide: "explode" //jenis animasi hilangnya kotak dialog
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});
</script> sekarang saatnya kita masukin isi dr kotak dialog nya.
taro script ini dimana aja, sesuai tempat dimana mau dimunculin tombol untuk membuka dialognya.
PHP Code:
<div id="dialog" title="Judul">
<p>
<!-- konten dialog open -->
ISI KOTAK DIALOG DISINI
<!-- konten dialog kloset -->
</p>
</div>
<button id="opener">buka</button> //ini tombol yg diklik buat membuka kotak dialognya. bisa juga tombolnya diganti dengan gambar. ok, selesai. silakan disave. dan dicoba.
DEMO | DOWNLOAD
buat nyembunyiin fanspage di blog juga bagus keknya.
sumber : http://jqueryui.com
klo ada yang salah mohon dikoreksi ya..
