Creating Directory Tree With jQuery in PHP

Introduction

In this article I will create a directory tree with jQuery in PHP. The computer stores files in an organized manner. Using of directory tree you can easily find files. To create a directory tree I will use three files, style.css, menu.js, and index.php.

Example

This is "style.css" for the directory design.

body {

       font-family:  time new roman;

       f-size: 12px;

#jQ-menu ul {

       list-style-type: none;

#jQ-menu a, #jQ-menu li {

       color: red;

       text-decoration: none;

       padding-bottom: 2px;

#jQ-menu ul {

       left-padding: 12px;

}

 

This is the "menu.js" file.

 

    $(function () {

        $("span.toggle").next().hide();

        $("#menu a, #menu span.toggle").hover(function () {

            $(this).stop().animate({

                fSize: "17px",

                leftpadding: "10px",

                color: "black"

            }, 300);

        }, function () {

            $(this).stop().animate({

                ftSize: "14px",

                leftpadding: "0",

                color: "#808080"

            }, 300);

        });

        $("span.toggle").css("cursor", "pointer");

        $("span.toggle").prepend("+ ");

        $("span.toggle").click(function () {

            $(this).next().toggle(1000);

            var v = $(this).html().substring(0, 1);

            if (v == "+")

                $(this).html("-" + $(this).html().substring(1));

            else if (v == "-")

                $(this).html("+" + $(this).html().substring(1));

        });

    });

 

This is the "index.php" file for creating the directory tree. In this file we have three functions; they are:

  • makeDir($path)

  • printFile($file, $path)

  • printSubDir($dir, $path)

<html>

<head>

<title>Create Directory tree with jQuery</title>

<!-- CSS For The Menu -->

<link rel="stylesheet" href="style.css" />

</head>

<body>

<div id="menu">

<?php

$path = "./";

       function makeDir($path = '.')

       {     

       if ($handle = opendir($path))

       {

       echo "<ul>";

        while (false !== ($file = readdir($handle)))

       {

              if (is_dir($path.$file) && $file != '.' && $file !='..')

               printSubDir($file, $path, $queue);

              else if ($file != '.' && $file !='..')

               $queue[] = $file;

       }

              printQueue($queue, $path);

              echo "</ul>";

       }

       }

       function printQueue($queue, $path)

       {

       foreach ($queue as $file)

       {

        printFile($file, $path);

       }

       }

       function printFile($file, $path)

       {

              echo "<li><a href=\"".$path.$file."\">$file</a></li>";

       }

       function printSubDir($dir, $path)

       {

              echo "<li><span class=\"toggle\">$dir</span>";

              makeDir($path.$dir."/");

              echo "</li>";

       }

       makeDir($path);

?>

</div> 

<!--Add jQuery From the Google AJAX Libraries -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<!--jQuery Color Plugin -->

<script type="text/javascript" src="jquery.color.js"></script>

<!-- Import The jQuery Script -->

<script type="text/javascript" src="menu.js"></script>

</body>

</html>

Output

dire1.jpg

Click on the current directory and open the subdirectory or file.

dire2.jpg