Многоуровневое дерево с маркерами, сохраняющее состояние (HTML, CSS, jQuery, Cookies)
Продолжается развитие темы о многоуровневом дереве с маркерами.
Теперь дерево выросло и окрепло, стало взрослее и помнит выбранный узел и состояние кажого узла в отдельности.
Страницу можно перезагружать, а дерево все равно будет помнить все что вы открыли и выбрали!
Для сохранания состояния использованы Cookies и jquery.cookies.js плагин. Работать с cookies очень просто.
Подготовка Html
Дерево будет работать, если выполнить базовое условие — оформить html в таком виде:
Для сосздания подуровня достатночно вставить после заголовка узла вложенный список такой же структуры.
В принципе глубина вложения не ограничена, но так как все элементы загружаются сразу вы рискуете попасть на трафик и долгое ожидание, так что будте бдительны.
Обновленный скрипт дерева
Все пояснения в комментариях кода.
/*
(c) 2009 r3code.habrahabr.ru
По вопросам модификации под задачу обращайтесь
Скрипт: Построение дерева по готовому HTML списку.
r3code.habrahabr.ru/blog/59823
Выделяем узлы имющие поддеревья и добавляем у ним метку.
Определяет поведение узлов дерева при клике на них.
— Изменяет состояние маркера раскрытия (открыт/закрыт).
— Узлы содержащие в себе другие узлы, по клику разворачиваются
или сворачиваются, в зависимости от текущего состояния.
— При переходе с одного узла на другой снимается выделение (.current)
и пеходит на выбранный узел.
— Определяет последний узел с поддеревом и скрывает соединительную
линию до следующего узла этого уровня.
— Сохранаяет состояние узлов (откр./закр.) и выбранный узел в cookies.
— При установленных cookies состояние узлов восстанавливается при загрузке.
$( document ).ready( function () /* Расставляем маркеры на узлах, имющих внутри себя поддерево.
Выбираем элементы ‘li’ которые имеют вложенные ‘ul’, ставим для них
маркер, т.е. находим в этом ‘li’ вложенный тег ‘a’
и в него дописываем маркер ‘ ‘.
a:first используется, чтобы узлам ниже 1го уровня вложенности
маркеры не добавлялись повторно.
*/
var root = $( ‘#multi-derevo’ );
// уникальные идентификаторы всем узлам, сквозная нумерация (Nested set)
$( ‘li’ , root).each( function (index) this .id = ‘n’ + index;
>);
$( ‘li:has(«ul»)’ , root).find( ‘a:first’ ).prepend( ‘ ‘ );
// выбрать текущий узел
var current_id = $.cookie( ‘current_node’ );
if (current_id) $( ‘#’ +current_id).find( ‘a:first’ ).toggleClass( ‘current’ );
// вешаем событие на клик по ссылке
//————————————
$( ‘li span’ , root).click( function () // снимаем выделение предыдущего узла
$( ‘a.current’ , root).removeClass( ‘current’ );
var a = $( ‘a:first’ , this .parentNode);
a.toggleClass( ‘current’ );
var current_id = a.parent( ‘li’ ).attr( ‘id’ );
//alert(a.parents(‘li’).get(0).tagName+»#»+a.parents(‘li’).attr(‘id’));
setCookie( ‘current_node’ ,a.parents( ‘li’ ).attr( ‘id’ ) || null );
// Выделяем выбранный узел
toggleNode( this .parentNode);
>);
//postLoad(); // функция раскрытия по текущему url
openNodes(); // открыть по данным cookie
>)
//———————————————————————————
// Выделил функцию разворачивания дерева в отдельную
function toggleNode(Node) < // node= li
prepareLast(Node);
// анимация раскрытия узла и изменение состояния маркера
var ul=$( ‘ul:first’ ,Node); // Находим поддерево
if (ul.length) < // поддерево есть
ul.slideToggle(200); //свернуть или развернуть
// Меняем сосотояние маркера на закрыто/открыто
var em=$( ’em:first’ ,Node); // this = ‘li span’
// было em.hasClass(‘open’)?em.removeClass(‘open’):em.addClass(‘open’);
em.toggleClass( ‘open’ );
saveTreeState();
>
>
-
,
выбираем прямых потомков ul > li, назначаем им класс ‘last’ */
$( this ).find( ‘ul:first > li’ ).addClass( ‘last’ );
>
>)
>
// функция разворачивания дерева до выбранной ранее ссылки
function postLoad() var url = window.location.toString();
var max = 0;
var a = null ;
$( ‘#multi-derevo li span a’ ).each( function () // сравниваем адрес страницы и ссылку из атрибута
if (url.indexOf( this .href) >= 0 && this .href.length > max) a = this ;
max = this .href.length;
>
>);
// если узел не виден, то разворачиваем дерево
if ($(a). is ( ‘:hidden’ ) || $(a).parents( ‘:hidden’ ).length) var li = $(a).parents().filter( ‘li’ );
prepareLast(li);
toggleNode(li);
>
// выделим выбранный узел
if (a) $(a).toggleClass( ‘current’ );
>
else < // первый показ, выберем первую ссылку (можно убрать если не нужно)
$( ‘#multi-derevo li span a:first’ ).toggleClass( ‘current’ );
>
>
// подготовка информации о сосотояниях узлов
function GetOpenedNodes(items) < // li:has('ul')
var str = [];
$(items).each( function () var res = $( this ).attr( ‘id’ );
var state = $( ’em:first’ , this ).hasClass( ‘open’ ) ? 1 : » ;
if (res && state) <
str.push(res);
>
>);
return str.join( ‘,’ );
>
// сохранить полный список открытых узлов
function saveTreeState() <
var open_id = GetOpenedNodes($( ‘#multi-derevo li:has(«ul»)’ )) || null ;
setCookie( «open_nodes» , open_id);
return false ;
>
// раскрытие узлов по указанному списку
function openNodes() // читаем куки и открываем узлы
var open_nodes = $.cookie( «open_nodes» );
if (open_nodes) var nodes = open_nodes.split( ‘,’ );
if (nodes[0]) <
for ( var node in nodes) nodes[node] = ‘#’ + nodes[node];
>
var ids = nodes.join( ‘,’ );
$(ids).each( function () toggleNode($( this ));
>);
>
>
return false ;
>
Пример 2. Маркеры вынесены левее, чтобы текст был выравнен по одной вертикальной линии на одном уровне. Изменен CSS и скрипт.
UPD 19.05.2009
Отказался от сохранения состояния дерева при unload — Opera не поддерживает. Теперь состояние дерева сохраняется при клике на узел. Пример и скрипт обновлен.
Структура папок и элементов
В этой части самоучителя мы познакомимся с новыми для вас терминами, которые используются при описании папок и HTML-элементов.
Примечание: папку также часто называют директорией или каталогом.
Структура сайта
Не держите все файлы в одной папке. Даже небольшими сайтами намного проще управлять, если разложить HTML документы, изображения и другие ресурсы в разные папки, создав тем самым определенную структуру расположения различных файлов. Структурируя файлы как вам удобно, вы можете выбрать для себя достаточно гибкую систему организации файлов, учитывая то, что сайт может расти, система файлов при этом будет оставаться ясной и понятной. Структуру (иерархию) каталогов, в которых располагаются различные файлы, обычно можно увидеть в виде древа. Рассмотрим в качестве примера следующее изображение.
Как вы видите, структура — это всего лишь схема, отображающая вложенность одних каталогов в другие. В примере мы использовали всего три каталога, однако этого будет достаточно для того, чтобы описать всю необходимую информацию. Часто каталоги описывают с помощью терминов наследственных (семейных) связей. У нас есть папка под названием «Бананы», она расположена внутри папки «Фрукты». Папка «Фрукты» — это родитель каталога «Бананы», а каталог «Бананы» — ребенок (дочерний каталог) папки «Фрукты». Также у нас есть еще папка «Киви», которая является тоже ребенком каталога «Фрукты».
Чтобы вам лучше запомнить, опишем термины отдельно:
- Дочерний каталог — это папка, над которой в иерархическом древе есть родительский каталог.
- Родительский каталог — это папка, содержащая другой каталог.
- Есть еще такое понятие как «корневой каталог» — это основная (главная) папка, в которой расположены все прочие каталоги и файлы.
Структура элементов
Структуру элементов также можно представить в виде схемы, отображающей вложенность одних элементов в другие. Рассмотрим простой пример:
Схему, показывающую вложенность элементов, можно представить следующим образом:
- Дочерний элемент — это элемент, над которым в иерархическом древе есть родительский элемент. Дочерний элемент также еще называют ребенком.
- Родственный элемент — это другой дочерний элемент того же родительского элемента на том же уровне ответвления. Такие элементы также называют сестринскими, в примере такими элементами являются и , и .
- Корневой элемент — самый верхний элемент в иерархии ( ), все другие элементы являются его потомками.
- Родительский элемент — это элемент, который содержит другой элемент. Иногда его называют просто родитель .
- Потомок может являться непосредственно дочерним элементом, но обычно это общее название для всех элементов, которые вложены в другие элементы, независимо от того, как глубоко они вложены, например , , , и являются потомками элемента .
С этой темой смотрят:
- URL-адрес
- Абсолютные и относительные ссылки html
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru
Как создать дерево каталогов html тегами
Чтобы создать подкаталог вместе со всеми каталогами, расположенными выше, которые еще не существуют, используйте команду mkdir с опцией `-p’. Это очень удобно при создании сложных деревьев каталогов, чтобы не создавать каждый каталог отдельной командой.
Чтобы создать подкаталог `work/completed/2001′ — вместе с его корнем `completed’, который в свою очередь, является подкаталогом каталога `work’ в текущем каталоге, наберите:
$ mkdir -p work/completed/2001 [Enter]
Alex Otwagin 2002-12-16
Как создать дерево каталогов html тегами
Здравсвуйте.
Возникла такая проблема — требуется создать дерево с возможностью сворачивать\разворачивать его ветки. С джаваскриптом и пхп «общаюсь» не долго, поэтому в попытках разбраться как это осуществить только запуталась. Все найденные примеры рассказывают о том как его построить когда уже заранее изветно количество и расположение элементом.
У меня же задача примерно такая: php из базы выбирает все узлы перового уровня (например 1, 2, 3). Далее в случае если пользователь щёлкает на одному из отображённых узлов — php выбирает из БД все узлы второго уровня для этого узла (например 3.1, 3.2, 3.3), далее при желании пользователя показываются узлы 3.2.1 . 3.2.N и так далее. При этом содержание и количество этих узлов узнаётся именно в момент когда пользователь нажал на узел-родитель. При этом во всём дереве примерно 200к элементов, так что загружать его целиком в какой-нибудь массив — я так понимаю не желательно.
Думала над тем чтоб в пхп эхом выводить примерно такие строки:
где бы функция джаваскриптовая для элемента с заданым id расчитывала и выставляла его отступ от края страницы и при нажатии на этот элемент удаляла\скрывала всю его подветвь или наоборот — показывала. Вот тут проблема — как в этой функции указать использование того же самого php скрипта который вывел эту строку по которой ткнули? И как указать чтобы новые элементы располагались под своим родителем, а не где-нибудь ещё.
И я не знаю — возможно вся эта задача вообще как-то по-другому осуществляется или даже только через пхп?
И да, так же не уверена в какой раздел писать — сюда или же это к php относится больше.