Кнопки для сайту DLE

16

Від автора: вітаю вас, друзі. У цій статті ми поговоримо про додавання кнопок для сайту на DLE. Зокрема, в якості прикладу ми додамо кнопку вгору для нашого сайту. Ну а за аналогією ви можете додавати будь-які інші кнопки. Приступимо?

Отже, ми вирішили в якості прикладу додати кнопку вгору для нашого сайту на движку DLE. Це досить зручна для користувачів можливість, оскільки кнопка вгору дозволяє швидко піднятися в початок сайту (вгору) з будь-якої точки сайту. Особливо ця можливість актуальна для мобільних версій сайту, де екран досить вузький і контент сторінки може займати кілька екранів. У цьому випадку користувач буде позбавлений від гарячкового перелистування екрану з метою дістатися до меню або будь-якого іншого елемента, що знаходиться вгорі сторінки. За нього це зробить функціонал, закладений в кнопку.

Також ця можливість актуальна для сайтів з великою кількістю контенту. Загалом, штука корисна і зручна. До речі, в шаблоні Default, який йде з коробки з движком DLE, така кнопка є. Ось тільки зроблена вона не зовсім вдало. По-перше, на мобільній версії сайту її чомусь прибрали. По-друге, на десктопах вона знаходиться в самому низу сторінки, тобто, якщо ми знаходимося де-те на середині тематичній частині сторінки, то ця кнопка для нас просто недоступна.

Кнопки для сайту DLE

Хотілося б, щоб ця кнопка не з’являлася в самому кінці сторінки, а була доступна нам практично завжди. Ну і, звичайно ж, непогано було б, щоб ця кнопка була доступна і на мобільній версії сайту. Давайте спробуємо зробити це.

Я використовую вже наявну кнопку, яку показав на скріншоті вище, проте можна використовувати і власну кнопку за бажанням. Давайте подивимося код кнопки через консоль розробника.

Кнопки для сайту DLE

Як бачимо, кнопка має ідентифікатор upper, для якого описані відповідні стилі. Для того, щоб кнопка показувалася не тільки в кінці сторінки, нам необхідно прописати для неї фіксоване позиціонування і вказати відповідний відступ знизу. Зробимо це у файлі style.css.

Кнопки для сайту DLE

Тепер кнопка доступна з будь-якої позиції сторінки, оскільки ми поставили для неї фіксоване позиціонування і відступ знизу і праворуч по 50 пікселів.

Кнопки для сайту DLE

Наступним кроком буде показати кнопку тільки починаючи з певної позиції, скажімо починаючи з 200 пікселів прокрутки від верху сторінки. Тобто, спочатку кнопка буде не видно, але після 200 пікселів прокрутки ми її покажемо. Для цього в тих же стилях спочатку приховаємо кнопку, додавши просте правило display: none;

Тепер напишемо нескладний скрипт, який покаже кнопку при скролле сторінки. Зробити це можна в окремому файлі js, який можна підключити до сторінки. Також можна використовувати існуючий файл або прописати потрібний код шаблону. Я зупинюся на останньому варіанті, тим більше що в шаблоні main.tpl вже є js код. Допишемо наш код:

$(window).scroll(function () {
if ($(this).scrollTop() > 200) $(‘#upper’).fadeIn();
else $(‘#upper’).fadeOut();
});
$(‘#upper’).click(function () {
$(‘body, html’).animate({
scrollTop: 0
}, 700);
});

Кнопки для сайту DLE

Суть коду досить проста. При події скролла ми перевіряємо відступ зверху і, якщо він більше 200 пікселів, тоді ми показуємо кнопку, в іншому випадку — приховуємо її. Ну а при кліці по самій кнопці анимируется скролл вгору за 700 мілісекунд.

Залишилося зробити доступною кнопку і для мобільних пристроїв. Насправді ховається не кнопка, а блок, в якому ця кнопка знаходиться. Це блок з класом rightside. Найпростішим варіантом вирішити завдання просте видалення класу у цього блоку. Знаходиться блок в шаблоні modules/footmenu.tpl. Відкриємо його і внесемо необхідні правки.

Кнопки для сайту DLE

Ну ось і все. Тепер кнопка працює як на десктопах, так і на мобільних пристроях. На цьому у мене все. Нагадую, що якщо ви хочете більше дізнатися про DLE, тоді познайомтеся з нашим курсом Створення сайту на CMS DLE. Удачі!