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

Membuat Login Pop Up Dengan JqueryUI

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

Gambar 1.1 Tampilan form login gratis dari internet.

 

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. Sisipkan style class gelap
  2. Tambahkan script Jquery dan Jquery-UI
  3. Bungkus kode login-form dengan tag div
  4. Tambahkan tombol pemicu agar form login muncul.
  5. 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 </style>

.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>
<script type="text/javascript" src="Jquery-UI.js"></script>

 

Selanjutnya kita bungkus div container login dengan  kode “<div id=dialog-login>” setelah tag pembuka < body>. Lalu tutup dengan tag </div> sebelum  tag  </body>. Maksudnya untuk apa sih kita menambahkan div ini? Begini, nantinya div dialog-login ini akan kita tambahkan atribut style yang valuenya sebagai berikut

style="display:none; margin:0 auto; z-index: 99999; position:relative;"

nah jadi atribut diatas kita tambahkan ke div dialog login sehingga akan seperti ini

<div id=dialog-login style="display:none; margin:0 auto; z-index: 99999; position:fixed;">

Kalau Anda menjalankannya dengan benar maka form loginnya akan hilang karena efek dari atribut style tadi.

Lalu kita tambah sebuah tombol ber ID “bukalogin” sebagai pemicu agar dialog loginnya terbuka

Taruh kode berikut pada sebelum tag </body>

<button id="bukalogin">Buka login</button>

 

Silahkan klik tombol buka login, maka tampilannya akan seperti ini

Gambar 1.2  Hasil penambahan Button Buka login

 

 

Button di atas akan bertindak sebagai pemicu ledakan bergoyang.  Hehe, jadi ketika itu di klik akan keluar deh efek pop-up login bergoyangnya. Namun sekarang kalau Anda klik belum akan terjadi apa-apa. Sabar yah!!

Oke terakhir silahkan tambahkan kode berikut  persis sebelum tag </body>

<script type="text/javascript">
$("#bukalogin" ).click(function() {
$('body').append('<div class="gelap"></div>');
$('.gelap').fadeIn(300);
  $("#utama" ).show( "bounce", 3000 );
});
$("#tutup" ).click(function() {
  $("#utama" ).hide( "bounce", 3000 );
$('.gelap').fadeOut(300);
});
</script>	

Bagi Anda yang pernah menggunakan Jquery-UI pasti sudah tahu kode diatas. Yah, kode diatas adalah kode inti untuk menjalankan efek dialog pop-upnya.  Biasanya kalau dulu kode ini di tempatkannya pada bagian head. Namun zaman sekarang penempatannya memang harus di dalam tag body agar kodenya dapat berjalan. Juga penempatannya harus setelah kode form login juga yah.

Sekarang bisa Anda test lagi di browser. Jangan lupa jalani ritual refresh browser dulu agar efeknya jalan.

Kode diatas di bagi dalam dua bagian besar, yakni ketika tombol link di klik dan tombol close dialog pop up di klik. Biar lebih afdol akan saya jelaskan beberapa bagian kode tersebut. Tapi bagian kode yang penting saja, sisanya walau tanpa penjelasan itu tetap di tulis.

$("#bukalogin" ).click(function() {  

Kode diatas memberi tahu kalau elemen ber id bukalogin(dalam hal ini tag button) di klik akan menjalankan perintah selanjutnya.

$('body').append('<div class="gelap"></div>');

Perintah diatas untuk mempersiapkan layar hitam untuk menimpa elemen body.

$('.gelap').fadeIn(300);

Perintah untuk memunculkan layar hitam

  $("#utama" ).show( "bounce", 3000 ); 

Perintah untuk menampilkan form pop-up login

$("#tutup" ).click(function() {{  

kode diatas menunjukan kalau elemen ber id tutup(dalam hal initulisan tutup) di klik akan menjalankan perintah selanjutnya.

$("#utama" ).hide( "bounce", 3000 );

perintah untuk menyembunyikan layar hitam

$('.gelap').fadeOut(300);

-perintah untuk menyembunyikan pop-up login

Silahkan coba saja di browser. Bagaimana hasilnya?

Benarkan kan efeknya bergoyang. Kenapa bisa bergoyang? Jawabannya terletak pada kode

$("#utama" ).show( "bounce", 3000 );  

dan

$("#utama" ).hide( "bounce", 3000 );

 

Lihat pada ketikan show dan hide saya menggunakan efek yang sama yaitu bounce.  Pada tulisan bounce sebenarnya bisa Anda ubah dengan efek lainnya. Efek lainnya yang tersedia seperti   Blind, clip, drop, explode, fade, fold, highlight, puff, dll.  Lengkapnya Anda bisa cek efek-efek yang tersedia pada situs Jquery UI.

Terakhir bagaimana nih cara balikin lagi? Gak mungkin kan kalau di munculin terus-terusin. Biasanya kalau sebuah pop-up itu ada tombol closenya. Berhubungan ini kita buat dari nol, kita buat sendiri saja. Kalau di form login yang sedang saya gunakan, saya tinggal mengubah tulisan link Download menjadi Tutup dan menambahkan id CSS tutup sebagai pemicu. Berikut kodenya sebelumnya

<a href="#">Download source file</a>

Diubah menjadi 

<a id="tutup" href="#">TUTUP</a>

 

 Nah seperti itulah jadinya. Apa yang sudah saya sampaikan adalah dasarnya.  Anda kembangkan lebih lanjut sesuai kebutuhan.  Jika Ada yang ingin berkonsultasi lebih lanjut silahkan komentar aja. Jangan lupa halaman ini di bookmark yah.

 

 

 


About Author

Dadan

Saya adalah pria biasa saja yang tumbuh semakin besar di lingkungan yang serba biasa, Semoga kehadiran saya disini bisa membantu Anda. ^_^


Comment & Discussions

    Please LOGIN before if you want to give the comment.