Параметры

Функция initReadMore позволяет настроить поведение плагина «Читать далее» через объект параметров. Это дает возможность адаптировать отображение контента, анимацию и взаимодействие к потребностям вашего сайта.

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

Ниже приведено подробное описание всех доступных параметров:

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

Определяет начальную высоту свернутого контента в пикселях. Если контент короче этой высоты, кнопка «Читать далее» не отображается.

speed
Число
300

Задает длительность анимации развертывания/свертывания в миллисекундах. Для свертывания в режиме animationMode: 'js' скорость уменьшается вдвое.

moreLink
Строка
<span>Read More</span>

HTML-строка для кнопки «Читать далее», которая отображается в свернутом состоянии. Вставляется в элемент <button>. Для безопасности HTML очищается от потенциально опасных атрибутов.

lessLink
Строка
<span>Close</span>

HTML-строка для кнопки «Закрыть», которая отображается в развернутом состоянии. Вставляется в элемент <button>. Поддерживает очистку HTML от опасного кода.

hideButtonCollapse
Логический
false

Если true, кнопка скрывается после развертывания контента, позволяя избежать лишних элементов интерфейса.

disableCollapse
Логический
false

Если true, отключает функцию свертывания для элемента или диапазона ширины экрана, отображая весь контент.

animationMode
Строка
js

Определяет тип анимации:

  • js: анимация через JavaScript с плавным изменением высоты.
  • css: анимация через CSS, добавляется класс cs_readmore-animation для стилизации.
animationType
Строка
ease-in-out

Задает тип перехода для анимации в режиме animationMode: 'js'. Доступные значения: linear, ease, ease-in, ease-out, ease-in-out.

scrollToTopOnCollapse
Логический
true

Если true, страница плавно прокручивается к верхней части контента после его свертывания, улучшая удобство просмотра.

breakpoints
Объект
{}

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

Пример:


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

Если ширина экрана больше максимального ключа, свертывание отключается.

beforeToggle
Функция
null

Коллбэк, который вызывается перед началом развертывания/свертывания. Получает аргументы: button (кнопка), element (элемент контента), isExpanded (логическое значение состояния).

Пример:


								beforeToggle: (button, element, isExpanded) => {
									console.log('Toggle начнется, состояние:', isExpanded);
								}
afterToggle
Функция
null

Коллбэк, который вызывается после завершения развертывания/свертывания. Получает те же аргументы: button, element, isExpanded.

Пример:


								afterToggle: (button, element, isExpanded) => {
									console.log('Toggle завершено, состояние:', isExpanded);
								}
blockProcessed
Функция
null

Коллбэк, который вызывается после обработки элемента плагином. Получает аргументы: element (элемент контента), needsToggle (логическое значение, нужна ли кнопка).

Пример:


								blockProcessed: (element, needsToggle) => {
									console.log('Элемент обработан, нужна кнопка:', needsToggle);
								}

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

Для использования плагина инициализируйте его через функцию initReadMore, передав селектор и объект параметров. Это позволяет адаптировать поведение к вашему сайту.

Ниже приведен пример инициализации с различными параметрами:


					document.addEventListener('DOMContentLoaded', function () {
						initReadMore('.readmore', {
							collapsedHeight: 200,
							speed: 400,
							moreLink: '<span>Подробнее</span>',
							lessLink: '<span>Свернуть</span>',
							animationMode: 'js',
							animationType: 'ease-in-out',
							scrollToTopOnCollapse: true,
							hideButtonCollapse: true,
							disableCollapse: false,
							breakpoints: {
								576: {
									collapsedHeight: 100,
									speed: 200,
									moreLink: '<span>Показать</span>',
									lessLink: '<span>Скрыть</span>'
								},
								768: {
									collapsedHeight: 150,
									speed: 300
								},
								1024: {
									disableCollapse: true
								}
							},
							beforeToggle: (button, element, isExpanded) => {
								console.log('Начинается переключение:', isExpanded);
							},
							afterToggle: (button, element, isExpanded) => {
								console.log('Переключение завершено:', isExpanded);
							},
							blockProcessed: (element, needsToggle) => {
								console.log('Обработка элемента завершена, кнопка:', needsToggle);
							}
						});
					});

Этот код применяет плагин ко всем элементам с классом .readmore, настраивая высоту, анимацию, текст кнопок и адаптивное поведение.

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