Membuat Form Slide Animate dan SlideDown Jquery UI
Halo teman-teman, apa kabar,,?? Semoga kalian selalu diberikan sehat dan bahagia ya. Di artikel kemarin kita telah membahas atau mempraktekkan beberapa guna dari Jquery, dan di kesempatan yang bagus ini kita akan Membuat Form Slide Animate dan SlideDown Jquery UI yang nanti nya kita akan merancang form daftar yang lazim nya ada di sebelah kanan situs. Tetapi kita bikin sedikit lebih menarik dengan menggabungkan Animate dan SlideDown guna yang terdapat di Jquery UI (user interface). Bagus saya berikan screenshotnya yang nantinya akan kita bikin
Kita seketika saja praktekkan, teman-teman siapkan code editornya. Copy script di bawah ini
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Animate dan SlideDown</title>
<style>
*{padding: 0; margin: 0}
#content{color: #F13C00; background-color: #5edae9;font-size: 25px;padding: 20px;text-align: center;width: 600px;margin: auto;border-radius: 5px 5px 0 0;font-size: 50px;}
#content1{height: 473px; background: #d8eff0; width: 640px; margin: auto; border-radius: 0 0 5px 5px;}
table{width:500px; margin: auto; padding: 20px; font-size:24px; color:white; }
th{background: #00509E; padding: 20px; font-size: 30px; border-radius: 5px}
tr td{padding: 10px 0; color:brown;}
input{padding: 10px; width: 400px;border-radius: 3px; border:1px solid white; font-size: 18px}
input[type=submit]{background: #00509E;padding: 20px;width: 523px; border-radius: 5px; border:1px solid #00509E; color:white; font-size: 20px; display: block;}
input[type=submit]:hover{background: orange; border:1px solid orange; display: block;}
</style>
</head>
<body>
<div id=content>Klik bagi mendaftar</div>
<div id=content1>
<table>
<form action= method=>
<tr>
<th colspan=3>Silahkan Mendaftar</th>
</tr>
<tr>
<td>Nama</td>
<td></td>
<td><input type=text name= placeholder=Masukkan Nama></td>
</tr>
<tr>
<td>Email</td>
<td></td>
<td><input type=text name= placeholder=Email></td>
</tr>
<tr>
<td>No Telp</td>
<td></td>
<td><input type=text name= placeholder=Nomor Telepon></td>
</tr>
<tr>
<td>Password</td>
<td></td>
<td><input type=password name= placeholder=Password></td>
</tr>
<tr>
<td colspan=3><input type=submit name= value=Daftar></td>
</tr>
</form>
</table>
</div>
</body>
</html>
Lalu paste di code editornya dan save dengan nama index.html, kemudian open to browse atau run. Output akan menghasilkan seperti gambar di bawah ini
Langkah berikutnya berikan display:none di pada css #content1
Berfungsi bagi hidden form, seandainya telah di tambahkan di save lalu refreas di browsernya
Nah form telah berhasil kita hidden, kemudian kita berikan guna Jquery nya. Jangan lupa berikan library Jquery dan Jquery UI di pada tag <head>
<link rel=stylesheet href=https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css>
<script src=https://code.jquery.com/jquery-1.12.4.js></script>
<script src=https://code.jquery.com/ui/1.12.1/jquery-ui.js></script>
Lalu tambahkan guna Jquery nya, temen-temen copy script dibawah ini
<script>
$( #content ).click(function() {
$( #content ).animate({color: rgb(255, 255, 255),backgroundColor: rgb(255, 191, 8)},500,function(){
$(#content1).slideDown(slow);
});
});
</script>
Kemudian disave dan refreas di browsernya, lalu teman-teman klik di headernya. Karenanya setelah di klik akan mengerjakan perubahan background dan warna text berbeda yang di jalankan oleh Jquery UI (user interface). Setelah background berubah kemudian akan mengerjakan slideDown yang sebelumnya css #content1 kita berikan display:none dan berikutnya akan dijalankan oleh guna slideDown() yang terdapat di Jquery. Form telah terlihat lebih menarik, Lumayan gampang bukan…??!! Bagus mungkin sekianlah dulu di artikel kali ini mengenai Membuat Form Slide Animate dan SlideDown Jquery UI semoga dapat menjadi tambahan ilmu Jquerynya. Silahkan teman-teman memodifikasinya sendiri ya, Oke terimakasih dan semoga bermanfaat. Hingga Jumpa di artikel berikutnya. 🙂
Baca pun artikel Mengenal Istilah Paren dan Child Pada Jquery
Sumber https://kursuswebsite.org
