<!-- Основной контейнер с материалами -->
<div id="ajaxBody">
$BODY$
</div>
<!-- Скрытая пагинация -->
<div id="selector" style="display:none;">
$PAGE_SELECTOR$
</div>
<!-- Стили кнопки как ВКонтакте -->
<style>
#nextCont {
width: 100%; /* занимает всю ширину родителя */
text-align: center; /* центрируем кнопку */
margin: var(--btn-margin-top, -5px) 0 0px 0; /* верхний отступ регулируется переменной */
clear: both; /* чтобы кнопка не висела рядом с float-блоками */
}
#nextCont .btn-load {
display: inline-block;
padding: 3px 210px; /* компактная, но не огромная */
font-size: 14px;
cursor: pointer;
border-radius: 0px; /* скруглённые углы как у ВК */
background: #4a76a8; /* фирменный синий ВК */
color: #fff; /* белый текст */
font-weight: 500;
box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* лёгкая тень */
transition: 0.2s;
}
#nextCont .btn-load:hover {
background: #5b87b7; /* светлее при наведении */
}
/* clearfix для материалов */
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
<script>
$(function () {
const selector = $("#selector");
const bodyBox = $("#ajaxBody");
if (!bodyBox.length) return;
if (!selector.text().includes("»")) return;
// Создание кнопки под всеми материалами
function addButton() {
$("#nextCont").remove(); // убираем старую кнопку если есть
bodyBox.append(`<div id="nextCont"><div class="btn-load">Подгрузить материалы</div></div>`);
}
addButton(); // создаём первую кнопку
let loading = false;
// Клик по кнопке
$(document).on("click", "#nextCont .btn-load", function () {
if (loading) return;
loading = true;
$("#nextCont").html('<img src="https://bro.usite.pro/img/load.gif">');
// Ссылка на следующую страницу
let nextLink = selector.find("a").last().attr("href");
// fallback для старого uCoz (onclick)
if (!nextLink) {
let onclick = selector.find(".swchItem:contains('»')").attr("onclick");
if (!onclick) return $("#nextCont").fadeOut();
let num = onclick.match(/\d+/);
if (!num) return $("#nextCont").fadeOut();
nextLink = "/load/0-" + num[0];
}
$.get(nextLink, function (data) {
// новые материалы
const newItems = $("#ajaxBody", data).children();
if (!newItems.length) {
$("#nextCont").fadeOut();
return;
}
// clearfix и анимация
newItems.addClass("clearfix").css({ opacity: 0 });
bodyBox.append(newItems);
newItems.animate({ opacity: 1 }, 300);
// обновляем пагинацию
selector.html($("#selector", data).html());
// создаём кнопку снова после всех материалов
if (selector.text().includes("»")) {
addButton();
loading = false;
} else {
$("#nextCont").fadeOut();
}
});
});
});
</script>
