Описание:
Данный скрипт был разработан для удобства пользователей форума, позволяя им сворачивать и разворачивать разделы с возможностью запоминания их состояния в локальном хранилище. Скрипт обладает следующими особенностями:
1. Компактный код.
2. Легкая установка.
3. Автоматическое сохранение состояния разделов.
Установка:
1. Замените первый тег tr в разделе категории/раздела на следующий код
Код
<tr onclick="apohideme($(this), '$FORUM_URL$');" url="$FORUM_URL$" name="$FORUM_TITLE$" class="apohideme"><td colspan="5">± Сверни меня</td>
</tr>
<tr class="aposuccess">
</tr>
<tr class="aposuccess">
2. В разделе общего вида страниц форума после $BODY$ вставьте следующий скрипт:
Код
$('tr.apohideme').each(function() {var a = $(this).attr('url');if(localStorage.getItem(a)) {$(this).find('td').html('± Разверни меня [' + localStorage.getItem(a) + ']');} else {$(this).next('tr').removeClass('aposuccess');};
});$('.gTableTop a').each(function() {$(this).attr('onclick', 'apohidemetoo($(this), \'' + $(this).attr('href') + '\', \'' + $(this).text() + '\');return false;');if(localStorage.getItem($(this).attr('href'))) {$(this).html($(this).text() + ' [ + ] ');$(this).parent().parent().nextAll('tr').hide();} else {$(this).html($(this).text() + ' [ - ] ');};
});function apohideme(t, url) {if(localStorage.getItem(url)) {t.find('td').html('± Сверни меня');t.next('tr').removeClass('aposuccess');localStorage.removeItem(url);} else {t.find('td').html('± Разверни меня [' + t.attr('name') + ']');t.next('tr').addClass('aposuccess');localStorage.setItem(url, t.attr('name'));};
};function apohidemetoo(a, b, c) {if(localStorage.getItem(b)) {a.html(c + ' [ - ] ');localStorage.removeItem(b);a.parent().parent().nextAll('tr').show(300);} else {a.html(c + ' [ + ] ');localStorage.setItem(b, 1);a.parent().parent().nextAll('tr').hide(300);};
};
});$('.gTableTop a').each(function() {$(this).attr('onclick', 'apohidemetoo($(this), \'' + $(this).attr('href') + '\', \'' + $(this).text() + '\');return false;');if(localStorage.getItem($(this).attr('href'))) {$(this).html($(this).text() + ' [ + ] ');$(this).parent().parent().nextAll('tr').hide();} else {$(this).html($(this).text() + ' [ - ] ');};
});function apohideme(t, url) {if(localStorage.getItem(url)) {t.find('td').html('± Сверни меня');t.next('tr').removeClass('aposuccess');localStorage.removeItem(url);} else {t.find('td').html('± Разверни меня [' + t.attr('name') + ']');t.next('tr').addClass('aposuccess');localStorage.setItem(url, t.attr('name'));};
};function apohidemetoo(a, b, c) {if(localStorage.getItem(b)) {a.html(c + ' [ - ] ');localStorage.removeItem(b);a.parent().parent().nextAll('tr').show(300);} else {a.html(c + ' [ + ] ');localStorage.setItem(b, 1);a.parent().parent().nextAll('tr').hide(300);};
};
3. Добавьте следующие стили CSS в самый низ вашего CSS
Код
.apohideme td {background: #f7f7f7;padding: 10px 20px;border-bottom: 1px dashed #ddd;cursor: pointer;
}
.aposuccess {display: none !important;
}
.apohideme td:hover {background: #f0f0f0;
}
Теперь скрипт не только будет выполнять свою функцию, но и иметь улучшенный внешний вид и интерактивность. Если у вас возникнут вопросы или пожелания по улучшению скрипта, не стесняйтесь обращаться в комментариях
