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>

</head>

<body>

<?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>

</body>

</html>

Output

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