Membuat Animate Login Form Dengan JQuery UI
Tutorial Membuat Animate Login Dengan JQuery UI menjelaskan langkah langkah membuat animate form login menggunakan JQuery UI. Diasumsikan anda telah memiliki pengetahuan dasar javascript. Contoh bisa dilihat di http://example.myphptutorials.com/animate-login/.
Pertama kunjungilah website JQuery UI dan download salah satu versi JQuery UI, yang digunakan pada tutorial ini adalah versi 1.8
Setelah selesai mendownload JQuery UI, extract file yang didownload ke directory yang diinginkan. Maka anda akan memiliki directory kurang lebih seperti berikut:
Yang dibutuhkan hanyalah dua folder yaitu folder "css" dan folder "js". Copy kedua folder tersebut ke directory yang diinginkan misal, ke directory animate-login. Kemudian buat sebuah file html seperti di bawah:
<html>
<head>
<title>
Animate Login Form
</title>
</head>
<body>
</body>
</html>
Kemudian tambahkan css style dan javascript yang dibutuhkan pada bagian <head>
.....................
<head>
<title>
Animate Login Form
</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
</head>
.......................
Kemudian buat form login
..................
<div id="login-dialog" title="Please Login!" style="display:none;">
<form name="form-login" id="form-login">
User Name : <input type="text" name="username" />
Password : <input type="password" name="password" />
</form>
</div>
....................
Tambahkan fungsi javascript untuk menampilkan login form
...........................
<script type="text/javascript">
function showLoginForm(){
$("#login-dialog").dialog({
show:'bounce',
hide: 'fold',
buttons : {
"Sigin" : function(){
$("#form-login").submit();
},
"Cancel" : function(){
$(this).dialog('close');
}
}
});
}
</script>
...........................
Tambahkan Link / anchor untuk men-trigger menampilkan form
.......................................
<a href="#" onclick="showLoginForm(); return false;">Login</a>
.......................................
Gabungkan semuanya menjadi:
<html>
<head>
<title>
Animate Login Form
</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
</head>
<body>
<div id="login-dialog" title="Please Login!" style="display:none;">
<form name="form-login" id="form-login">
User Name : <input type="text" name="username" />
Password : <input type="password" name="password" />
</form>
</div>
<script type="text/javascript">
function showLoginForm(){
$("#login-dialog").dialog({
show:'bounce',
hide: 'fold',
buttons : {
"Sigin" : function(){
$("#form-login").submit();
},
"Cancel" : function(){
$(this).dialog('close');
}
}
});
}
</script>
<a href="#" onclick="showLoginForm(); return false;">Login</a>
</body>
</html>Simpan html tersebut dengan nama misalnya login.html, kemudian buka file tersebut dengan browser. Hasilnya akan seperti contoh di http://example.myphptutorials.com/animate-login/. Jika ada pertanyaan bisa disampaikan melalui comment form di bawah. Download Tutorials