Активные пользователи
Сворачивание и разворачивание разделов форума
Добавил: ChepCh1k
Категория: Скрипты от пользователей
Просмотров: 97
Мне нравится
0

Суть скрипта - чтобы дать пользователям возможность сворачивать и разворачивать разделы форума с возможностью запоминания состояния в локальном хранилище

Особенности:

 

1) Миниатюрный код

2) Простота установки

3) Запоминание в локальном хранилище как позиции нужного раздела, так и его заголовка


Установка:

1) ПУ - Управление дизайном - Форум - Вид категории/раздела - Замените самый первый ‹tr› на:

Код
<tr onclick="apohideme($(this), '$FORUM_URL$');" url="$FORUM_URL$" name="$FORUM_TITLE$" class="apohideme"><br><td colspan="5">± Сверни меня</td></tr>
<tr class="aposuccess">


2) ПУ - Управление дизайном - Форум - Общий вид страниц форума - Сразу после $BODY$ вставьте:

Код
<script>  
$('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);
};
};
// Сворачивание и разворачивание разделов форума uCoz. www.imapo.ru (c) 2016
</script>


3) В самый низ вашего CSS вставьте:

Код
.apohideme td {
background: #f7f7f7;
padding: 2px 2px 2px 20px;
border-bottom: 1px dashed #ddd;
cursor: pointer;
}
   
.aposuccess {
display: none!important;
}


Автор: Apocalypse

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Зарегистрироваться
Здравствуйте! Вы видите это сообщение так как вы не вошли на сайт под своим логином. Зарегистрируйтесь пожалуйста, и данное окно исчезнет.                                                                                              by
YouScripts
>