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]()