Печать
Просмотров: 16935

Изменение схемы отображения категорий на главной странице для лучшего восприятия структуры форума пользователем - категории будут отображаться на закладках.

На большинстве конференций создана довольно разветвленная система категорий, форумов и подфорумов. Всем нам понятно, что подобная структуризация просто необходима, но что делать, если количество отображаемых на главной странице категорий слишком велико для восприятия?
Вот об этом и хотелось поговорить.

У одного из посетителей форума phpBBGuru возникла идея, замечательная, надо отметить, идея, что категории можно расположить не только вертикально, но и организовать горизонтальное их представление. При этом длина страницы заметно сокращается, а сами категории становятся логически обособленными, что значительно улучшает читаемость всей структуры.

На первый взгляд задача кажется довольно сложной. Но давайте подумаем, ведь мы уже видели что-то подобное в стиле Prosilver. Вспомнили? Да, я про те самые вкладки, которые можно наблюдать при размещении сообщения (с формой загрузки вложений, например). Можно приспособить именно их для реализации нашей задумки.

 

Как оно работает.

 

Вся интерактивность реализована благодаря функции subPanels, которая расположена в файле template\forum_fn.js. Она принимает в качестве параметра идентификатор вкладки, которую надо активировать. Причем стиль будет изменён как для самой вкладки, так и для привязанного к ней контейнера, для этого надо всего ничего: создать контейнер с именем id и вкладку id-cat, где id — название. Но тут есть один важный момент: вкладки надо не только «включать», но и «выключать» уже неактивные. Специально для этого в функции реализована обработка массива panels, заполнением которого должны заниматься мы, а сам массив может быть объявлен в теле html-страницы.

 

Попробуем?

 

С теорией вроде разобрались, самое время переходить к практике.
Все что от нас требуется — так это написать одну JS-функцию, да вызывать её в правильном месте. Разместить наш скрипт можно в двух местах: в файле overall_header.html или в файле index_body.html. В первом было бы логичнее, ведь именно там, в блоке head, объявляется весь базовый функционал, но при этом возможна маленькая проблема: массив panels, который мы собрались объявлять, на страницах, с наличием стандартных вкладок, будет объявлен дважды. Современные браузеры не примут это за ошибку, но иметь в виду данный момент надо.

Откроем файл index_body.html. В нём нужна строка

<!-- INCLUDE forumlist_body.html -->
вокруг которой, в прямом смысле слова, мы и будем колдовать.
Для начала добавим перед этой строчкой следующий код:
<script type="text/javascript">
	// <![CDATA[
	var panels = new Array();
	function addcattab(id, text)
	{
		var ccc = document.getElementById('categories');
		var tab_id = id + '-tab';
		var _li = document.createElement('li');
		_li.id = tab_id;
		_li.innerHTML = '<a href="' + "#tabs" + '" onclick="' + "subPanels('" + id + "'); createCookie('IndexCatId', '" + is_in_array(id, panels) + "'); return false;" + '"><span>' + text + "</span></a>";
		ccc.appendChild(_li);
	}
	// ]]>
</script>
<div id="tabs">
	<ul id="categories"></ul>
</div>
Здесь мы, во-первых, объявляем массив, который будет использоваться для перечисления вкладок, а во-вторых — описываем функцию, добавляющую новую вкладку для каждой категории. Код этой функции довольно прост: в нём создается html-элемент li, с содержимым в виде ссылки, и добавляется в качестве дочернего к нижеследующему списку (ul). Стоит заметить, что в коде динамически создаваемой ссылки мы как раз используем вызов функции subPanels. Также вызывается функция сохранения индекса, о которой я расскажу ниже.
Далее идут элементы, которые и будут содержать в себе наши вкладки.

Для большего удобства пользования данной модификацией, стоит добавить сохранение последней активной вкладки. То есть, если пользователь выбрал вторую вкладку, после чего перешёл на какой-либо форум или закрыл страницу, то при повторной загрузке главной, выделенной станет вторая же. Разработчики стиля Prosilver позаботились о нас и здесь: весь необходимый функционал уже реализован, осталось лишь им воспользоваться. В настоящий момент нас интересуют функции createCookie и readCookie, расположенные в файле template/styleswitcher.js. Первая сохраняет нашу информацию, вторая — считывает.

Добавим код для первоначальной инициализации состояния вкладок — выделения одной из всех, после загрузки главной страницы.
Найдём уже известную нам строку
<!-- INCLUDE forumlist_body.html -->
и после неё добавим вот такой скрипт:
<script type="text/javascript">
// <![CDATA[
	var _def_id = 0;
	var _car_id = _def_id;
	var _cookie_value = readCookie('IndexCatId');
	if (_cookie_value != null)
	{
		if (_cookie_value >= 0) _car_id = _cookie_value;
	}
	subPanels(panels[_car_id]);
// ]]>
</script>
Он проверяет наличие в файлах Cookies заранее сохраненного значения IndexCatId и если оно является корректным, то после загрузки страницы выбранной будет вкладка, индекс которой был сохранён.
Ноль, указанный в качестве первоначального значения для переменной _def_id, означает индекс той вкладки, которая будет активна по-умолчанию, если сохраненного значения не найдётся. При желании можно изменить значиние на любое другое, если в качестве «приветственной» вкладки требуется отображать, например, четвёртую. Стоит учитывать, что нумерация элементов массива начинается не с единицы, а именно с нуля.

Далее правке подвергнется файл forumlist_body.html.
В нём найдем код
	<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW  or forumrow.S_NO_CAT  -->
		<div class="forabg">
Между этими строчками надо добавить вызов нашей функции addcattab, которая добавит вкладку с необходимым текстом. Также надо добавить идентификатор вкладки в массив panels. В результате данный фрагмент кода примет следующий вид:
	<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW  or forumrow.S_NO_CAT  -->

		<script type="text/javascript">
		// <![CDATA[
			panels.push('cattab-{forumrow.FORUM_ID}');
			addcattab('cattab-{forumrow.FORUM_ID}', '<!-- IF forumrow.S_IS_CAT -->{forumrow.FORUM_NAME}<!-- ELSE -->{L_FORUM}<!-- ENDIF -->');
		// ]]>
		</script>

		<div id="cattab-{forumrow.FORUM_ID}" class="forabg">
Не стоит забывать, что контейнером данных будет выступать объявленный именно здесь элемент <div class="forabg">, поэтому ему необходимо присвоить идентификатор. Для уникальности мы воспользуемся идентификатором самой категории.

 

Всё?

 

Да, можно сказать что всё: мы добились требуемого, теперь категории выстроились в горизонтальный ряд.article1

Выглядит неплохо, но ведь можно сделать еще лучше! Как насчет плавного перехода от фонового цвета вкладки к цвету фона блока категории?
Здесь придется поработать уже с CSS-стилями.
Я не буду вдаваться в подробности, но отмечу, что просто скопировал используемые стили для класса #tabs. В приложенном к статье архиве находится файл ctabs.css, в который введены все необходимые стили, нам осталось лишь заменить используемый класс в добавленном только что коде:

В строке

	_li.innerHTML = '<a href="' + "#tabs" + '" onclick="' + "subPanels('" + id + "'); return false;" + '"><span>' + text + "</span></a>";
меняем #tabs на #ctabs


Для строки

<div id="tabs">
делаем аналогичную правку: меняем tabs на ctabs
И подключаем новый файл к теме. Для этого открываем файл stylesheet.css и дописываем в самый его конец такой код:
@import url("ctabs.css");
Также надо добавить новые изображения для вкладок в папку theme\images. В архив к статье включены изображения для стандартных цветов Prosilver, а также PSD-файл с исходным изображением вкладок, который можно легко подстроить под себя.

Теперь наш стиль выглядит следующим образом:

article2

Как видите, использованный приём не очень сложен, поэтому, немного адаптировав приведённый в статье код, можно сделать аналогичный интерфейс для переключения между прилепленными и обычными темами при просмотре форумов, а можно добавить своё меню в верх страницы, что бы оно стало «альтернативным» стандартному со ссылками на личный раздел и прочих. Можно сделать переключение между подфорумами и темами на странице просмотра форума, который имеет в себе дочерние или возможность переключения страниц «Наша команда» и «Пользователи». Применений масса, одно лишь плохо: пользователи стилей на основе SubSilver2 пролетают — там нет стандартных средств для реализации аналогичных задач, всё придется делать самостоятельно.

На этом изменение внешнего вида завершено. В качестве дополнения к уже сделанному, можно добавить возможность создания нескольких групп категорий, но это не сейчас. Если тема будет интересна вам, читателям, то вполне вероятно появление продолжения данного материала.

Исходные файлы графики

Joomla SEF URLs by Artio