1. Назначение компонента, ссылка для скачивания.

Компонент предназначен для построения связанных выпадающих списков (select'ов). Работает под Joomla 1.5.x.
Название компонента: RelatedSelects_1.0.zip
Ссылка для скачивания: RelatedSelects_1.0.zip
Через администраторскую часть (admin — components — Связанные списки) можно добавлять, редактировать, удалять необходимые списки с указанием их уровня вложенности, также привязывать требуемые ссылки на контент к соответствующим пунктам, добавлять title-описание над списками, строить достаточно сложные, разветвленные связи между списками и контентом.

Важно: максимальное количество связанных списков, которое можно построить с помощью компонента — 4!

2. Используемые технологии

— Joomla cms
— Javascript (AJAX)

3. Версия (откуда взялся, недоработки, поправки в следующих версиях)

Данный компонент появился вследствии конкретного заказа. После некоторой доработки представляю его для общего использования.
Полное описание как по использованию так и по представлению таблиц и связей займет очень много места, поэтому попытаюсь кратко изложить особенности и недоработочки, которые хотелось бы исправить в следующих версиях.
Фронт-часть:
— при загрузке шаблона по умолчанию сразу грузится весь список ссылок (нет вариантов выбора)
— при изменении любого выбора изменяются все «ниже-лежащие» при помощи AJAX (в том числе и ссылки на выбираемый контент)
— не предусмотрен вывод неактивного названия в списке —

<option disabled>

— прочее…
Админ-часть:
— все связи между списками и ссылками прописываются вручную, даже связи «через уровень»
— есть лишние поля, неиспользуемые в данной версии
— ссылки на статьи прописываются вручную
— прочее…

4. Пункты администраторской части

Немного фото.

Пункты компонента:



Раздел для заполнения названий над списками. При введении формы, удалить ее уже нельзя, но можно редактировать это название.



Раздел определения зависимосей как между списками так и между ссылкой и списком.



Этот же раздел при редактировании. Есть лишнее поле типа зависимости (будет использоваться в следующих версиях). Сейчас его можно заполнять для удобства сортировки списка.



Раздел для редактирования списков.



И раздел для редактирования ссылок.



5. Небольшое описание по использованию, разработке своего дерева связей.

Одно фото и примечанию к нему ниже.


Немного примеров построения своих списков и связей.
Сверху вниз:
— пример вывода максимального числа выводимых select'ов
— пример построения списка с одним select'ом и связей ссылок с пунками 11 и 12
— пример построения более сложного списка. Где первая цифра указывает на уровень select'а, вторая уникальный номер в данном уровне.
— показ того, что при построении связей, необходимо указывать связь и с вышележащими уровнями, иначе при их выборе данная ссылка не будет появляться. (в построенном компоненте нет рекурсивной проверки связей уровней для вывода необходимых списков )

Не стал рисовать картинку, скажу на словах:
при помощи компонента можно строить перехлестные связи. На картинке это выглядело бы как пересекающиеся стрелки связей.
Т.е. любой уровень может иметь несколько родительских уровней

6. Вид фронтенда, краткое описание.

Немного фото.


Это был пример простого вывода компонента без файла стилей.

И второй пример, в котором добавили заглавие для второго списка.


7. Структура образуемой разметки (верстки)

<div id="selects_related">
   <div id="selects_all">
   
       <div class="selects_unit">	
          <div class="selects_unit">Заголовок для 1-го списка</div>
	    <div id="status1">
	       <select ...            </select>
	    </div>
       </div>
       <div class="selects_unit">	
          <div class="selects_unit">Заголовок для 2-го списка</div>
	    <div id="status2">
	       <select ...            </select>
	    </div>
       </div>
       <div class="selects_unit">	
          <div class="selects_unit">Заголовок для 3-го списка</div>
	    <div id="status1">
	       <select ...            </select>
	    </div>
       </div>
       <div class="selects_unit">	
          <div class="selects_unit">Заголовок для 4-го списка</div>
	    <div id="status1">
	       <select ...            </select>
	    </div>
       </div>          

   </div>
      
   <div class="clear"></div>
   
   <div id="selects_content">
     <div id="ajaxcontent">
     
        <div class="select_url">
	  <a href="#">Название 1-й ссылки</a>
        </div>
        <div class="select_url">
	  <a href="#">Название 2-й ссылки</a>
        </div>
        <div class="select_url">
	  <a href="#">Название 3-й ссылки</a>
        </div>
	...
	
     </div>
   </div></div></div>

8. Пример стиля, для вывода селектов «в строчку»

Опять же фото, которое уже было в шапке поста.


И пример css-стиля для вывода в одну строку например.

#selects_content{
    margin-top:10px;
    border:#ccc 1px solid;
    padding:10px 0 5px 20px;

}
.selects_title {
   height:40px;   
   width:150px;
   margin:3px;
   padding:3px;
}
.selects_unit{
   margin:5px;
   float:left;
}
.selects_unit select{
   width:150px;
}

Стили необходимо «вручную» вставить в основной css вашего Joomla шаблона.

Пример построения связанных списков можно посмотреть здесь.