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

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

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

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

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

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

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



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

	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=
http://pixelcom.crimea.ua/"'.$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 для дерево каталогов
Меню дерево каталогов

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



<!-- Библиотека jQuery -->
  <script src=
http://pixelcom.crimea.ua/"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

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

12 комментариев на тему “Дерево каталогов на PHP, jQuery, CSS3”

  1. комментарии

    Не работает, в формируемом адресе везде точка перед названием файлов и директорий. как исправить?

  2. комментарии

    Привет alex,
    примените код php дерево каталогов указанный в этой статье и всё будет работать.
    Такой вариант без тегов HTML:

    // Открыть известный каталог и начать считывать его содержимое
    if (is_dir($dir)) {
    if ($dh = opendir($dir)) {
    while (($file = readdir($dh)) !== false) {
    echo "файл: $file : тип: " . filetype($dir . $file) . "\n";
    }
    closedir($dh);
    }
    }

  3. комментарии

    всё равно выдает ссылки в формате /site.ru/.file — . перед file и dir не дает открывать
    и в коде на странице не хватает ; после echo «»

  4. комментарии

    не верно указан путь к каталогам. Если файл tree.php находится в корне то путь такой » . » , а к файлам » / «. Если файл в папке то путь такой » . ./» , а к файлам » . «

  5. комментарии

    Виктор, я в php практически нуб. Скажите пожалуйста просто куда вставить файл или как поправить чтобы нормально работал. Полдня сижу, пытаюсь методом тыка заставить работать :(

  6. комментарии

    Я сделал это, надо
    <?php
    $path = ".";

    function createDir($path = '.')
    поменять на:
    <?php
    $path = "./";

    function createDir($path = './')
    и всё работает

  7. комментарии

    alex,
    просто Вы верно указали путь к каталогам. Файл teree.php можно разместить в любом месте, где путь может быть даже таким ../../

  8. комментарии

    то есть если файл на втором уровне путь надо указывать как ../?
    И пожалуста напишите код сортировки папок и файлов в них и куда его вставить

  9. комментарии

    alex,
    Вы не внимательно читали раздел Описание основных функции: . Если немного подумать, Вы бы не задавали такие … вопросы.

  10. комментарии

    Victor,
    1. всё-таки просто точки в path стоять не должно или «./» или «../» или «../../» и т.д.,
    2. readdir — неудобно использовать, т.к. выдаёт папки в порядке, как отсортировано на сервере. Лучше scandir (он их сортирует) и добавил сортировку фалов внутри,
    3. на 8й строке echo «» не хватает ‘;’ ,
    4. добавил вывод размера папок и файлов + обложил стилями в зависимости от размера (б, Кб, Мб, Гб)
    Выкладываю только php:

    <?php
    function sizedir($folder) {
    $files = scandir($folder);
    $c=0;
    foreach($files as $file) {
    if ($file=='.' or $file=='..') continue;
    $f0=$folder.'/'.$file;
    if (is_file($f0)) $c += filesize($f0);
    if (is_dir($f0)) $c += sizedir($f0);
    }
    return $c;
    }

    function getsize ($bytes) {
    if ($bytes<1024) return $bytes.' Bite';
    else if ($bytes<1048576) return round ($bytes/1024,2).' Kb';
    else if ($bytes<1073741824) return round ($bytes/1048576,2).' Mb';
    else return round ($bytes/1073741824,2).'Gb';
    }

    $path = '../';

    function createDir($path='../')
    {
    echo '';

    $cdir = scandir($path);
    foreach ($cdir as $key => $file)
    {
    if (is_dir($path.$file) && $file != ‘.’ && $file !=’..’)
    printSubDir($file, $path, $queue);
    else if ($file != ‘.’ && $file !=’..’)
    $queue[] = $file;
    }
    natsort($queue);
    printQueue($queue, $path);
    echo «»;
    }

    function printQueue($queue, $path)
    {
    foreach ($queue as $file)
    {
    printFile($file, $path);
    }
    }

    function printFile($file, $path)
    {
    echo « $file».getsize(filesize($path.»/».$file)).» «;
    }

    function printSubDir($dir, $path)
    {
    echo «$dir».getsize(sizedir($path.$dir)).»»;
    createDir($path.$dir.»/»);
    echo «»;
    }

    createDir($path);

    ?>

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>