Salah satu variasi dari navigasi menu adalah dengan tampilan tree. Kita akan membahas bagaimana membuat treeview dengan jQuery.

  1. Langkah pertama adalah mendownload source code yang ada
    di http://www.dynamicdrive.com/dynamicindex1/treeview/jquery.treeview.zip .
  2. 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>
  3. 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.

  4. 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>

  5. 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

  6. 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.
  7. Informasi lebih lanjut silahkan mengunjungo  http://www.dynamicdrive.com/dynamicindex1/treeview .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

 

Membuat treeview dengan jQuery