Salah satu variasi dari navigasi menu adalah dengan tampilan tree. Kita akan membahas bagaimana membuat treeview dengan jQuery.
- Langkah pertama adalah mendownload source code yang ada
di http://www.dynamicdrive.com/dynamicindex1/treeview/jquery.treeview.zip . - Pada script anda silahkan include file seperti contoh di bawah ini:
<link rel=”stylesheet” href=”jquery.treeview.css” />
<script src=”../development-bundle/jquery-1.6.2.js”></script>
<script src=”jquery.treeview.js”></script> - Untuk scriptnya kita berikan contoh :
<script>
$(document).ready(function(){
$(“#navigasi”).treeview({
collapsed: true,
unique: true,
persist: “location”
});});
</script>
Perhatikan persist:”location” akan membuat treeview terbuka sesuai dengan namafilenya. - Kemudian untuk code htmlnya misalnya :
<ul id=”navigasi”>
<li> <a href=”index.html”>Home</a></li>
<li> Profile
<ul>
<li><a href=”about.html”>About</a></li>
<li><a href=”visi.html”>Visi Misi</a></li>
</ul>
</li>
<li> Product
<ul>
<li> <a href=”hosting.html”>Hosting</a></li>
<li> Website
<ul>
<li> <a href=”paket_basic.html”>Paket Basic</a></li>
<li> <a href=”paket_bisnis.html”>Paket Bisnis</a></li>
</ul>
</li>
<li> <a href=”maintenance.html”>Maintenance</a></li>
</ul></li>
</ul> - Coding lengkap htmlnya:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>Treeview </title>
<link rel=”stylesheet” href=”jquery.treeview.css” />
<script src=”../development-bundle/jquery-1.6.2.js”></script>
<script src=”jquery.treeview.js”></script>
<script>
$(document).ready(function(){
$(“#navigasi”).treeview({
collapsed: true,
unique: true,
persist: “location”
});});
</script></head>
<body>
<ul id=”navigasi”>
<li> <a href=”index.html”>Home</a></li>
<li> Profile
<ul>
<li><a href=”about.html”>About</a></li>
<li><a href=”visi.html”>Visi Misi</a></li>
</ul>
</li>
<li> Product
<ul>
<li> <a href=”hosting.html”>Hosting</a></li>
<li> Website
<ul>
<li> <a href=”paket_basic.html”>Paket Basic</a></li>
<li> <a href=”paket_bisnis.html”>Paket Bisnis</a></li>
</ul>
</li>
<li> <a href=”maintenance.html”>Maintenance</a></li>
</ul></li>
</ul><strong>Ini di Maintenance</strong>
</body>
</html>Silahkan code di atas disimpan ke about.html dan sesuaikan ‘ <strong>Ini di Maintenance</strong>’
dengan ‘<strong>Ini di About</strong>’.
Lakukan juga untuk visi.html, hosting.html, paket_basic.html, paket_bisnis.html, dan maintenance.html - Demo script ini dapat dilihat di http://aris.proweb.asia/treeview/index.html dengan tampilan seperti berikut ini:
Jika kita klik Profile maka akan muncul:
Jika kita klik About maka akan muncul:
Perhatikan bahwa link telah berubah ke about.html dan menu yang langsung disorot adalah About. - Informasi lebih lanjut silahkan mengunjungo http://www.dynamicdrive.com/dynamicindex1/treeview .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.