Background Image

Сворачивание и разворачивание форума с запоминанием

Script

by — Category Script on

Сейчас в сети достаточно много подобных скриптов, но поискав их в интернете, я не нашел ни одного, который при обновлении страницы сохранял бы параметры пользователя. Если у Вас большой форум и, для того, чтобы добраться до нижних тем Вам приходится прокручивать страницу вниз при помощи ползунка или колесика мыши, то данное решение специально для вас! С помощью данного скрипта можно просто сворачивать ненужные вам темы форума и оставлять только необходимые. Особенность данного скрипта в том, что он не только сворачивает разделы, но и отдельно можно свернуть конкретные форумы.

Установка очень проста. Я загнал её вот в такую пометку  <!-- Сворачивание тем форума --> 

Разметка

И так, первое что мы делаем, это заходим в ПУ - Управление дизайном - Вид категории/Раздела и заменяем первое <tr> вот на этот код:

<tr onclick="apohideme($(this), '$FORUM_URL$');" url="$FORUM_URL$" name="$FORUM_TITLE$" class="apohideme"><td colspan="5"><i class="fa fa-minus" aria-hidden="true"></i></td></tr>
<tr class="aposuccess">

Вторым действием мы добавим основные стили, чтобы скрыть блок tr до момента открытия:

CSS

<style>
.apohideme td {
cursor: pointer;

.aposuccess {
display: none!important;
}
</style>

Ну и напоследок, подключаем скрипт. Здесь мы использовали специальный шрифт FontAwesome <i class="fa fa-***" aria-hidden="true"></i> но если у вас он не подключён, вы можете в скрипте заменить эти части на простой текст или картинку, например: "свернуть/развернуть форум".

Script 

$('tr.apohideme').each(function() {
var a = $(this).attr('url');
if(localStorage.getItem(a)) {
$(this).find('td').html('<i class="fa fa-plus" aria-hidden="true"></i> ' + 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;');
});
 function apohideme(t, url) {
if(localStorage.getItem(url)) {
t.find('td').html('<i class="fa fa-minus" aria-hidden="true"></i>');
t.next('tr').removeClass('aposuccess');
localStorage.removeItem(url);
} else {
t.find('td').html('<i class="fa fa-plus" aria-hidden="true"></i> ' + 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);
};
};

Готово! Понравился материал? Жми на кнопки социальных сетей.

 


Понравился материал?
Поделитесь с друзьями

С этим материалом смотрят:
    Мини скрипты для uCoz

    Мини скрипты для uCoz

    Набор всевозможных скриптов

    View More
    1 397 17:22
    Автоматический слайдер для контента

    Автоматический слайдер для кон...

    Очень легкий слайдер для контента с автоматический п...

    View More
    0 401 16:25
    Вид похожих материалов [для uCoz]

    Вид похожих материалов [для uC...

    Данная функция часто встречается на кино сайтах, вид...

    View More
    4 1464 22:19
    Хлебные крошки для форума

    Хлебные крошки для форума

    Навигационная цепочка (дублирующее меню, «хлеб...

    View More
    6 689 10:54
Feedback: 0

Leave a Comment

Имя *:
Email *:
Код *:
Menu