rdTree — DHTML-дерево на MooTools
Раздел:
Programming /
Ajax
@
30.07.2008 |
Ключевые слова: MooTools дерево dhtml
Автор: apelsyn
Источник: habrahabr
Многим разработчикам рано или поздно приходилось иметь дело с древовидным списком, который нужно включить в проект и представить пользователю в удобном дизайне.
Это может быть help, справочная информация, быстрая навигация по админ-панели, древовидное меню и т.д. Пользователю такая организация навигации понятна, так как она реализивана во всех операционных системах.
Поиск хороших решений неприменно приводил к красиво оформленным и хорошо документированыи коммерческим библиотекам, например Zapatec Tree. За unlimited версию там просит 799$.
Дорого! Будем поддерживать разработчиков свободного ПО и искать хорошо написанное дерево на JavaScript.
Составим список интересных бесплатных решений (без всяких там "unlimited with link back") и проанализируем функционал.
Toolbox - DHTML Tree
Ссылка глючит из-за `script`: http://www.mattkruse.com/javascript/mktree/
Классический пример, копирайты к скрипту больше чем сам скрипт. Включил в обзор, так как скрипт учит базовым правилам построения дерева. С дизайном у него не очень, но для поисковиков дерево построено грамотно.
|
|
|
Простая реализация дерева. Главное достоинство - компактность и простота. Дерево задается в принятом для такого рода программ виде.
|
|
Destroydrop Javascripts Tree
Ссылка глючит из-за `script`: http://destroydrop.com/javascripts/tree/
Не использует фреймворк-и, написано 5 лет назад, аккуратное и компактное дерево. Есть документация и примеры. Из минусов: чистый JavaScript - проблемы с индексацией, не развивается с 2003 года. Модификацию этого скрипта встречал в некоторых коммерческих CMS.
|
|
|
Функционал схожий с Destroydrop Tree, но есть существенное отличие - дерево задается уже в понятной для индексации форме. Скрипт "легкий" и не использует фреймворков.
|
|
|
Немного примитивное, но здесь ставка на простоту и минимализм в коде (без учета кода самого фреймворка). При скролинге в Explorer-е заметны глюки. Текс дерева задается в хорошем для индексации виде.
|
|
|
Хорошая реализация, хороший функционал. Текст дерева задается в хорошем для индексации виде. Есть скины, плавное разворачивание веток. Есть документация. Пользователям jQuery, я думаю, ничего лучшего для работы с деревьями не найти.
|
|
|
Отличная реализация дерева. Drag`n`drop, ajax, даже шаблон фотоальбома. Дерево "тяжеловато" по объему кода, нету переноса длинных строк. Отличная документация.
|
|
|
Хорошая реализация дерева. Есть drag`n`drop, хорошая документация. Пожалуй, самый богатый функционал из перечисленных реализаций дерева. Есть только один недостаток - дерево задается в JavaScript в формате JSON, следовательно, с индексацией такого дерева будут проблемы. В дереве не реализованы переносы строчек. Идеальное решение для использования в админ-панели.
|
|
|
Собственно это моя реализация дерева. Не корректно будет оценивать ее мне, поэтому напишу только то, что я реализовал:
- Дерево задается в классическом виде с помощью списков ul li. Это важно для нормальной индексации поисковиками.
- Если в ветке длинный текст, то реализован механизм переноса строчек. (Пришлось потратить значительную часть времени, чтоб это заработало во всех популярных браузерах)
- Дерево реализизует, на мой взгляд, самую необходимую базовую функциональность, и поэтому является компактным.
- В узел дерева можно вставить любой html, заключенный в тег a, например
<a>Имя поля: <input type="text" name="name"></a>
- Заложил механизм простого написания плагинов для адаптпции дерева под "запросы" заказчика.
Пример работы RIA DHTML Tree.
|
|
Я не хотел бы тратить Ваше время и описывать подробности того, как надо пользоваться скриптом, все это вы сможете найти на страничке rdTree. К сожалению, скрипт не автономный, и требует для работы MooTools 1.2.
Буду признателен разработчикам, которые предложат свой вариант дизайна дерева, обещаю выложить Ваш вариант на страничку проекта с указанием автора.
Это интересно:
 Распечатать статью
Вернуться в раздел:
Programming /
Ajax
Реклама:
|
