Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

ReadAll - плагин jQuery, который сворачивает часть длинного текстового блока и добавляет кнопку «Подробнее»

Дата добавления: 06.02.2021 - 20:55
Добавил: Buger
Количество просмотров: 34
Количество комментариев: 0
Размер файла: 11.4 Kb
Рейтинг материала: 0.0 / 0
ReadAll - плагин jQuery, который сворачивает часть длинного текстового блока и добавляет кнопку «Подробнее»
БЕСПЛАТНО
рейтинг 0.0
/
голосов 0
ReadAll - это плагин jQuery, который сворачивает часть вашего длинного текстового блока и добавляет кнопку «Подробнее» внизу, если содержимое превышает определенную высоту или определенное количество строк.

Нажмите кнопку «Подробнее», чтобы отобразить все содержимое, и замените кнопку «Подробнее» на кнопку «Меньше чтения», которая позволяет свернуть текст до исходного состояния.

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

Полностью отзывчивый и удобный для мобильных устройств. Функция ReadAll автоматически включается и выключается в зависимости от высоты блока после изменения размера окна.

Демонстрация находится в папке /examples/

Как использовать:


1. Загрузите и подключите jquery.readall.js и таблицу стилей jquery.readall.css в документ HTML.
Код
<link href="/path/to/css/jquery.readall.min.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jquery.readall.min.js"></script>

2. Вызовите функцию в блоке подробного текста.
Код
<p>
  Текст здесь
  ...
</p>

Код
$(function(){
  $('p').readall();
});

3. По умолчанию плагин обрезает переполненный контент, когда высота блока превышает 96 пикселей. Вы можете настроить ограничение, используя параметры showheight:
Код
$('p').readall({
  showheight: 120
});

4. Или обрежьте текст до определенного количества строк:
Код
$('p').readall({
  showheight: null,
  showrows: 3
});

5. Настройте скорость анимации при разворачивании и сворачивании содержимого. По умолчанию: 200.
Код
$('p').readall({
  animationspeed: 300  
});

6. Настройте кнопки «Читать больше» и «Свернуть».
Код
$('p').readall({
  btnTextShowmore: 'Читать больше',
  btnTextShowless: 'Свернуть',
  btnClassShowmore: 'readall-button',
  btnClassShowless: 'readall-button'
});

7. Отмените линейный градиент по умолчанию, если цвет фона текстового блока НЕ ​​белый.
Код
.readall-hide:after {
  background: linear-gradient(to bottom, rgba(250,250,250, 0.1), #fafafa 75%);
}
Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: