Параметры

Вы можете настроить поведение функциональности, настроив объект опций функции initReadMore.

Это позволит вам детально управлять отображением и анимацией контента на вашем сайте. Благодаря этим опциям вы можете создать уникальный пользовательский опыт, который соответствует вашим требованиям и эстетическим предпочтениям.

Подробное описание доступных опций:

Опции
Тип
По умолчанию
Описание
collapsedHeight
Число
200

Устанавливает начальную высоту контента в свернутом состоянии (в пикселях).

speed
Число
100
Определяет скорость анимации изменения высоты элемента в миллисекундах.
heightMargin
Число
16
Дополнительный отступ для высоты, чтобы обеспечить зазор при разворачивании контента (в пикселях).
moreLink
Строка
<span>Читать далее</span>
Текст кнопки «Читать далее» с поддержкой HTML. Используется внутри элемента <button>, который отображается для раскрытия скрытого контента.
lessLink
Строка
<span>Закрыть</span>
Текст кнопки «Закрыть» с поддержкой HTML. Используется внутри элемента <button>, который отображается для сворачивания контента после его раскрытия.
lazyLoad
Логический
true
Если включено, элементы (контент или мультимедиа) будут инициализироваться только при их появлении в области видимости.
hideButtonCollapse
Логический
false
Если установлено true, кнопка «Читать далее» не отображается, когда весь контент помещается в видимую область без необходимости сокращения.
animationMode
Строка
js

Режим анимации для изменения высоты:

js — используется JavaScript анимация;

css — используется CSS-анимация. При активации этого режима к элементу добавляется класс cs_readmore-animation.

breakpoints
Объект
{}

Позволяет указать разные значения для других опций в зависимости от ширины экрана. Ключи — это ширина экрана (в пикселях), а значения — объекты с новыми значениями опций.

Пример:


								breakpoints: {
									768: {
										collapsedHeight: 150,
										moreLink: '<span>Читать далее</span>'
									},
									1200: { collapsedHeight: 200 }
								}

Этот параметр помогает адаптировать поведение скрипта под разные размеры экранов.

Пример настроек

Чтобы настроить функциональность на вашем сайте, вам нужно инициализировать плагин с параметрами в вашем JavaScript-коде.

Это можно сделать, передав объект опций в функцию initReadMore. Ниже приведен пример кода, который демонстрирует, как это сделать:


					document.addEventListener('DOMContentLoaded', function () {
						initReadMore('.readmore', {
							collapsedHeight: 200,		// Высота свернутого блока в пикселях
							speed: 300,					// Скорость анимации в миллисекундах
							heightMargin: 16,			// Дополнительный отступ от высоты
							moreLink: '<span>Читать далее</span>',	// HTML для кнопки «Читать далее»
							lessLink: '<span>Закрыть</span>',		// HTML для кнопки «Закрыть»
							lazyLoad: true,				// Ленивое инициализирование (отображается только при прокрутке)
							animationMode: 'css',		// Режим анимации ('js' или 'css')
							hideButtonCollapse: false,	// Скрыть кнопку «Читать далее» после развертывания
							breakpoints: {				// Адаптивные настройки для разных экранов
								576: {					// Для экранов до 576px
									collapsedHeight: 100,
									speed: 200,
									moreLink: '<span>Подробнее</span>',
									lessLink: '<span>Свернуть</span>',
								},
								768: {					// Для экранов до 768px
									collapsedHeight: 150,
									speed: 250,
								},
							}
						});
					});

В этом примере плагин инициализируется для всех элементов с классом .readmore.

Вы можете изменять значения опций в соответствии с вашими потребностями, чтобы адаптировать поведение плагина к вашему сайту.

Это дает вам возможность создать интерактивный и удобный интерфейс для отображения контента.