Next Generation CMS :: Форум поддержки

Заинтересовала наша система? Тогда этот форум для Вас!

Вы не зашли.

#1 2010-09-25 22:11:33

nnq11
Участник
Зарегистрирован: 2010-03-13
Сообщений: 51
Рейтинг :   

Разворачивающееся меню категорий (грязный хак)

Представим, что у вас много категорий (100, 150, ...) - родительские, дочерние(которые надо сворачивать). Базовое отображение категорий ngcms, как все мы знаем, очень посредственное (в нашем случае список категорий будет длиннее новостей на страницу) и подходит для маленьких сайтов. Плагин "менеджер меню" тоже как-то не очень подходит - все ссылки надо забивать руками (или я что-то не так понял?). Задача стояла сделать сворачивающееся меню, поэтому нами был "разработан" плохой, грязный хак-костыль, речь о котором ниже.
Результат выглядит так:

6bsbtlc9tnyg.png

Как сделать такое же:

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)

Не в сети

#2 2010-09-25 23:53:21

vitaly
Администратор
Откуда Россия
Зарегистрирован: 2008-10-08
Сообщений: 2,823
Рейтинг :   117 

Re: Разворачивающееся меню категорий (грязный хак)

nnq11, а что помешало это оформить в виде обычного плагина?
Получилось бы законченное решение и не потребовалось бы делать хак.

Возьмёшься? smile

Не в сети

#3 2010-09-26 00:36:14

nnq11
Участник
Зарегистрирован: 2010-03-13
Сообщений: 51
Рейтинг :   

Re: Разворачивающееся меню категорий (грязный хак)

vitaly пишет:

Возьмёшься? smile

с радостью бы так и сделал, если бы была документация до движку, какие переменные(и массивы) откуда тянутся, что с чем работает. а так, увы, приходится угадывать и методом тыка вставлять.

Не в сети

#4 2010-09-26 00:59:54

vitaly
Администратор
Откуда Россия
Зарегистрирован: 2008-10-08
Сообщений: 2,823
Рейтинг :   117 

Re: Разворачивающееся меню категорий (грязный хак)

nnq11, вообще в файлах документации (/readme/docs в двиге) и Wiki достаточно информации для написания плагинов. Разве нет?

Не в сети

#5 2010-09-27 10:59:33

panoptus
Участник
Откуда Украина, Николаев
Зарегистрирован: 2009-02-18
Сообщений: 159
Рейтинг :   
Сайт

Re: Разворачивающееся меню категорий (грязный хак)

Недостатком нашего с nnq хака является поддержка только 0-го и 1-го уровня вложенности. Если у кого-то есть предложения по устранению этой проблемы - милости просим отписаться в этой теме.
На счет плагина - покурим маны, попробуем.

Не в сети

#6 2010-09-27 14:23:26

lexuv
Участник
Зарегистрирован: 2010-04-20
Сообщений: 5
Рейтинг :   

Re: Разворачивающееся меню категорий (грязный хак)

{if_active} не отрабатывает в данном случае, т.е. подкатегория подсвечивается, а сама категория родительская -- нет. В результирующем хтмл так и остается {if_active}. В результате, и категории, в которых нет дочерних, не подсвечиваются тоже.

Изменено lexuv (2010-09-27 14:30:09)

Не в сети

#7 2010-09-27 15:23:51

Neo
Участник
Откуда SPB, Russia
Зарегистрирован: 2010-01-04
Сообщений: 463
Рейтинг :   

Re: Разворачивающееся меню категорий (грязный хак)

А состояние меню раскрыто/не раскрыто запоминается в куках или нет?

Не в сети

#8 2010-09-27 15:29:34

Евгений
Модератор
Откуда Россия
Зарегистрирован: 2009-04-08
Сообщений: 1,014
Рейтинг :   38 
Сайт

Re: Разворачивающееся меню категорий (грязный хак)

Neo, запоминается, написали же:

nnq11  пишет:

Достоинства этой менюшки: она выдает html-ссылки, а не js; открытые/закрытые категории запоминаются (пользователю выдаются куки).


I NGeneration CMS

Не в сети

#9 2010-09-27 16:08:39

nnq11
Участник
Зарегистрирован: 2010-03-13
Сообщений: 51
Рейтинг :   

Re: Разворачивающееся меню категорий (грязный хак)

lexuv пишет:

{if_active} не отрабатывает в данном случае, т.е. подкатегория подсвечивается, а сама категория родительская -- нет. В результирующем хтмл так и остается {if_active}. В результате, и категории, в которых нет дочерних, не подсвечиваются тоже.

да, было дело, недосмотрел. накидал костылей, исправил код.

Не в сети

#10 2010-09-28 14:21:30

lexuv
Участник
Зарегистрирован: 2010-04-20
Сообщений: 5
Рейтинг :   

Re: Разворачивающееся меню категорий (грязный хак)

nnq11, минусиком не сворачиваются категории, сделал все, как написано. Что я мог не так сделать?

Изменено lexuv (2010-09-28 14:22:00)

Не в сети

#11 2010-09-30 02:09:46

nnq11
Участник
Зарегистрирован: 2010-03-13
Сообщений: 51
Рейтинг :   

Re: Разворачивающееся меню категорий (грязный хак)

lexuv пишет:

nnq11, минусиком не сворачиваются категории, сделал все, как написано. Что я мог не так сделать?

за сворачивание/разворачивание отвечает js-ка. проверьте - полностью ли вы скопировали код, впихнули ли js-ку в нужное вам место.
(умвр: http://freebtt.net/ )

Изменено nnq11 (2010-09-30 02:10:05)

Не в сети

#12 2010-10-08 13:18:30

lexuv
Участник
Зарегистрирован: 2010-04-20
Сообщений: 5
Рейтинг :   

Re: Разворачивающееся меню категорий (грязный хак)

nnq11,  В пошаговке забыли добавить, что надо еще заинклудить эту js-ку в мейне. Но все равно у меня категории не сворачиваются: "+" и "-" переключаются, но категории не сворачиваются и не разворачиваются.

Изменено lexuv (2010-10-10 14:24:33)

Не в сети

#13 2010-11-04 14:25:02

defis
Участник
Зарегистрирован: 2010-02-28
Сообщений: 104
Рейтинг :   

Re: Разворачивающееся меню категорий (грязный хак)

lexuv пишет:

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

unnamed
Участник
Зарегистрирован: 2010-10-14
Сообщений: 3
Рейтинг :   

Re: Разворачивающееся меню категорий (грязный хак)

defis пишет:

только вот почему то родительские категории не сворачиваются по-умолчанию (при заходе на сайт все развернуто)

Никто не нашел решение, чтоб категории были свернуты при заходе на сайт?

Изменено unnamed (2010-11-08 13:04:56)

Не в сети

#15 2010-11-08 18:38:33

nnq11
Участник
Зарегистрирован: 2010-03-13
Сообщений: 51
Рейтинг :   

Re: Разворачивающееся меню категорий (грязный хак)

прошу прощения за изначально неверное руководство. обновил. теперь точно все работает.

Изменено nnq11 (2010-11-08 18:38:43)

Не в сети

#16 2010-11-08 19:23:28

unnamed
Участник
Зарегистрирован: 2010-10-14
Сообщений: 3
Рейтинг :   

Re: Разворачивающееся меню категорий (грязный хак)

nnq11 пишет:

4.1. вместо

<body>

делаем

<body onload="superStart();">

- это скроет менюшку при первой загрузке

Переделал, все равно развернуты категории при открытии страницы sad

Не в сети

#17 2010-11-08 20:03:14

defis
Участник
Зарегистрирован: 2010-02-28
Сообщений: 104
Рейтинг :   

Re: Разворачивающееся меню категорий (грязный хак)

а у меня свернуты

Не в сети

#18 2010-11-08 23:14:07

nnq11
Участник
Зарегистрирован: 2010-03-13
Сообщений: 51
Рейтинг :   

Re: Разворачивающееся меню категорий (грязный хак)

unnamed,
куки очищали?

Не в сети

#19 2010-11-09 01:30:10

unnamed
Участник
Зарегистрирован: 2010-10-14
Сообщений: 3
Рейтинг :   

Re: Разворачивающееся меню категорий (грязный хак)

Разобрался, все заработало, спасибо.

Не в сети

#20 2010-11-11 16:56:56

nnq11
Участник
Зарегистрирован: 2010-03-13
Сообщений: 51
Рейтинг :   

Re: Разворачивающееся меню категорий (грязный хак)

я и panoptus обновили код:
1. корректно выдаются куки для firefoх 3.6.12.
2. теперь менюшка валидная.

обновил вывод main.tpl.

Изменено nnq11 (2010-11-11 17:02:43)

Не в сети

#21 2010-11-11 18:55:25

nnq11
Участник
Зарегистрирован: 2010-03-13
Сообщений: 51
Рейтинг :   

Re: Разворачивающееся меню категорий (грязный хак)

обновлено еще раз:
1. оптимизирован код.
2. изменен css. теперь текущая категория выделяется жирным.
3. перезалит архив: оптимизирован ява-скрипт(оптимизирована выдача куков в google chrome) и изменена картинка линии соединения.

Не в сети

#22 2010-11-20 14:53:20

Slavik
Участник
Зарегистрирован: 2010-11-13
Сообщений: 61
Рейтинг :   

Re: Разворачивающееся меню категорий (грязный хак)

Здравствуйте.
У меня 2 вопроса по этому поводу:
1.)
up.jpg  как сделать чтобы меню начиналось с ГЛАВНАЯ, то что в круге красном не было.
down.jpg и чтобы меню заканчивалось на последней категории не продолжалось.

как здесь на сайте http://freebtt.net/ 123.jpg

2.) И собственно второй вопрос.
Можно си сделать так чтобы при заходе на страницу все меню были скручены в не зависимости от того какие были открытии при последним заходе. И  как сделать чтобы при отрывании иной ветки все неактивные ветки скручивались автоматически??

Спасибо, может я плохо объяснил, извините))

Не в сети

#23 2010-11-24 21:41:48

panoptus
Участник
Откуда Украина, Николаев
Зарегистрирован: 2009-02-18
Сообщений: 159
Рейтинг :   
Сайт

Re: Разворачивающееся меню категорий (грязный хак)

1) nnq11 обещал выложить патч. У меня есть, но он вам не подойдет tongue
2) Можно, только уточните: Вы хотите, чтоб положение категорий открыта/закрыта фиксировалась до обновления страницы или фиксировалась на 1 сессию (до закрытия браузера)?

Изменено panoptus (2010-11-24 21:42:30)

Не в сети

#24 2010-11-25 16:55:42

Slavik
Участник
Зарегистрирован: 2010-11-13
Сообщений: 61
Рейтинг :   

Re: Разворачивающееся меню категорий (грязный хак)

Относительно первого пункта, большое спасибо, буду ждать smile

Что касается второго.
- Мне надо так чтобы посетитель запустил браузер и мою страницу, то были все ветки закрытие. Когда он переходит между страницами сайта то ветки должны бить открытие (тоисть на 1 сессию).
- Когда посетитель разкрыл вторую ветку, то та ветка которая была открыта должна автоматически закрываться.

Не в сети

#25 2010-11-29 11:30:55

panoptus
Участник
Откуда Украина, Николаев
Зарегистрирован: 2009-02-18
Сообщений: 159
Рейтинг :   
Сайт

Re: Разворачивающееся меню категорий (грязный хак)

Slavik пишет:

- Мне надо так чтобы посетитель запустил браузер и мою страницу, то были все ветки закрытие. Когда он переходит между страницами сайта то ветки должны бить открытие (тоисть на 1 сессию).

Сейчас положение пишется в куки по времени.. Если делать так, как Вы хотите - нужно чтоб данные писались в сессию, а не в куки. Нужно писать AJAX-функцию и небольшой php-бэкенд, который будет это в сессию писать. Кроме того положения нужно с сессий вытягивать... В общем, хлопотно это..

Slavik пишет:

- Когда посетитель разкрыл вторую ветку, то та ветка которая была открыта должна автоматически закрываться.

Представьте себе, что была открыта ветка 1. Посетитель пролистал до ветки 2 и открыл ее. При этом ветка 1 автоматом закрылась, а начало 2-й уехало вверх. Думаю, посетитель будет не шибко доволен такой фиче.

Не в сети

Подвал раздела

Работает на FluxBB