Dengan menggunakan jquery, kita bisa memodifikasi tampilan form tersebut. Kali ini kita akan mencoba meggunakan 2 buah jquery untuk melakukan hal tersebut, yaitu dengan jnice plugin dan jqtransform.
JNICE PLUGIN
1. Buat susunan direktori project Jnice Form seperti ini :
- Folder images
- Index.html
- Jquery-1.4.2.min.js
- Jquery.jNice.js
- Style.css
- JNice.css
2. Silahkan download dan letakkan gambar berikut ini di folder icon :
3. Buat sebuah file css dan beri nama style.css.
body { font:12px/17px Arial, Helvetica, sans-serif; color:#333; background:#ccc; padding:40px 20px 20px 20px; }
#container { width:700px; margin:0 auto; }
fieldset { background:#ffffff; padding:10px; border:1px solid #fff; border-color:#fff #666661 #666661 #fff; margin-bottom:36px; width:600px; }
input, textarea, select { font:12px/12px Arial, Helvetica, sans-serif; padding:0; }
label { font-size:11px; font-weight:bold; color:#666; }
dl { clear:both; }
dt { float:left; text-align:right; width:90px; line-height:25px; margin:0 10px 10px 0; }
dd { float:left; width:475px; line-height:25px; margin:0 0 10px 0; }
#container { width:700px; margin:0 auto; }
fieldset { background:#ffffff; padding:10px; border:1px solid #fff; border-color:#fff #666661 #666661 #fff; margin-bottom:36px; width:600px; }
input, textarea, select { font:12px/12px Arial, Helvetica, sans-serif; padding:0; }
label { font-size:11px; font-weight:bold; color:#666; }
dl { clear:both; }
dt { float:left; text-align:right; width:90px; line-height:25px; margin:0 10px 10px 0; }
dd { float:left; width:475px; line-height:25px; margin:0 0 10px 0; }
4. Buat sebuah file html dan beri nama index.html. Panggil file css, library jquery, dan jNice plugin. Ketik kode berikut di antara tag <head>.
<head>
<link href="jNice.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.jNice.js"></script>
<title>Form Skinning JNice</title>
</head>
<link href="jNice.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.jNice.js"></script>
<title>Form Skinning JNice</title>
</head>
5. Kita akan membuat sebuah halaman registrasi menggunakan berbagai elemen form. Ketik code berikut di antara tag <body>.
<body>
<div id="container">
<form action="#" method="post" class="jNice">
<fieldset>
<dl>
<dt><label>Nama:</label></dt>
<dd><input type="text" /></dd>
</dl>
<dl>
<dt><label>Password:</label></dt>
<dd><input type="password"/></dd>
</dl>
<dl>
<dt><label>Jenis Kelamin:</label></dt>
<dd>
<input type="radio"/><label>Male</label>
</dd>
</dl>
<dl>
<dt></dt>
<dd>
<input type="radio"/><label>Female</label>
</dd>
</dl>
<dt><label>Status:</label></dt>
<dd>
<select size="1">
<option>Belum Menikah</option>
<option>Sudah Menikah</option>
</select>
</dd>
</dl>
<dl>
<dt><label for="interests">Bahasa:</label></dt>
<dd>
<input type="checkbox"/><label>Indonesia</label>
<input type="checkbox"/><label>Inggris</label>
<input type="checkbox"/><label>Cina</label>
<input type="checkbox"/><label>Arab</label>
</dd>
</dl>
<dl>
<dt><label>Pesan:</label></dt>
<dd><textarea></textarea></dd>
</dl>
<dl>
<input type="submit" value="Submit"/>
<input type="reset" value="Reset"/>
</dl>
</fieldset>
</form>
</div>
</body>
6. Tampilan tersebut dalam keadaan standar seperti ini :
7. Tidak ada kode jquery sama sekali untuk memodifikasi tampilan form dengan jNice plugin ini. Kunci dari penggunaan plugin ini ada pada class dari tag <form>, yaitu "jNice".
7. Tidak ada kode jquery sama sekali untuk memodifikasi tampilan form dengan jNice plugin ini. Kunci dari penggunaan plugin ini ada pada class dari tag <form>, yaitu "jNice".
<form action="#" method="post" class="jNice">
. . . . .
. . .
</form>
. . . . .
. . .
</form>
8. Coba buka index.html pada web browser. Lihat tampilan form sekarang. Terjadi perubahan pada seluruh komponen form seperti textfield, combobox, radiobotton, checkbox dan button.
Selamat Mencoba. . .
Comment Now
0 komentar