Next Generation CMS :: Форум поддержки
Вы не зашли.
- Темы: Активные | Без ответов
Объявление
#1 2010-09-25 22:11:33
Разворачивающееся меню категорий (грязный хак)
Представим, что у вас много категорий (100, 150, ...) - родительские, дочерние(которые надо сворачивать). Базовое отображение категорий ngcms, как все мы знаем, очень посредственное (в нашем случае список категорий будет длиннее новостей на страницу) и подходит для маленьких сайтов. Плагин "менеджер меню" тоже как-то не очень подходит - все ссылки надо забивать руками (или я что-то не так понял?). Задача стояла сделать сворачивающееся меню, поэтому нами был "разработан" плохой, грязный хак-костыль, речь о котором ниже.
Результат выглядит так:
Как сделать такое же:
1. содержимое приложенного архива (каталог cat_img и файл cat_menu.js) положить в каталог /engine/includes/js/
1.1 в cat_menu.js сменить адрес сайта http://freebtt.net на свой.
2. в каталоге /engine/includes/inc/ редактируем functions.inc.php:
где-то в конце 900-х строк находим функцию function generateCategoryMenu() - ее и будем редактировать.
быдлокод выглядит так:
function generateCategoryMenu()
{
global $mysql, $catz, $tpl, $config, $CurrentHandler, $SYSTEM_FLAGS;
$result = '';
$tpl -> template('categories', tpl_site);
//основной большой цикл
foreach ($catz as $k=>$v)
{
if (!substr($v['flags'],0,1)) continue;
//проход дочерних категорий
foreach ($catz as $k1=>$v1)
{
if($v1['parent'] == $v['id'])
{
//делаем текущую категорию активной(подсвеченной в меню)
if (isset($SYSTEM_FLAGS['news']['currentCategory.id']) && ($v1['id'] == $SYSTEM_FLAGS['news']['currentCategory.id']))
$span=" class=\"active_cat\"";
else $span='';
$temp_child_catz[]="<li><img src='{$config['admin_url']}/includes/js/cat_img/join.gif' alt='join' /><a href='{$config['home_url']}/{$v1['alt']}.html'><span$span>".htmlspecialchars($v1['name'], ENT_QUOTES, 'utf8')."</span></a></li>";
$lastchild_cat = "<li><img src='{$config['admin_url']}/includes/js/cat_img/joinbottom.gif' alt='joinbottom' /><a href='{$config['home_url']}/{$v1['alt']}.html'><span$span>".htmlspecialchars($v1['name'], ENT_QUOTES, 'utf8')."</span></a></li>";
}
}
if($temp_child_catz) $temp_child_catz[count($temp_child_catz)-1] = $lastchild_cat;//если есть массив дочерних - меняем последний элемент
//если родительская категория
if($v['parent']==0)
{
if (isset($SYSTEM_FLAGS['news']['currentCategory.id']) && ($v['id'] == $SYSTEM_FLAGS['news']['currentCategory.id']))
$span=" class=\"active_cat\"";
else $span='';
//если в родителе были дети - выводим начало группы (+)
if (count ($temp_child_catz)>0)
{
$cat_menu[]="<li class='ogroup' style='list-style-type: none;' id='{$v['alt']}'><img src='{$config['admin_url']}/includes/js/cat_img/gpg-minus.gif' alt='minus' onclick='toggleMenuItems(this);' /> <a href='{$config['home_url']}/{$v['alt']}.html'><span$span>".htmlspecialchars($v['name'], ENT_QUOTES, 'utf8')."</span></a>\n<ul><li><span class='cat_line_img'></span>".implode("\n<li><span class='cat_line_img'></span>", $temp_child_catz)."</ul></li>";
$last_cat="<li class='ogroup' style='list-style-type: none;' id='{$v['alt']}'><img src='{$config['admin_url']}/includes/js/cat_img/gpg-minus.gif' alt='minus' onclick='toggleMenuItems(this);' />
{$config['home_url']}/{$v['alt']}.html'><span$span>".htmlspecialchars($v['name'], ENT_QUOTES, 'utf8')."</span></a>\n
<ul><li><span class='cat_blank'></span>".implode("\n<li><span class='cat_blank'></span>", $temp_child_catz)."</ul></li>";
}
//если в родителе не было детей, то без "+"
else
{
$cat_menu[]="<li><img src='{$config['admin_url']}/includes/js/cat_img/join.gif' alt='join' /><a href='{$config['home_url']}/{$v['alt']}.html'><span$span>".htmlspecialchars($v['name'], ENT_QUOTES, 'utf8')."</span></a></li>\n";
$last_cat ="<li><img src='{$config['admin_url']}/includes/js/cat_img/joinbottom.gif' alt='joinbottom' /><a href='{$config['home_url']}/{$v['alt']}.html'><span$span>".htmlspecialchars($v['name'], ENT_QUOTES, 'utf8')."</span></a></li>\n";
}
}
unset ($temp_child_catz);
//********* продолжение ng
$tvars['regx']['[\[icon\](.*)\[/icon\]]'] = trim($v['icon'])?'$1':'';
switch (intval(substr($v['flags'],1,1)))
{
case 0: $rmode = true; break;
case 1: $rmode = ($v['posts'])?true:false; break;
case 2: $rmode = false; break;
}
//$tvars['regx']['#\[if_link\](.+?)\[/if_link\]#is'] = $rmode?'$1':'';
}
if($cat_menu)
$cat_menu[count($cat_menu)-1] = $last_cat;//если есть массив - меняем последний элемент
foreach ($cat_menu as $key=>$value)
{
$tvars['vars']['cat'].=$value;
}
//выводим все сразу
$tpl -> vars('categories', $tvars);
$result .= $tpl -> show('categories');
return $result;
//$tvars['vars']['cat']
}3. т.к. весь вывод мы формируем уже в движке, то categories.tpl вашего шаблона редактируем самым неприличным образом:
{cat}4. в main.tpl вашего шаблона прикручиваем такое:
после
<script type="text/javascript" src="{admin_url}/includes/js/functions.js"></script>
<script type="text/javascript" src="{admin_url}/includes/js/ajax.js"></script>вставляем
<script type="text/javascript" src="{admin_url}/includes/js/cat_menu.js"></script>4.1. блок вывода категорий в main.tpl
<div class="menuTree">
<ul id="superMenu">
{categories}
</ul>
</div>4.2. после блока с категориями вставляем
<script type="text/javascript">superStart();</script>это установит параметры открытости/закрытости категорий
5. в style.css вашего шаблона вставляем
.menuTree UL
{
list-style-type: none;
padding-left: 15px;
padding-top: 3px;
padding-bottom: 3px;
margin: 0px;
white-space: nowrap;
}
.cgroup UL{ display: none; }
.menuTree img{border:0;vertical-align:middle;}
.menuTree span.active_cat {font-weight: bold;}Достоинства этой менюшки: она выдает html-ссылки, а не js; открытые/закрытые категории запоминаются (пользователю выдаются куки).
За сим все. Повторюсь: этот код - вынужденная мера, реализация оставляет желать лучшего. Если у вас есть какие-то мысли, предложения как улучшить/преобразовать все это безобразия - буду очень-очень рад(да и сообщество тоже скажет спасибо).
обновлено 11.12.2010
остается небольшая недоработка - нет линии соединяющей родительские категории. как дойдут руки - выложу исправления.
Изменено nnq11 (2014-07-10 19:19:05)
Не в сети
#3 2010-09-26 00:36:14
Re: Разворачивающееся меню категорий (грязный хак)
Возьмёшься?
с радостью бы так и сделал, если бы была документация до движку, какие переменные(и массивы) откуда тянутся, что с чем работает. а так, увы, приходится угадывать и методом тыка вставлять.
Не в сети
#5 2010-09-27 10:59:33
Re: Разворачивающееся меню категорий (грязный хак)
Недостатком нашего с nnq хака является поддержка только 0-го и 1-го уровня вложенности. Если у кого-то есть предложения по устранению этой проблемы - милости просим отписаться в этой теме.
На счет плагина - покурим маны, попробуем.
Не в сети
#6 2010-09-27 14:23:26
Re: Разворачивающееся меню категорий (грязный хак)
{if_active} не отрабатывает в данном случае, т.е. подкатегория подсвечивается, а сама категория родительская -- нет. В результирующем хтмл так и остается {if_active}. В результате, и категории, в которых нет дочерних, не подсвечиваются тоже.
Изменено lexuv (2010-09-27 14:30:09)
Не в сети
#8 2010-09-27 15:29:34
Re: Разворачивающееся меню категорий (грязный хак)
Neo, запоминается, написали же:
Достоинства этой менюшки: она выдает html-ссылки, а не js; открытые/закрытые категории запоминаются (пользователю выдаются куки).
I ♥ NGeneration CMS
Не в сети
#9 2010-09-27 16:08:39
Re: Разворачивающееся меню категорий (грязный хак)
{if_active} не отрабатывает в данном случае, т.е. подкатегория подсвечивается, а сама категория родительская -- нет. В результирующем хтмл так и остается {if_active}. В результате, и категории, в которых нет дочерних, не подсвечиваются тоже.
да, было дело, недосмотрел. накидал костылей, исправил код.
Не в сети
#11 2010-09-30 02:09:46
Re: Разворачивающееся меню категорий (грязный хак)
nnq11, минусиком не сворачиваются категории, сделал все, как написано. Что я мог не так сделать?
за сворачивание/разворачивание отвечает js-ка. проверьте - полностью ли вы скопировали код, впихнули ли js-ку в нужное вам место.
(умвр: http://freebtt.net/ )
Изменено nnq11 (2010-09-30 02:10:05)
Не в сети
#12 2010-10-08 13:18:30
Re: Разворачивающееся меню категорий (грязный хак)
nnq11, В пошаговке забыли добавить, что надо еще заинклудить эту js-ку в мейне. Но все равно у меня категории не сворачиваются: "+" и "-" переключаются, но категории не сворачиваются и не разворачиваются.
Изменено lexuv (2010-10-10 14:24:33)
Не в сети
#13 2010-11-04 14:25:02
Re: Разворачивающееся меню категорий (грязный хак)
nnq11, В пошаговке забыли добавить, что надо еще заинклудить эту js-ку в мейне. Но все равно у меня категории не сворачиваются: "+" и "-" переключаются, но категории не сворачиваются и не разворачиваются.
смотрим сюда
<div class="menuTree">
<ul id="superMenu">
{categories}
</ul>
</div>и в свой css добавляем это
.menuTree UL
{
list-style-type: none;
padding-left: 15px;
padding-top: 3px;
padding-bottom: 3px;
margin: 0px;
white-space: nowrap;
}
.cgroup UL
{
display: none;
}только вот почему то родительские категории не сворачиваются по-умолчанию (при заходе на сайт все развернуто)
Изменено defis (2010-11-04 15:38:21)
Не в сети
#14 2010-11-08 13:04:40
Re: Разворачивающееся меню категорий (грязный хак)
только вот почему то родительские категории не сворачиваются по-умолчанию (при заходе на сайт все развернуто)
Никто не нашел решение, чтоб категории были свернуты при заходе на сайт?
Изменено unnamed (2010-11-08 13:04:56)
Не в сети
#21 2010-11-11 18:55:25
Re: Разворачивающееся меню категорий (грязный хак)
обновлено еще раз:
1. оптимизирован код.
2. изменен css. теперь текущая категория выделяется жирным.
3. перезалит архив: оптимизирован ява-скрипт(оптимизирована выдача куков в google chrome) и изменена картинка линии соединения.
Не в сети
#22 2010-11-20 14:53:20
Re: Разворачивающееся меню категорий (грязный хак)
Здравствуйте.
У меня 2 вопроса по этому поводу:
1.) 
как сделать чтобы меню начиналось с ГЛАВНАЯ, то что в круге красном не было.
и чтобы меню заканчивалось на последней категории не продолжалось.
как здесь на сайте http://freebtt.net/ 
2.) И собственно второй вопрос.
Можно си сделать так чтобы при заходе на страницу все меню были скручены в не зависимости от того какие были открытии при последним заходе. И как сделать чтобы при отрывании иной ветки все неактивные ветки скручивались автоматически??
Спасибо, может я плохо объяснил, извините))
Не в сети
#23 2010-11-24 21:41:48
Re: Разворачивающееся меню категорий (грязный хак)
1) nnq11 обещал выложить патч. У меня есть, но он вам не подойдет 
2) Можно, только уточните: Вы хотите, чтоб положение категорий открыта/закрыта фиксировалась до обновления страницы или фиксировалась на 1 сессию (до закрытия браузера)?
Изменено panoptus (2010-11-24 21:42:30)
Не в сети
#24 2010-11-25 16:55:42
Re: Разворачивающееся меню категорий (грязный хак)
Относительно первого пункта, большое спасибо, буду ждать 
Что касается второго.
- Мне надо так чтобы посетитель запустил браузер и мою страницу, то были все ветки закрытие. Когда он переходит между страницами сайта то ветки должны бить открытие (тоисть на 1 сессию).
- Когда посетитель разкрыл вторую ветку, то та ветка которая была открыта должна автоматически закрываться.
Не в сети
#25 2010-11-29 11:30:55
Re: Разворачивающееся меню категорий (грязный хак)
- Мне надо так чтобы посетитель запустил браузер и мою страницу, то были все ветки закрытие. Когда он переходит между страницами сайта то ветки должны бить открытие (тоисть на 1 сессию).
Сейчас положение пишется в куки по времени.. Если делать так, как Вы хотите - нужно чтоб данные писались в сессию, а не в куки. Нужно писать AJAX-функцию и небольшой php-бэкенд, который будет это в сессию писать. Кроме того положения нужно с сессий вытягивать... В общем, хлопотно это..
- Когда посетитель разкрыл вторую ветку, то та ветка которая была открыта должна автоматически закрываться.
Представьте себе, что была открыта ветка 1. Посетитель пролистал до ветки 2 и открыл ее. При этом ветка 1 автоматом закрылась, а начало 2-й уехало вверх. Думаю, посетитель будет не шибко доволен такой фиче.
Не в сети