Membuat Login Pop Up Dengan Jqueryui

23 views

Berawal dari maraknya tayangan goyang di telivisi. Terinspirasi juga untuk menciptakan imbas 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 aku akan mengambarkan bahwa tak hanya insan aja yang sanggup goyang. Tapi form login pada website sanggup di buat goyang. Penasaran kan? (biasa aja tuh -_-)

 Sebelum mengikuti panduan ini, diperlukan Anda sudah mengerti dasar-dasar ihwal html,css, dan Jquery. Bagi yang belum monggo berguru dulu daripada gundah di tengah-tengah.  😀

Kalau Anda ingin menciptakan pengunjung website sedikit terkesima, salah satu cara dengan menciptakan login popup bergoyang. Keuntungan dari menciptakan login pop-up ini ialah 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 aku akan membahas ihwal login pop-up. Anda bahwasanya sanggup menciptakan pop menggunakan tekhnik CSS. Namun kekurangannya kalau CSS tidak sanggup di animasikan. Biar sanggup di animasikan kita harus menggunakan Jquery-UI supaya pop-up loginnya sanggup di beri imbas animasi saat di buka maupun di tutup.

 Bagi Anda yang sudah menggunakan Jquery-UI niscaya sudah tahu cara menggunakan widget obrolan pop up. Namun widget obrolan 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 gres saja mendapat desin form login dari internet yang gambarnya mirip ini

 

Desain diatas aku dapatkan dari link ini. Anda juga sanggup mendapat desain login  lainnya dari link itu. Mumpung Gratis J

WUIh, keren juga kalau desain diatas sanggup di pop up animasi bergoyang  dengan Jquery UI. Hanya saja bagaimana caranya? Ternyata caranya hanya dengan menambah script  Jquery-UI dan beberapa arahan CSS untuk mengkaburkan halaman utama. Dalam hal ini kita mesti teliti dalam menambah arahan CSS yang akan di timpa dan tahu selector mana yang harus di sesuaikan.

Berikut ringkasan langkah-langkahnya jikalau Anda sudah mendapat desain login Anda sendiri :

  1. Sisipkan style class gelap
  2. Tambahkan script Jquery dan Jquery-UI
  3. Bungkus arahan login-form dengan tag div
  4. Tambahkan tombol pemicu supaya form login muncul.
  5. Buat arahan inti Jquery UI

Bagi yang mau coba silahkan di download dulu bahan-bahannya disini.

Oke, sehabis bahan-bahannya sudah siap sanggup 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 berjulukan index.html

Pertama-tama kita siapkan dulu layar hitamnya (wUIh serem). Maksudnya tambahkan arahan 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 mirip lampu redup. Tahu kan kalau kita nonton bioskop saat film di mulai, semua lampu pada mati kecuali layar. Nah arahan diatas gunanya mirip itu, ia mempunyai kegunaan mematikan semua lampu supaya nanti mata pengunjung sanggup nyaman ke pop-up login kita.

Lalu tambahkan arahan untuk menyisipkan file Jquery.js dan Jquery-UI.js pada bab 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>” sehabis 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 obrolan login sehingga akan mirip 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 alasannya ialah imbas dari atribut style tadi.

Lalu kita tambah sebuah tombol ber ID “bukalogin” sebagai pemicu supaya obrolan loginnya terbuka

Taruh arahan berikut pada sebelum tag </body>

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

 

Silahkan klik tombol buka login, maka tampilannya akan mirip ini

 

 

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

Oke terakhir silahkan tambahkan arahan 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 niscaya sudah tahu arahan diatas. Yah, arahan diatas ialah arahan inti untuk menjalankan imbas obrolan pop-upnya.  Biasanya kalau dulu arahan ini di tempatkannya pada bab head. Namun zaman kini penempatannya memang harus di dalam tag body supaya kodenya sanggup berjalan. Juga penempatannya harus sehabis arahan form login juga yah.

Sekarang sanggup Anda test lagi di browser. Jangan lupa jalani ritual refresh browser dulu supaya efeknya jalan.

Kode diatas di bagi dalam dua bab besar, yakni saat tombol link di klik dan tombol close obrolan pop up di klik. Biar lebih afdol akan aku jelaskan beberapa bab arahan tersebut. Tapi bab arahan yang penting saja, sisanya walau tanpa klarifikasi 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 sanggup bergoyang? Jawabannya terletak pada kode

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

dan

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

 

Lihat pada ketikan show dan hide aku menggunakan imbas yang sama yaitu bounce.  Pada goresan pena bounce bahwasanya sanggup Anda ubah dengan imbas lainnya. Efek lainnya yang tersedia seperti   Blind, clip, drop, explode, fade, fold, highlight, puff, dll.  Lengkapnya Anda sanggup 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 aku gunakan, aku tinggal mengubah goresan pena 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 mirip itulah jadinya. Apa yang sudah aku sampaikan ialah dasarnya.  Anda kembangkan lebih lanjut sesuai kebutuhan.  Jika Ada yang ingin berkonsultasi lebih lanjut silahkan komentar aja. Jangan lupa halaman ini di bookmark yah.

 

 

 

Author: 
    author
    No related post!