Pencarian

Jumat, 30 Januari 2009

Membuat popup windows dengan JavaScript

Membuat popup windows dengan JavaScript
Tanpa JavaScript rasanya sebuah Website seperti makan nasi tapi menu nya biasa aja ne, nggak special lah hee...
JavaScript kan membuat website lebih menarik walaupun kadang2 membuat jengkel juga.
nah, di tutorial ini saya akan menjelaskan seidkit tentang membuat pop up windows dengan JS (JavaScript).
langsung aja copy perintah di bawah ini, letakkan diantara tag <head> fungsi JS </head>

<script type="text/JavaScript">
function Start(page) {
OpenWin = this.open(page, "CtrlWindow", "toolbar=no,menubar=no,
location=center,scrollbars=yes,resizable=no,width=900,height=800");
}
</script>


yang perlu diketahui antara lain :
function start(page) : ini adalah perintah untuk membuat fungsi dengan nama Start yang berisi parameter page.
OpenWin : nama variabel biasa.
this.open : perintah JS untuk membuka jendela browser baru
page, "CtrlWindow", "toolbar=no,menubar=no,location=center,scrollbars=yes,resizable=no,width=900,height=800"
perintah diatas sepertinya perintah untuk mengontrol jendela browser yang akan dibuka.
untuk menghilangkan toolbar, menubar, scrollbars berikan =no seperti diatas, resizabled sepertinya sebuah fungsi agar jendela yang akan dibuka ukurannya tidak bisa di ubah-ubah (tapi udah saya coba nggak mau tuh ????)
location untuk menentukan lokasi jendela browser ( nggak bekerja juga ne di browser saya).
lalu masukkan ukuran yang di inginkan pada width dan height (ini baru mau).
lalu di menu link kamu, tambahkan fungsi seperti ini :
misalnya untuk link ke file komentar.php, jadinya seperti ini:

<a href="javascript:Start('komentar.php')";>Posting Komentar</a>
"javascript:Start"
adalah pemanggilan fungsi Start JavaScript yang kita buat diatas, bisa juga nama fungsi start tsb diganti nama lain yang penting ketika dipanggil nama fungsinya harus sama.
Untuk mengkolaborasikannya dengan tombol submit, tambahkan event OnClick seperti ini:

<INPUT TYPE=button VALUE='Posting Komentar' onClick=javascript:Start('komentar.php');>

dan untuk mengkolaborasikan lagi dengan variabel luar yang sering kita pakai di php,
cukup buat seperti ini :

echo "<INPUT TYPE=button VALUE='Posting Komentar' onClick=javascript:Start('komentar.php?idkomentar=$idkomentar');>";

o ya, ada sebuah fungsi yang menurut saya menarik lagi ne di JS, fungsi ini bisa kamu letakkan misalnya di file simpankomentar.php, yaitu fungsi Refresh otomatis

<script language='JavaScript'>
opener.location.reload(true);
</script>

fungsi ini berguna untuk me-refresh otomatis halaman induk (yang membuka pop up menu (kamu).
kira-kira gunanya seperti ini, pada saat tombol Posting Komentar di klik, data tersimpan didatabase dan halaman induk kamu akan me-refresh dirinya secara otomatis tanpa refresh manual melaui browser untuk menampilkan komentar yang baru saja disimpan di database.

Mudahkan, selamat berkreasi.....
Hhhhhmmmm...beberapa pengertian fungsi JS diatas adalah menurut pemikiran saya sendiri, jadi kalo kamu menemukan penjelasan yang agak laen, maklum aja ya hee....

2 komentar:

  1. Ingin beruntung seperti temen-temen kamu?

    Langsung saja kamu mendaftar di AsliBandar dan rasakan permainan yang akan membuat hidupmu berwarna.

    Dengan Deposit yang terjangkau kamu berkesempatan menangkan Jackpot setiap harinya.

    Ingin beruntung seperti temen-temen kamu?

    Langsung saja kamu mendaftar di www.AsliBandar.net dan rasakan permainan yang akan membuat hidupmu berwarna.

    Dengan Deposit yang terjangkau kamu berkesempatan menangkan Jackpot setiap harinya.

    Untuk Info lebih lanjut silahkan menghubungi kami melalui :

    Pin BB : 2B3C34F4
    YM : Aslibandar_CS
    Skype : AsliBandar
    Telp : +855882388666
    FB : AsliBandar

    BalasHapus
  2. Halo Bossku ^^
    Segera Daftarkan ID di skb288,com
    Menyediakan 7 Permain Hanya Dengan 1 ID
    Serta Tersedia Promo Menarik
    Bonus Turn Over Terbesar
    Bonus Refferal Seumur Hidup
    Minimal Deposit Hanya 20Rb
    BBM : D8E87241
    WA : +62 878 8707 6927
    Di Tunggu Kehadirannya Bossku ^^

    BalasHapus