Раскрываемое дерево категорий топиков

В плагин Category добавил для удобства пользования скрипт раскрываемого дерева.
Для доработки использовал JQuery плагин TreeView — простой и не требующий особых усилий по внедрению.

И так, для тех кто захочет его использовать , на примере шаблоне new-jquery:




1. Из всего того что находится в файле-архиве jquery.TreeView потребуются:
  • jquery.treeview.css
  • jquery.treeview.js
  • папка image c картинками

Поместим их в папку js шаблона new-jquery, т.е. в plugins\category\templates\skin\new-jquery\js

2. Вносим изменения в шаблоны блоков block.category.tpl и block.categoryadmin.tpl
<div class="block category">
    <script type="text/javascript" src="{$sTemplateCategoryWebPathPlugin}/js/jquery.treeview.js"></script>
    <link href="{$sTemplateCategoryWebPathPlugin}/js/jquery.treeview.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
        $(function() {
            $("#tree").treeview({
        	collapsed: false,
		animated: "fast",
		control:"#sidetreecontrol",
		prerendered: false,
		persist: "location"
	    });
	})
    </script>
    <h1>{$aLang.cat_title}</h1>

    <div class="block-content" id="block-category">
	<div id="sidetreecontrol"> <a href="?#">Свернуть все</a> | <a href="?#">Развернуть все</a> | <a href="?#">Инверсия</a></div>
	    {include file="$sTemplatePathPlugin/block.category_toggle.tpl"}

	</div>
</div>
где tree id контейнера нашего дерева, collapsed: false — развернутый вид, prerendered: false — дерево заранее «не прорисовано» и будет строиться на основании содержимого.

3. Изменим содержимое шаблона block.category_toggle.tpl:
{if $oUserCurrent and $oUserCurrent->isAdministrator()}{assign var="isAdm" value=1}{/if}
<ul class="list treeview-gray" id="tree">
    {if $aCategory}
        {foreach from=$aCategory item=oCategory name=cat}
            {include file="$sTemplatePathPlugin/block.cat_row.tpl"}
        {/foreach}
    {/if}
</ul>
(Здесь используем серую тему treeview-gray)

и шаблон block.cat_row.tpl:
<li class="{if $sEvent==$oCategory->getUrl()}selected{/if}">
    <a {if $sAdmin}href="#" onclick="ls.category.edit('{$oCategory->getId()}','{$oCategory->getParentId()}','{$oCategory->getTitle()}','{$oCategory->getUrl()}');return false;"{else}href="{$oCategory->getCategoryUrl()}"{/if}>
	{$oCategory->getTitle()|escape:'html'}
	<sup>[ {$oCategory->getCountTarget()} ]</sup>
    </a>
    {if $sAdmin} <a href="#" onclick="ls.category.del('{$oCategory->getId()}','{$sTypeCategory}');return false; " style="color: red;">×</a>{/if}

    {if $oCategory->getSubCategory()}
    <ul>
	{assign var="oCategorySub" value=$oCategory->getSubCategory()}
	{foreach from=$oCategorySub item=oCategory name=cat}
            {include file="$sTemplatePathPlugin/block.cat_row.tpl"}
	{/foreach}
    </ul>
    {/if}
</li>
т.е. просто строим многоуровневый список.

4. Ну и напоследок приведем в порядок стили нашего дерева, для чего внесем дополнения в файл style.css, расположенный в plugins\category\templates\skin\new-jquery\css:
.block.category ul.list { border-top: 1px solid #eee; margin-top: 5px;}
.block.category ul.list li {overflow: hidden; zoom: 1; }
.block.category ul.list li a {color: #777;  padding: 3px 3px 3px 3px; text-decoration: none; }
.block.category ul.list li a:hover { color: #FC6C0D; }

.treeview .hitarea  {margin-top: 2px;}
.treeview li { padding-bottom: 0px; padding-top: 0px;}
.treeview a.selected {font-weight: bold; background: #eee}


Посмотреть можно здесь

14 комментариев

avatar
только +, но все это можно было сделать без подключения сторонних js библиотек
avatar
Можно конечно, но цель была: быстро и просто.
avatar
Все здорово, а как отображаются блоги(к какой категории относятся)и было бы интересно еще добавить к обычному функционалу количество блогов в категории
avatar
Все выше описанное никакого отношения к функционалу не имеет, только «украшательство». Функционал как есть в плагине.
avatar
Спасибо преогромное, жаль плюсануть не могу, сила не та.
avatar
А как такое сделать для LiveStreet 1.0.1?
avatar
По аналогии с выше описанным. Файлы шаблонов для 1.0.х не сильно изменились.
avatar
Да попытался, а Смарти начал ругаться. Думал может есть гайд. Спасибо
avatar
А возможно ли сделать такое же дерево при добавления топика? Ну т.е. Когда вы выбираете в какой топик публиковать, сделать блоги выпадающим списком, возможно ли это?
avatar
Конечно возможно! Реализация человеческого воображения ограничена возможностями программной составляющей.
Ну если серьезно, то в планах для себя «облагородить» это дело.
avatar
SmartyException при попытке воспроизвести. Идеи?
avatar
Версия LS?
Все что выше — для 0.5.1.
avatar
1-0-3
avatar
И нет ли рабочего используемого пакета архивчиком? был бы признателен.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.