Membuat Tab
dengan JQuery
Terkadang saat kita membuat suatu aplikasi terdapat beberapa
form yang berisikan data yang sangat kompleks, semisal data karyawan. Di sini
kita menemui masalah bagaimana membuat sesuatu yang rumit menjadi terlihat
simple dan elegan. Salah satu caranya adalah dengan menyederhanakan form
menggunakan tab. JQuery mempunyai library yang membantu kita membuat tab.
Bagaimana caranya ? mari kita praktekkan.
Setelah itu buatlah form seperti di bawah ini:
<html>
<head>
<title>Membuat tab Jquery</title>
<script type="text/javascript" src="js/tab/jquery-1.1.3.1.pack.js"></script>
<script src="js/tab/jquery.tabs.pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="js/tab/jquery.tabs.css" type="text/css" media="print, projection, screen">
<script type="text/javascript">
$(function() {
$(\'#container\').tabs({ fxSlide: true, fxFade: true, fxSpeed: \'normal\' });
}); </script>
</head>
<body>
<div id="container">
<ul>
<li><a href="#fragment-1"><span>Profil Karyawan</span></a></li>
<li><a href="#fragment-2"><span>Alamat</span></a></li>
<li><a href="#fragment-3"><span>Foto</span></a></li>
<li><a href="#fragment-4"><span>Pendidikan</span></a></li>
<li><a href="#fragment-5"><span>Riwayat Jabatan</span></a></li>
</ul>
<div id="fragment-1">
<table class="admintable" cellspacing="1">
<tr>
<td>No Induk Karyawan</td><td>Sunarto</td></tr>
<tr><td>Nama Karyawan</td><td>RUSIATI AZIS</td></tr>
</table>
</div>
<div id="fragment-2">
<table class="admintable" cellspacing="1">
<tr>
<td>Alamat</td><td>Jl. Jendral Sudirman 564</td>
</tr>
<tr>
<td>Kota</td><td>Surabaya</td></tr>
</table>
</div>
<div id="fragment-3"> Foto </div>
<div id="fragment-4"> Pendidikan </div>
<div id="fragment-5"> Riwayat Jabatan </div>
</div>
</body>
</html>
Dari coding di atas di
dalam tag kita perlu meload file JQuery dan mendefinisikan dimana tab
diletakkan. Cara mendefinisikannya adalah sebagai berikut:
<script type="text/javascript">
$(function() { $(\'#container\').tabs({ fxSlide: true, fxFade: true, fxSpeed: \'normal\' });
}); </script> #container adalah id dari tag div, yang
digunakan untuk meletakkan tab. Untuk menentukan banyaknya tab, lihat tag. Di
situ didefinisikan beberapa tab dalam id fragment, misalkan tab untuk Profil
Karyawan mempunyai id fragment-1, Alamat mempunyai id fragment-2, dan
seterusnya. Demikian secuil tutorial dari saya. Semoga bermanfaat. Selamat
mencoba.
0 comments:
Posting Komentar