Smart Note

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>

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