Документація Readmore.js

Цей плагін JavaScript, який дозволяє створювати функціональність «Читати далі» для вашого веб-контенту. Він розроблений для зроблення довгих блоків тексту або контенту розширюваними за допомогою кнопки «Читати далі» для кращого взаємодії з користувачами.

Особливості

Автоматично додає кнопку «Читати далі» до довгих блоків контенту;
Плавне розширення та згортання контенту з настроюваною анімацією;
Налаштовуваний розмір згорнутого контенту, швидкість анімації та інше;
Підтримує адаптивний дизайн для активації функціональності в залежності від ширини екрану.

Стандартне встановлення

Крок 1: Підключення бібліотеки

Першим кроком є підключення бібліотеки до вашого проекту. Ви можете зробити це, вставивши наступний код у розділ <head> вашої HTML-сторінки:


							<script src="readmore.js"></script>

Замініть «readmore.js» на шлях до файлу на вашому сервері.

Крок 2: Ініціалізація

Зараз, коли бібліотека «Readmore.js» підключена, ви можете почати її використовувати на вашій веб-сторінці. Для цього вам знадобиться JavaScript-код для ініціалізації плагіна. Ось приклад коду ініціалізації:


							initReadMore('.readmore');

Крок 3: Додавання елементу клас

Тепер, коли скрипт ініціалізований на вашій сторінці, ви можете почати використовувати його. Додайте елементу конкретний клас наприклад .readmore до вашої HTML-розмітки. Наприклад:


							<div class="readmore">
								<!-- Ваш великий контент тут -->
							</div>

Скрипт автоматично виявить ці елементи і додасть кнопку «Читати далі» для приховування та розкриття контенту.

NPM Встановлення

Встановіть бібліотеку «readmore-javascript» за допомогою npm:


							$ npm install readmore-javascript

Після встановлення можна імпортувати бібліотеку у вашому JavaScript-коді:


							import { initReadMore } from 'readmore-javascript';
							// Решта коду

Опції

Ви можете налаштувати поведінку функціональності «Читати більше», налаштувавши об'єкт опцій, який передається функції initReadMore. Ось детальний опис доступних опцій:

collapsedHeight Налаштування розміру згорнутого контенту (в пікселях);
speed Встановлення швидкості анімації при розгортанні або згортанні (в мілісекундах);
heightMargin Встановлення відступу при розширенні (в пікселях);
moreLink Налаштування HTML для посилання «Читати далі»;
lessLink Налаштування HTML для посилання «Закрити»;
maxWidth Якщо вказано значення, функціональність активується, коли ширина вікна дорівнює або менше вказаного. Якщо не вказано значення, функціональність завжди активна.

Розширене використання

Для більш розширеного використання та інтеграції з іншими скриптами або бібліотеками ви можете безпосередньо викликати функцію initReadMore з вашими параметрами.


						initReadMore('.custom-class', {
							// Користувацькі параметри
						});

Приклад налаштувань

Ініціалізуйте плагін «Readmore.js» у вашому JavaScript-коді. Наведений нижче код показує, як це зробити:


						document.addEventListener('DOMContentLoaded', function () {
							initReadMore('.readmore', {
								collapsedHeight: 200,  // Налаштування розміру згорнутого контенту (в пікселях)
								speed: 100,            // Налаштування швидкості анімації (в мілісекундах)
								heightMargin: 16,      // Налаштування відступу при розширенні (в пікселях)
								moreLink: '<a href="#">Читати далі</a>',  // Налаштування HTML для «Читати далі»
								lessLink: '<a href="#">Закрити</a>'      // Налаштування HTML для «Закрити»
							}, 768);  // Необов'язково: Встановлення максимальної ширини для адаптивної поведінки
						});