Разработка → rdTree — DHTML-дерево на MooTools

apelsyn 30 июля 2008 в 03:01 1,5k

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

Это может быть help, справочная информация, быстрая навигация по админ-панели, древовидное меню и т.д. Пользователю такая организация навигации понятна, так как она реализивана во всех операционных системах.

Поиск хороших решений неприменно приводил к красиво оформленным и хорошо документированыи коммерческим библиотекам, например Zapatec Tree. За unlimited версию там просит 799$.

Дорого! Будем поддерживать разработчиков свободного ПО и искать хорошо написанное дерево на JavaScript.



Составим список интересных бесплатных решений (без всяких там «unlimited with link back») и проанализируем функционал.

Toolbox — DHTML Tree


Ссылка глючит из-за 'script': www.mattkruse.com/javascript/mktree
Классический пример, копирайты к скрипту больше чем сам скрипт. Включил в обзор, так как скрипт учит базовым правилам построения дерева. С дизайном у него не очень, но для поисковиков дерево построено грамотно.





Simple Tree Menu


Простая реализация дерева. Главное достоинство — компактность и простота. Дерево задается в принятом для такого рода программ виде.






Destroydrop Javascripts Tree


Ссылка глючит из-за 'script': destroydrop.com/javascripts/tree

Не использует фреймворк-и, написано 5 лет назад, аккуратное и компактное дерево.
Есть документация и примеры. Из минусов: чистый JavaScript — проблемы с индексацией,
не развивается с 2003 года.
Модификацию этого скрипта встречал в некоторых коммерческих CMS.




mygosuMenu / DynamicTree



Функционал схожий с Destroydrop Tree, но есть существенное отличие — дерево задается уже в понятной для индексации форме.
Скрипт «легкий» и не использует фреймворков.




jQuery — treeView Basic



Немного примитивное, но здесь ставка на простоту и минимализм в коде (без учета кода самого фреймворка). При скролинге в Explorer-е заметны глюки.
Текс дерева задается в хорошем для индексации виде.






jQuery plugin: Treeview



Хорошая реализация, хороший функционал. Текст дерева задается в хорошем для индексации виде. Есть скины, плавное разворачивание веток. Есть документация.
Пользователям jQuery, я думаю, ничего лучшего для работы с деревьями не найти.




Ext.tree



Отличная реализация дерева. Drag'n'drop, ajax, даже шаблон фотоальбома. Дерево
«тяжеловато» по объему кода, нету переноса длинных строк.
Отличная документация.




Mootools — Mif.Tree



Хорошая реализация дерева. Есть drag'n'drop, хорошая документация. Пожалуй, самый
богатый функционал из перечисленных реализаций дерева.
Есть только один недостаток — дерево задается в JavaScript в формате JSON, следовательно, с индексацией такого дерева будут проблемы. В дереве не реализованы переносы строчек.
Идеальное решение для использования в админ-панели.




Mootools — RIA DHTML Tree



Собственно это моя реализация дерева. Не корректно будет оценивать ее мне, поэтому напишу только то, что я реализовал:
  1. Дерево задается в классическом виде с помощью списков ul li. Это важно для нормальной индексации поисковиками.
  2. Если в ветке длинный текст, то реализован механизм переноса строчек. (Пришлось потратить значительную часть времени, чтоб это заработало во всех популярных браузерах)
  3. Дерево реализизует, на мой взгляд, самую необходимую базовую функциональность, и поэтому является компактным.
  4. В узел дерева можно вставить любой html, заключенный в тег a, например
    Имя поля:
    Заложил механизм простого написания плагинов для адаптпции дерева под «запросы» заказчика.




Проголосовать:
+1
Сохранить: