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:
<html>
<head>
<title>Form Login</title>
<link rel="stylesheet" type="text/css" href="css-login.css">
<script type="text/javascript" src="jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("form.expose").bind("click keydown", function() {
$(this).expose({
maskId: 'mask',
onLoad: function() {
this.getExposed().css({backgroundColor: '#fff'});
},
onClose: function() {
this.getExposed().css({backgroundColor: null});
},
api: true
}).load();
});
});
</script>
</head>
<body>
<b>Form Login</b>
<form action="#" method="post" class="expose">
<label for="username">Username</label>
<input id="username" name="username"/><br />
<label for="password">Password</label>
<input id="password" type="password" name="password"/><br />
<input id="submit" type="submit" value="Login" /><br />
</form>
</body>
</html>
<head>
<title>Form Login</title>
<link rel="stylesheet" type="text/css" href="css-login.css">
<script type="text/javascript" src="jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("form.expose").bind("click keydown", function() {
$(this).expose({
maskId: 'mask',
onLoad: function() {
this.getExposed().css({backgroundColor: '#fff'});
},
onClose: function() {
this.getExposed().css({backgroundColor: null});
},
api: true
}).load();
});
});
</script>
</head>
<body>
<b>Form Login</b>
<form action="#" method="post" class="expose">
<label for="username">Username</label>
<input id="username" name="username"/><br />
<label for="password">Password</label>
<input id="password" type="password" name="password"/><br />
<input id="submit" type="submit" value="Login" /><br />
</form>
</body>
</html>
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.
sumber : http://www.papatlimo.com/2011/02/form-login-dengan-jquery-tools.html<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 CSSmaskId: 'mask',// saat form ter-expose maka warna background form akan berubahonLoad: function() {this.getExposed().css({backgroundColor: '#fff'});},// saat form tidak ter-expose maka warna background kembali ke warna awalonClose: function() {this.getExposed().css({backgroundColor: null});},api: true}).load();});});</script>
0 comments:
Post a Comment