Form Login dengan jQuery Tools

Postingan kali ini saya akan memberikan tutorial membuat form login dengan menggunakan jQuery tools. jQuery Tools merupakan kumpulan dari komponen library jQuery yang sudah di packing dalam bentuk user-interface yang elegan. Form login ini dapat  kita gunakan untuk login admin pada website. Sebelumnya saya pernah menulis tentang cara membuat form login auto fokus. Bedanya kali ini tampilan yang akan kita buat akan sedikit lebih bagus dari form login sebelumnya.

Dan seperti inilah bentuk form login yang akan kita buat. Dengan menggunakan salah satu fasilitas di dalam jQuery tools yang bernama Expose, kita akan membuat form tersebut ter-expose saat kita meng-klik salah satu komponen yang ada di form tersebut.

Sekarang yang kita butuhkan untuk membuat form seperti gambar diatas adalah sebuah file jquery.tools.min.js, sebuah file CSS untuk mengatur tampilan form, dan sebuah file HTML yang isinya sebagai berikut:
Di bagian HEAD dari file HTML diatas terdapat script jQuery yang mengontrol perubahan tiap-tiap komponen yang ada di halaman web. Seperti yang ada di script diatas, terdapat selektor class bernama expose. Class expose ini mewakili form yang nantinya apabila di-klik maka akan mengekspose form  tersebut dan membuat obyek di sekelilingnya terlihat samar-samar.
<script type="text/javascript">
$(document).ready(function(){
// expose form saat kursor mouse berada di salah satu komponen form
$("form.expose").bind("click keydown", function() {
$(this).expose({
// mengatur tampilan background dengan CSS
maskId: 'mask',
// saat form ter-expose maka warna background form akan berubah
onLoad: function() {
this.getExposed().css({backgroundColor: '#fff'});
},
// saat form tidak ter-expose maka warna background kembali ke warna awal
onClose: function() {
this.getExposed().css({backgroundColor: null});
},
api: true
}).load();
});
});
</script>
 


13 Comment:

situsonline said...

Form ini di gunakan di mana bro...?apakah untuk wp atau blogspot...?atau semuanya...?

Ahmad Fikry said...

Ini untuk form login web biasa, bukan bwt CMS..

Anonymous said...

keren banget brooooooooooo

MY WORLD said...

boss..aku adlh org bru di blogger..aku dh punya blog di blogger..aku dh coba caramu tpi msih lom bisa coba lebigh detail lok bisa maksih...

Ahmad Fikry said...

Kalo kamu punya web pake hosting sendiri, ini bisa digunakan untuk form login / form2 sejenisnya. Tapi kalo untuk blogspot menurutku gak cocok.

Fajar Syakhari said...

mana link download nya nih ?????????

Unknown said...

mas, kalau script untuk merubah hurup atau angka di password jadi tanda ******* itu gimana ya??

saya tunggu jawabannya ya mas commentnya akan saya feed!

Ahmad Fikry said...

Unknown: Maksud pertanyaannya itu gimana mas? Pakai kode html <input type="password" /> kan udah bisa.

citra said...

mas saya jg udah coba buat di website saya yang menggunakan css n jquery, tp blm bisa, ap di posting dulu??

rani said...

oya mas...
itu sebenarnya untuk login apa??
ga ngudeng ak.....

maksud a...
untuk login website pertama x dibuka
atau untuk login, pada saat ingin merubah tampilan atau menambah informasi...
tlg jelasin mas?????

Ahmad Fikry said...

citra : diposting gimana maksudnya?

rani : ya, buat login buat website / administrator. Buat form inputan juga bisa.

Edwin said...

mas kalau buat login memakai hak akses gimana ya
tolong dong pencerahannya, maklum msh newbie nich :)

lintasbertuah said...

diletakkan di css bisa ya ??

Post a Comment