Від автора: вітаю вас, друзі. У цій статті ми поговоримо про додавання кнопок для сайту на DLE. Зокрема, в якості прикладу ми додамо кнопку вгору для нашого сайту. Ну а за аналогією ви можете додавати будь-які інші кнопки. Приступимо?
Отже, ми вирішили в якості прикладу додати кнопку вгору для нашого сайту на движку DLE. Це досить зручна для користувачів можливість, оскільки кнопка вгору дозволяє швидко піднятися в початок сайту (вгору) з будь-якої точки сайту. Особливо ця можливість актуальна для мобільних версій сайту, де екран досить вузький і контент сторінки може займати кілька екранів. У цьому випадку користувач буде позбавлений від гарячкового перелистування екрану з метою дістатися до меню або будь-якого іншого елемента, що знаходиться вгорі сторінки. За нього це зробить функціонал, закладений в кнопку.
Також ця можливість актуальна для сайтів з великою кількістю контенту. Загалом, штука корисна і зручна. До речі, в шаблоні Default, який йде з коробки з движком DLE, така кнопка є. Ось тільки зроблена вона не зовсім вдало. По-перше, на мобільній версії сайту її чомусь прибрали. По-друге, на десктопах вона знаходиться в самому низу сторінки, тобто, якщо ми знаходимося де-те на середині тематичній частині сторінки, то ця кнопка для нас просто недоступна.
Хотілося б, щоб ця кнопка не з’являлася в самому кінці сторінки, а була доступна нам практично завжди. Ну і, звичайно ж, непогано було б, щоб ця кнопка була доступна і на мобільній версії сайту. Давайте спробуємо зробити це.
Я використовую вже наявну кнопку, яку показав на скріншоті вище, проте можна використовувати і власну кнопку за бажанням. Давайте подивимося код кнопки через консоль розробника.
Як бачимо, кнопка має ідентифікатор upper, для якого описані відповідні стилі. Для того, щоб кнопка показувалася не тільки в кінці сторінки, нам необхідно прописати для неї фіксоване позиціонування і вказати відповідний відступ знизу. Зробимо це у файлі style.css.
Тепер кнопка доступна з будь-якої позиції сторінки, оскільки ми поставили для неї фіксоване позиціонування і відступ знизу і праворуч по 50 пікселів.
Наступним кроком буде показати кнопку тільки починаючи з певної позиції, скажімо починаючи з 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);
});
Суть коду досить проста. При події скролла ми перевіряємо відступ зверху і, якщо він більше 200 пікселів, тоді ми показуємо кнопку, в іншому випадку — приховуємо її. Ну а при кліці по самій кнопці анимируется скролл вгору за 700 мілісекунд.
Залишилося зробити доступною кнопку і для мобільних пристроїв. Насправді ховається не кнопка, а блок, в якому ця кнопка знаходиться. Це блок з класом rightside. Найпростішим варіантом вирішити завдання просте видалення класу у цього блоку. Знаходиться блок в шаблоні modules/footmenu.tpl. Відкриємо його і внесемо необхідні правки.
Ну ось і все. Тепер кнопка працює як на десктопах, так і на мобільних пристроях. На цьому у мене все. Нагадую, що якщо ви хочете більше дізнатися про DLE, тоді познайомтеся з нашим курсом Створення сайту на CMS DLE. Удачі!