Дерево каталогов на PHP

Если у Вас есть директория наполненная каталогами которые содержат большое количество файлов с расширением .html, css, txt, js и т.д. В конце концов Вам потребуется вывести дерево каталогов из этой директории. Смотрите три варианта как отобразить дерево каталогов в браузере с помощью PHP, jQuery, CSS3.

Дерево каталогов на PHP

Знать где и в каком порядке находятся ваши файлы очень важно. Многие те кто использует компьютер для работы, как правило хранят свои файлы в организованном порядке.

Простой способ отслеживать большое количество файлов с помощью дерево каталогов (папок, файлов).

Название каталогов структурой дерева можно вывести в окно браузера с помощью простого кода PHP.

к меню ↑

Дерево каталогов код PHP:

<?php
    $path = '../';
    $queue = '';

	function createDir($path = '.')
	{	
		if ($handle = opendir($path)) 
		{
			echo '<ol class="tree">';
		
			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 '</ol>';
		}
	}
	
	function printQueue($queue, $path)
	{
		foreach ($queue as $file) 
		{
			printFile($file, $path);
		} 
	}
	
	function printFile($file, $path)
	{
		echo '<li class="file"><a href="' . $path.$file. ' ">' . $file . '</a></li>';
	}
	
	function printSubDir($dir, $path)
	{
		echo '<li class="toggle">' . $dir . '<input type="checkbox">';
		createDir($path.$dir.'/');
		echo '</li>';
	}
 
	createDir($path);
к меню ↑

Описание основных функции:

  • $path — путь к файлам для дерева каталогов, если значение '.' выводятся файлы из текущего каталога где находится файл tree.php.
  • createDir($path) принимает в путь (или по умолчанию в каталоге, в котором этот файл находится). Использует как printFile($file, $path) и printSubDir($dir, $path).
  • printFile($file, $path) выводит ссылку в элемент HTML <li> с помощью данного файла и пути к нему.
  • printSubDir($dir, $path) каталоги и подкаталоги с помощью вызова createDir($path) там где рекурсия.
  • Функция opendir — открывает дескриптор каталога, подробности смотрите на ua2.php.net.
к меню ↑

Дерево каталогов с помощью jQuery

По большому счету кода PHP хватает что бы визуально определить на каком уровне находится каталог и его содержимое. Но, что делать если нужно посмотреть содержимое только одного выбранного каталога, а не всё сразу. С помощью jQuery можно сделать что бы после нажатия на каталог отображалось его содержимое, так что бы дерево каталогов напоминало список меню.

Вы наверно уже поняли, что библиотека jQuery нужна что бы скрыть содержимое каталога до вызова содержимого. Что бы реализовать это с помощью jQuery, его нужно подключить и добавить инициализацию на страницу с кодом PHP.

jQuery для дерева каталогов на PHP
Меню дерево каталогов на PHP и jQuery
к меню ↑

Код меню дерево каталогов jQuery

<!-- Библиотека jQuery -->
  <script src="http://yandex.st/jquery/2.0.2/jquery.min.js"></script>

<!-- jQuery -->
<script>$(function() {
	$("span.toggle").next().hide();
	$("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 ) );
	});
});</script>
к меню ↑

Дерево каталогов на CSS3

Скрыть и показать по клику содержимое каталога простое действие которое можно выполнить без jQuery с помощью свойств CSS3. В примере открывать содержимое каталога заставляет тег html input Свойства CSS3 для дерева каталогов с селектором :checked. Стили CSS Вы можете усовершенствовать на свой вкус и цвет.

Дерево каталогов с помощью свойств CSS3
Дерево каталогов PHP и CSS3 без jQuery

Дерево каталогов

к меню ↑

Заключение

Хранить свои файлы в организованном порядке значит иметь быстрый доступ к нужной информации. Дерево каталогов с помощью кода PHP поможет быстро найти нужный файл в директории с большим количеством каталогов с файлами.

Скачать дерево каталогов PHP и CSS3

Все вопросы задавайте в комментариях.