Документация по 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);  // Необязательно: Установка максимальной ширины для адаптивного поведения
							});