Сворачивание категорий на форуме при помощи JavaScript, с запоминанием в браузере. В примере используются только стандартные и чистые шаблоны prosilver и subsilver.

Prosilver

Скачиваем архив, закачиваем файлы к себе на форум.
folding-categories-prosilver.rar
37.61 КБ 393 скачивания
Открываем overall_header.html, перед закрывающим тегом </head> ставим:

Код: Выделить всё

<script type="text/javascript" src="ваш сайт/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="ваш сайт/jquery.cookie.js"></script>
<script type="text/javascript" src="ваш сайт/jquery.collapse.js"></script>
Сворачивание категорий для prosilver'a используется на jQuery, поэтому если у вас уже подключена её библиотека, то:

Код: Выделить всё

<script type="text/javascript" src=" ваш сайт /jquery-1.7.1.min.js"></script>
можно не ставить.
Так же не забудьте указать пути до скриптов.

Далее открываем forumlist_body.html, в самое начало шаблона ставим:

Код: Выделить всё

<div class="forumlist">
Чуть ниже, находим:

Код: Выделить всё

	<!-- IF (forumrow.S_IS_CAT and not forumrow.S_FIRST_ROW) or forumrow.S_NO_CAT  -->
			</ul>

			<span class="corners-bottom"><span></span></span></div>
		</div>
	<!-- ENDIF -->
Меняем на:

Код: Выделить всё

	<!-- IF (forumrow.S_IS_CAT and not forumrow.S_FIRST_ROW) or forumrow.S_NO_CAT  -->
			</ul>

			</div>
			<span class="corners-bottom"><span></span></span></div>
		</div>
	<!-- ENDIF -->
Т.е. добавляем после </ul> тег </div>.

Далее находим:

Код: Выделить всё

			<ul class="topiclist forums">
	<!-- ENDIF -->
Перед найденным ставим:

Код: Выделить всё

	<!-- IF SCRIPT_NAME eq 'index' --><div class="trigger active"></div><!-- ENDIF -->
	<div class="collapsethis">
В самый конец шаблона ставим:

Код: Выделить всё

</div>

<script type="text/javascript">
// <![CDATA[
                $(".forumlist").collapse({show: function(){
                        this.animate({
                            opacity: 'toggle',
                            height: 'toggle'
                        }, 300);
                    },
                    hide : function() {
                        this.animate({
                            opacity: 'toggle',
                            height: 'toggle'
                        }, 300);
                    }
                });
// ]]>
</script>
Открываем тему вашего стиля, в конец добавляем:

Код: Выделить всё

/* Folding Categories */
.trigger {
	background: url("ваш сайт/images/trigger.png") no-repeat;
	width: 19px;
	height: 20px;
	cursor: pointer;
	float: right;
	position: relative;
	z-index: 9998;
	margin-top: -22px;
	margin-right: 5px;
}
.active {background-position: right top;}
.inactive {background-position: left bottom;}

Пользуемся.



Subsilver2

Скачиваем архив, закачиваем файлы к себе на форум.
folding-categories-subsilver2.rar
1.78 КБ 363 скачивания
Открываем overall_header.html, перед закрывающим тегом </head> ставим:

Код: Выделить всё

<script type="text/javascript" src="ваш сайт/scripts.js"></script>
Далее открываем forumlist_body.html, находим:

Код: Выделить всё

<!-- BEGIN forumrow -->
	<!-- IF forumrow.S_IS_CAT -->
		<tr>
			<td class="cat" colspan="2"><h4><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a></h4></td>
			<td class="catdiv" colspan="3">&nbsp;</td>
		</tr>
	<!-- ELSEIF forumrow.S_IS_LINK -->
Меняем на:

Код: Выделить всё

<!-- BEGIN forumrow -->
	<!-- IF forumrow.S_IS_CAT -->
	<tbody id="f_{forumrow.FORUM_ID}_h" style="display: none;">
		<tr>
			<td class="cat" colspan="2"><h4><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a></h4></td>
			<td class="catdiv" colspan="3"><img style="padding-top: 9px; padding-right: 6px; float: right; cursor: pointer;" src="ваш сайт/icon_maximize.gif" onclick="ShowHide('f_{forumrow.FORUM_ID}', 'f_{forumrow.FORUM_ID}_h', 'f_{forumrow.FORUM_ID}');" alt="{L_FORUM}" /></td>
		</tr>
	</tbody>
	<tbody id="f_{forumrow.FORUM_ID}">
<script type="text/javascript">
<!--
tmp = 'f_{forumrow.FORUM_ID}';
if(GetCookie(tmp) == '2')
{
	ShowHide('f_{forumrow.FORUM_ID}', 'f_{forumrow.FORUM_ID}_h', 'f_{forumrow.FORUM_ID}');
}
//-->
</script>
		<tr>
			<td class="cat" colspan="2"><h4><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a></h4></td>
			<td class="catdiv" colspan="3"><img style="padding-top: 9px; padding-right: 6px; float: right; cursor: pointer;" src="ваш сайт/icon_minimize.gif" onclick="ShowHide('f_{forumrow.FORUM_ID}', 'f_{forumrow.FORUM_ID}_h', 'f_{forumrow.FORUM_ID}');" alt="{L_FORUM}" /></td>
		</tr>
	<!-- ELSEIF forumrow.S_IS_LINK -->
Находим:

Код: Выделить всё

<!-- BEGINELSE -->
Перед найденным ставим:

Код: Выделить всё

	<!-- IF forumrow.S_LAST_ROW -->
		</tbody>
	<!-- ENDIF -->

Не забудьте указать пути к кнопкам и скрипту.

Если вы всё сделали правильно, то у вас появится возможность сворачивать категории форумов.
Комментарии: 14

GoDFaTHeR 09 янв 2013, 21:15 Сообщение

Вот это супер!!!
с вашего позволения утащу :)

Есть еще модификация перемещения категорий с записью в куки
и категории как вкладки
  • 0
На этом сервисе можно cоздать форум бесплатно
Домены для форума ТУТ

Bukovka_ 10 янв 2013, 01:13 Сообщение

Вау, когда-то искала подобную функцию для своего форума, но так и не нашла. Супер! :Bravo:
  • 0

CabinetAdmin 10 янв 2013, 19:27 Сообщение

GoDFaTHeR писал(а):Есть еще модификация перемещения категорий с записью в куки
и категории как вкладки
Покумекаю над этим, насчёт subsilver'a не обещаю, попробую конечно.
А над тем как вкладки не понял? На подобие как разделы в админке сделаны?
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

GoDFaTHeR 11 янв 2013, 00:59 Сообщение

CabinetAdmin писал(а):А над тем как вкладки не понял? На подобие как разделы в админке сделаны?
именно

Перенос категорий реализован на стиле supernova
  • 0
На этом сервисе можно cоздать форум бесплатно
Домены для форума ТУТ

southklad 22 янв 2013, 21:18 Сообщение

А кто скажет, а как это прикрепить к чату . Чат вставлен на главной сайт вот таким образом

Код: Выделить всё

<iframe src="/forum/chat/index.php" width="100%" height="250"></iframe>
, а как его можно сделать тоже сворачивающимся ???
  • 0
Изображение

CabinetAdmin 23 янв 2013, 14:31 Сообщение

igorbond писал(а):его можно сделать тоже сворачивающимся ???
Не проверял, но скорее всего как-то так:

Код: Выделить всё

<table class="tablebg" cellspacing="1" width="100%">
   <tbody id="f_{forumrow.FORUM_ID}_h" style="display: none;">
      <tr>
         <td class="cat" width="80%"><h4>{L_CHAT}</h4></td>
         <td class="catdiv"><img style="padding-top: 9px; padding-right: 6px; float: right; cursor: pointer;" src="ваш сайт/icon_maximize.gif" onclick="ShowHide('f_{forumrow.FORUM_ID}', 'f_{forumrow.FORUM_ID}_h', 'f_{forumrow.FORUM_ID}');" alt="{L_FORUM}" /></td>
      </tr>
   </tbody>
   <tbody id="f_{forumrow.FORUM_ID}">
<script type="text/javascript">
<!--
tmp = 'f_{forumrow.FORUM_ID}';
if(GetCookie(tmp) == '2')
{
   ShowHide('f_{forumrow.FORUM_ID}', 'f_{forumrow.FORUM_ID}_h', 'f_{forumrow.FORUM_ID}');
}
//-->
</script>
      <tr>
         <td class="cat" width="80%"><h4>{L_CHAT}</h4></td>
         <td class="catdiv"><img style="padding-top: 9px; padding-right: 6px; float: right; cursor: pointer;" src="ваш сайт/icon_minimize.gif" onclick="ShowHide('f_{forumrow.FORUM_ID}', 'f_{forumrow.FORUM_ID}_h', 'f_{forumrow.FORUM_ID}');" alt="{L_FORUM}" /></td>
      </tr>
      <tr>
         <td class="row1" colspan="2"><iframe src="/forum/chat/index.php" width="100%" height="250"></iframe></td>
      </tr>
   </tbody>
</table>
В зависимости от того где именно установлен чат, может быть <table ...> и </table> не нужны...
Если нет переменной {L_CHAT}, напишите просто - Чат.
Если есть чат на отдельной странице, то можно оформить в виде ссылки:

Код: Выделить всё

<a href="ссылка на страницу">{L_CHAT}</a>
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Mustache 01 апр 2015, 12:05 Сообщение

Уважаемые , а вложений нет !!! перизалейте )))
  • 0

silver073000Василий 13 апр 2015, 01:53 Сообщение

После установки сортировки категорий сворачивание отказало :milo:
  • 0

CabinetAdmin 13 апр 2015, 15:48 Сообщение

В инструкции в forumlist_body.html ставится скрипт, здесь его надо ставить не в этот шаблон, а в футер в самый конец, после:

Код: Выделить всё

<!-- EVENT overall_footer_body_after -->
Из скриптов, раз уж стоит сортировка, то хватит одного jquery.collapse.js и стоять он должен после сортировки:

Код: Выделить всё

<!-- INCLUDEJS jquery.collapse.js -->
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

silver073000Василий 17 апр 2015, 01:03 Сообщение

Вот таким способов всё отлично завелось и работает :) Благодарю за подсказки :drink:
  • 0

Степ 17 янв 2016, 09:17 Сообщение

Еще вопрос про сворачивание спойлером.
Есть код карты со спутника. Хочу поставить под шапку, но что бы сворачивалась она. Т. к. она большая, как ее обернуть в спойлер? И что б по умолчанию она была свернута (я поставил размер 800Х200) . Кому надо открыл, пошастал и закрыл.
Спасибо.
Вот код карты [hide]<iframe src="http://wikimapia.org/#lat=56.424514&lon ... &ifr=1&m=b" width="322" height="322" frameborder="0"></iframe>[/hide]
  • 0
Если хотите узнать глубину души человека, то плюньте ему в душу и считайте до тех пор,
пока не получите по морде.

CabinetAdmin 17 янв 2016, 09:42 Сообщение

По аналогии с чатом можно сделать, несколькими постами выше.

Примерно так:

Код: Выделить всё

<div id="m_1_h">
	<div>
		<div class="c-h-l"><div class="c-h-r"><div class="c-h-c"><img style="padding-top:13px;padding-right:8px;float:left;cursor:pointer;" src="{T_THEME_PATH}/images/maximize.png" onclick="javascript:ShowHide('m_1','m_1_h','m_1');" alt="maximize"><div class="c-h-title"><h4> Заголовок </h4></div></div></div></div>
		<div class="c-f-l"><div class="c-f-r"><div class="c-f-c-2"></div></div></div>
	</div>
	<br /><br />
</div>
<div id="m_1" style="display:none;">
	<script type="text/javascript">
	<!--
	tmp = 'm_1';
	if(GetCookie(tmp) == '2')
	{
		ShowHide('m_1', 'm_1_h', 'm_1');
	}
	//-->
	</script>
	<div>
		<div class="c-h-l"><div class="c-h-r"><div class="c-h-c"><img style="padding-top:13px;padding-right:8px;float:left;cursor:pointer;" src="{T_THEME_PATH}/images/minimize.png" onclick="javascript:ShowHide('m_1','m_1_h',m_1');" alt="minimize"><div class="c-h-title"><h4> Заголовок </h4></div></div></div></div>
		<table class="tablebg" cellspacing="0" width="100%">
			<tr>
				<td class="row1">
					<!-- Карта -->
				</td>
			</tr>
		</table>
		<div class="c-f-l"><div class="c-f-r"><div class="c-f-c">&nbsp;</div></div></div>
	</div>
	<br /><br />
</div>
Это на вскидку...
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Степ 17 янв 2016, 12:12 Сообщение

Спасибо! Встало как надо. Но вот свертаться... в смысле сворачиваться обратно не хочет.
CabinetAdmin писал(а): В инструкции в forumlist_body.html ставится скрипт, здесь его надо ставить не в этот шаблон, а в футер в самый конец, после:
КОД: ВЫДЕЛИТЬ ВСЁ

<!-- EVENT overall_footer_body_after -->


Из скриптов, раз уж стоит сортировка, то хватит одного jquery.collapse.js и стоять он должен после сортировки:
КОД: ВЫДЕЛИТЬ ВСЁ

<!-- INCLUDEJS jquery.collapse.js -->
А тут я не понял, если честно. :pardon:

И еще - как то от приветственной строки отлипнуть ее можно? А проще говоря отступ сверху небольшой сделать.
  • 0
Если хотите узнать глубину души человека, то плюньте ему в душу и считайте до тех пор,
пока не получите по морде.

CabinetAdmin 17 янв 2016, 20:33 Сообщение

Можно добавить <br /><br /> после первого дива <div id="m_1_h">.
Степ писал(а): Но вот свертаться...
Ой, пропустил одну кавычку вот тут:

Код: Выделить всё

<img style="padding-top:13px;padding-right:8px;float:left;cursor:pointer;" src="{T_THEME_PATH}/images/minimize.png" onclick="javascript:ShowHide('m_1','m_1_h',m_1');" alt="minimize">
перед m_1, вот так должно быть:

Код: Выделить всё

<img style="padding-top:13px;padding-right:8px;float:left;cursor:pointer;" src="{T_THEME_PATH}/images/minimize.png" onclick="javascript:ShowHide('m_1','m_1_h','m_1');" alt="minimize">
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Похожие темы