загрузки

продолжаю эту вечно актуальную тему,
сделал очередной вариант, в котором попытался учесть ошибки предыдущих вариантов,
поэтому вариант старался сделать с минимальным применением js, чтоб при отключении Javascript в браузере у пользователя, подфорум отображался так как положено

итак с чего начнём?
создадим сначала форумы, которые превратим в подфорумы,
запоминаем, а лучше записываем id этих форумов
в моём примере это три форума:
http://expert.mybb.ru/viewforum.php?id=3
http://expert.mybb.ru/viewforum.php?id=5
http://expert.mybb.ru/viewforum.php?id=6

соответственно id этих форумов 3, 5 и 6
скрываем их на главной странице, но не с помощью js как это делали мои предшественники, а с помощью css
в html-верх:

<style>
tr#forum_f3, tr#forum_f5, tr#forum_f6 {display: none;}
</style>

далее идём в Администрирование - Форумы
открываем для редактирования тот форум, к которому будет привязан подфорум или подфорумы
в описании этого форума размещаем таблицу, которая будет содержать элементы
на примере с одним подфорумом
одна ячейка таблицы нужна под иконку форума, другая под ссылку на подфорум

иконка подфорума

ссылка на подфорум

естественно, если подфорумов в одном родительском форуме будет 2 или 3, то ячейки в таблице размножаются

привожу конкретные примеры со своими подфорумами
2 подфорума я привязываю к форуму с названием Ещё форум (id=4)
в его описание ставлю вот такую таблицу

<table>
<tr>
<td width="5%" style="border-width:0;padding:0;"><div id="kk5" style="background-size:50%;-moz-background-size:50%;margin-left:1em;" class="icon"></div></td>
<td width="15%" style="border-width:0;padding:0;"><a href="/viewforum.php?id=5">Подфорум 1</a></td><td width="5%" style="border-width:0;padding:0;"><div id="kk6" style="background-size:50%;-moz-background-size:50%;margin-left:1em;" class="icon"></div></td><td style="border-width:0;padding:0;"><a href="/viewforum.php?id=6">Подфорум 2</a></td>
</tr></table>

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

<div class="icon"></div>

только к каждому такому блоку надо присвоить индивидуальный id, чтоб потом через js позволить там появляться иконке оповещающей, о том что в подфоруме есть новое сообщение,
если не использовать js вообще, то иконки и так появятся у каждого подфорума, поскольку они прописаны в стиле каждого форума для <div class="icon"></div>, НО
иконки подфорумов будут наследовать стиль форума, к которому мы привязали подфорум, и когда в этом форуме появится новое сообщение, то во всех подфорумах привязаных к нему появятся иконки свидетельствующие о якобы новых сообщениях в них,
чтобы этого избежать придётся всё таки прибегнуть к помощи js
итак назначаем индивидуальный id каждой ячейке предназначенной под иконку подфорума

<div id="kk5" style="background-size:50%;-moz-background-size:50%;margin-left:1em;" class="icon"></div>

в моём скрипте я решил использовать сочетание латинских букв kk и цифре соответствующей id, чтоб избежать путаницы

надеюсь с этой частью всё понятно, с html и css мы закончили, теперь переходим к js части

разберу сначала скрипт по строкам, что за что отвечает
первое что мы делаем, это создаём переменную с изображением иконки показывающей, что сообщение в подфоруме новое

var newk = 'адрес изображения иконки нового сообщения';

затем создаём общую для всех подфорумов иконку которая показывает, что новых сообщений нет

$('div[id^="kk"]').css('background-image', 'url(адрес изображения иконки НЕТ новых сообщений)');

это строка работает со всеми ячейками под иконки с id="kk+любая ваша цифра" и не требует изменений

следующие строки скрипта, это условные выражения
в которых выполняется одно условие,
если в подфоруме появилось новое сообщение, то ячейке под иконки этого подфорума присваивается соответствующий бекграунд

if ($('#forum_f5 .icon').hasClass('inew')) {$('#kk5').css('background-image', 'url('+newk+')')};
if ($('#forum_f6 .icon').hasClass('inew')) {$('#kk6').css('background-image', 'url('+newk+')')};
if ($('#forum_f3 .icon').hasClass('inew')) {$('#kk3').css('background-image', 'url('+newk+')')};

в принципе на этом можно было бы и остановиться, но кому-то важно чтоб на главной странице ещё и отображалось количество тем и сообщений в подфорумах
я их приплюсовываю к форуму с подфорумом

это количество тем в подфорумах (в моём примере)

var Trid = [$('#forum_f3 .tc2').text(), $('#forum_f5 .tc2').text(), $('#forum_f6 .tc2').text()];

это количество сообщений в подфорумах (в моём примере)

var Soob = [$('#forum_f3 .tc3').text(), $('#forum_f5 .tc3').text(), $('#forum_f6 .tc3').text()];

далее количество тем в форумах, к которым привязаны подфорумы

var Grid = [$('#forum_f7 .tc2').text(), $('#forum_f4 .tc2').text()];

количество сообщений в форумах, к которым привязаны подфорумы

var Saab = [$('#forum_f7 .tc3').text(), $('#forum_f4 .tc3').text()];

дальше пойдёт сплошная химия
будем суммировать количество тем поформов с количеством тем форума именно того, к которому они привязаны
тут немного поподробнее вот эти количества тем и сообщений, что я привёл выше
выражены в массиве, а доступ к элементам массива читается слева направо, начиная от нуля [0]
поэтому будьте внимательны, что и к чему приплюсовываете
вот например у меня подфорум #forum_f3 привязан к форуму #forum_f7
оба в своих массивах стоят первыми поэтому считаются с [0]
(если подфорумов 2-3 или 4 в одном форуме, то все их данные приплюсовываются к нему), суммирование разделяется запятой

общая сумма тем форумов и подфорумов, каждый приплюсовывается к соответствующему

var totalGrid = [Number(Trid[0]) + Number(Grid[0]), Number(Trid[1]) + Number(Trid[2]) + Number(Grid[1])];

общая сумма сообщений

var totalSaab = [Number(Soob[0]) + Number(Saab[0]), Number(Soob[1]) + Number(Soob[2]) + Number(Saab[1])];

теперь общую сумму надо разместить на главной странице в соответствующих ячейках

$('tr#forum_f7 td.tc2').html(+totalGrid[0]);
$('tr#forum_f7 td.tc3').html(+totalSaab[0]);
$('tr#forum_f4 td.tc2').html(+totalGrid[1]);
$('tr#forum_f4 td.tc3').html(+totalSaab[1]);

теперь приведу общий скрипт

Код:

<script type="text/javascript">
var newk = 'http://petushki-city.ru/uploads/0002/10/47/9942-1.gif';
$(function() {
$('div[id^="kk"]').css('background-image', 'url(http://www.iconsearch.ru/uploads/icons/blandet/16x16/control_start.png)');
if ($('#forum_f5 .icon').hasClass('inew'))  {$('#kk5').css('background-image', 'url('+newk+')')};
if ($('#forum_f6 .icon').hasClass('inew'))  {$('#kk6').css('background-image', 'url('+newk+')')};
if ($('#forum_f3 .icon').hasClass('inew'))  {$('#kk3').css('background-image', 'url('+newk+')')};
var Trid = [$('#forum_f3 .tc2').text(), $('#forum_f5 .tc2').text(), $('#forum_f6 .tc2').text()];
var Soob = [$('#forum_f3 .tc3').text(), $('#forum_f5 .tc3').text(), $('#forum_f6 .tc3').text()];
var Grid = [$('#forum_f7 .tc2').text(), $('#forum_f4 .tc2').text()];
var Saab = [$('#forum_f7 .tc3').text(), $('#forum_f4 .tc3').text()];
var totalGrid = [Number(Trid[0]) + Number(Grid[0]), Number(Trid[1]) + Number(Trid[2]) + Number(Grid[1])];
var totalSaab = [Number(Soob[0]) + Number(Saab[0]), Number(Soob[1]) + Number(Soob[2]) + Number(Saab[1])];
$('tr#forum_f7 td.tc2').html(+totalGrid[0]);
$('tr#forum_f4 td.tc2').html(+totalGrid[1]);
$('tr#forum_f7 td.tc3').html(+totalSaab[0]);
$('tr#forum_f4 td.tc3').html(+totalSaab[1]);
});
</script>

ну в общем-то на этом всё, надеюсь инструкция получилась понятной

можно ещё сделать отображение количества тем в подфоруме прямо на против него
это у меня в примере с подфорумом - Music
можно конечно так же обойтись без массива, но тогда количество переменных разрастётся и уж не знаю где кому легче запутаться в сложении элементов массива или в множестве переменных

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

например так

if ($('#forum_f3 .icon').hasClass('inew')) {$('#kk3').css('background-image', 'url('+newk+')');
$('tr#forum_f7 td.tcr').before($('tr#forum_f3 td.tcr'))};

НО тут привязка идёт к классу inew, поэтому тема из подфорума будет торчать на главной странице до тех пор пока не сменится класс, даже если в самом форуме, к которому привязан подфорум, появится новое сообщение, так что данный метод НЕ РЕКОМЕНДУЮ

ну и напоследок - ПРИМЕР
как это выглядит,
если кто-то запутался и не в состоянии настроить скрипт самостоятельно, то я могу за символическую плату помочь вам