Membuat Login Pop Up Dengan JqueryUI Oleh: Dadan
Berawal dari maraknya tayangan goyang di telivisi. Terinspirasi juga untuk membuat efek goyang pada website saya. Hehe kagak nyambung nih ilustrasi ceritanya :D. Tapi yah memang kali ini pembahasannya tidak akan jauh dari kata goyang. Masa sih? Iya lah, pada kali ini saya akan menunjukan bahwa tak hanya ma...
Berawal dari maraknya tayangan goyang di telivisi. Terinspirasi juga untuk membuat efek goyang pada website saya. Hehe kagak nyambung nih ilustrasi ceritanya :D. Tapi yah memang kali ini pembahasannya tidak akan jauh dari kata goyang. Masa sih? Iya lah, pada kali ini saya akan menunjukan bahwa tak hanya manusia aja yang bisa goyang. Tapi form login pada website bisa di buat goyang. Penasaran kan? (biasa aja tuh -_-) Sebelum mengikuti panduan ini, diharapkan Anda sudah mengerti dasar-dasar tentang html,css, dan Jquery. Bagi yang belum monggo belajar dulu daripada bingung di tengah-tengah. :D Kalau Anda ingin membuat pengunjung website sedikit terkesima, salah satu cara dengan membuat login popup bergoyang. Keuntungan dari membuat login pop-up ini adalah website Anda akan terlihat atraktif di mata pengunjung. Selain itu dengan login pop-up fokus mata pengunjung akan lebih meningkat ke tengah layar sehingga memudahkan pengunjung untuk mengisi form login. Yah, itulah pada topik kali ini saya akan membahas tentang login pop-up. Anda sebenarnya bisa membuat pop menggunakan tekhnik CSS. Namun kekurangannya kalau CSS tidak bisa di animasikan. Biar bisa di animasikan kita harus memakai Jquery-UI agar pop-up loginnya bisa di beri
efek animasi ketika di buka maupun di tutup. Bagi Anda yang sudah menggunakan Jquery-UI pasti sudah tahu cara menggunakan widget dialog pop up. Namun widget dialog default yang di sediakan oleh Jquery-UI kesannya hanya standar saja. Sedangkan kita inginnya biar lebih atraktif gitu. He-he Pertama-tama silahkan Anda cari desain form login kesukaan Anda di internet. Kalau Saya baru saja mendapat desin form login dari internet yang gambarnya seperti ini
Desain diatas saya dapatkan dari link ini. Anda juga bisa mendapatkan desain login lainnya dari link itu. Mumpung Gratis J WUIh, keren juga kalau desain diatas bisa di pop up animasi bergoyang dengan Jquery UI. Hanya saja bagaimana caranya? Ternyata caranya hanya dengan menambah script Jquery-UI dan beberapa kode CSS untuk mengkaburkan halaman utama. Dalam hal ini kita mesti teliti dalam menambah kode CSS yang akan di timpa dan tahu selector mana yang harus di sesuaikan. Berikut ringkasan langkah-langkahnya jika Anda sudah mendapatkan desain login Anda sendiri : 1. 2. 3. 4. 5.
Sisipkan style class gelap Tambahkan script Jquery dan Jquery-UI Bungkus kode login-form dengan tag div Tambahkan tombol pemicu agar form login muncul. Buat kode inti Jquery UI
Bagi yang mau coba silahkan di download dulu bahan-bahannya disini. Oke, setelah bahan-bahannya sudah siap bisa Anda lihat di folder login-form-paper-style, di situ ada file HTML dengan nama yang sama. Lihat index.html Buka file utama desain loginnya yang bernama index.html Pertama-tama kita siapkan dulu layar hitamnya (wUIh serem). Maksudnya tambahkan kode CSS berikut sebelum tag .gelap{display: none;
background: #000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.8; z-index: 999;}
Kode diatas ibarat lampu redup. Tahu kan kalau kita nonton bioskop ketika film di mulai, semua lampu pada mati kecuali layar. Nah kode diatas gunanya seperti itu, dia berguna mematikan semua lampu agar nanti mata pengunjung bisa nyaman ke pop-up login kita. Lalu tambahkan kode untuk menyisipkan file Jquery.js dan Jquery-UI.js pada bagian head. <script type="text/javascript" src="Jquery.js"> <script type="text/javascript" src="Jquery-UI.js">
Selanjutnya kita bungkus div container login dengan kode “
” setelah tag pembuka < body>. Lalu tutup dengan tag
sebelum tag
