Membuat Animasi kotak dialog dengan jQuery

kmaren ada yg PM ane, nanya gimana buat kotak chatboxnya yang ada di http://fake.hol.es
ok deh, skrng mo ane share gimana cara buatnya, ane pake jquery buat bikin animasi kedatangan dan kepergian kotak chatboxnya.
ane comot dr sini js nya http://jqueryui.com/dialog/

pertama, masukin library jquerynya.
taro script ini diatas </head>

 <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>

<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>

<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>

jenis-jenis animasinya yg dibagian ini

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 :D

 jd script lengkapnya, yang ditaro diatas </head> kaya gini

 <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.

<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

sumber : http://jqueryui.com

klo ada yang salah mohon dikoreksi ya..

• Tweet
• Share
• Share
• Share
• Share

Subscribe with your email:

Delivered by FeedBurner