rdTree 0.8.2 Download

Описание

• Плагин реализует динамическое дерево. Стуктура дерева задается в виде неупорядоченных списоков <ul> <li>. Пример:

  <div class="rdTreeFirebug">
      <ul id="tree">
          <li>Рвздел 1. 
              <ul class="opened">
                  <li><a href="http://google.com/" target="_blank">Раздел 1.1. Google</a></li>
                  <li>Рвздел 1.2.
                      <ul>
                          <li>Раздел 1.2.1.</li>
                      </ul>
                  </li>
              </ul>
          </li>
          <li><a class="selected">Раздел 2.</a></li>
      </ul>
  </div>

• Конструкция

  <ul class="opened">

  при построении дерева "разворачивает" отмеченный раздел.
• Если вы хотите "привязать обработчик к одному из разделов" заключите его т тег <a> как это показано в "Раздел 1.1. Google"
• Для того чтоб один из разделов был уже выбран при построении дерева используйте конструкцию

  <a class="selected">Имя раздела</a>

  как это сделано для "Раздел 2."
• Дерево обязательно нужно поместить в контейнер

  <div class="rdTreeFirebug"></div>

  Это нужно для того, чтоб можно было задавать "окно" для вывода дерева.
• Другие возможности класса можно посмотреть изучив код примера

Плагины к rdTree

• На основе движка заложенного в классе rdTree можно написать свой вариант представления дерева, для этого немного подредактируйте файл rdTree.css, предварительно его переименовав, например в rdTreeMySkin.css
• Сделайте контекствую замену в файле rdTreeMySkin.css ключевого слова rdTreeFirebug на rdTreeMySkin (например), теперь для того чтоб дерево выводилось в виде вашего скина, поменняйте название класса в контейнере <div class="rdTreeFirebug"></div> на ваше (например rdTreeMySkin)
• Вы также можете поменять иконки для своего дерева, это реализуется с помощью передачи параметров класу rdTree, который строит дерево, пример:

  <script>
  	var myCommandTree = new rdTree('commandTree', {
  		img: {
  			path: 'img/rdTree/firebug/',
  			itemName: 'item.gif',
  			plusName: 'plus.gif', 
  			minusName: 'minus.gif'
  		},
  		classes: {
  			selected: 'selected',
  			opened: 'opened',
  			first: 'first',
  			last: 'last',
  			center: 'center',
  			centerNode: 'centerNode',
  			lastNode: 'lastNode'
  		}
  	});
  </script>

  Я предполагаю, что из названия параметра понятно за что он отвечает, поэтому расписывать подробно не вижу смысла.
• Хочу обратить Ваше внимание на то, что MooTools 1.2 предоставляет очень простую и понятную модель работы с классами, поэтому программисту, знающему этот фреймворк, не составит труда расширить функционал базового класса rdTree и таким образом адаптировать под его свои нужды.

Модификации rdTree

Эсли вы сделали полезные дорабтки к rdTree и вам не жалко поделиться этими доработками с общественностью, свяжитесь со мной и ссылка на Ваш код появится в этом разделе.

• Поддержка динамической загрузки веток от Александра Бекбулатова

История изменений

• Версия 0.8.2 - 24/09/2009

  Багфикс:

  • Проблема с отображением последней ветки с заданым классом 'selected'. Спасибо Антонe Литвину.

  Версия 0.8.1 - 05/08/2008

  Новые возможности:

  • добавлена еще одна опция 'openSelectedNode'. Если она установлена в true, то выбранный раздел разворачивается автоматически. По умолчанию принимает значение true. Спасибо за идею andrei202

• Версия 0.8 - 27/07/2008

  Первый публичный релиз RIA DHTML Tree (версии 0.1 - 0.7 небыли представлены в сети)

Установка

1. Распакуйте архив. Для работы необходим:

   css/rdTree.css	файл css-настроек
   js/mootools-1.2-core-yc.js	ядро фреймворк-а mootools 1.2 (можно использовать mootools-1.2-core-nc.js в режиме отладки)
   js/rdTree.js	сам класс rdTree
   img/rdTree/firebug/*	иконки к плагину по умолчанию, иконки похожи на те которые использует firebug

2. В заголовке Вашей страницы поместите строчки:

   <link href="css/rdTree.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript" src="js/mootools-1.2-core-yc.js"></script>
   <script type="text/javascript" src="js/rdTree.js"></script>
   

3. В тексте после того как задана структура дерева включаем код rdTree:

   <script>
   	var myTree = new rdTree('tree');
   </script>
   

Пример

Здесь вы можете посмотреть пример rdTee