Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

Молодой, энергичный, яркий и индивидуальный проект спешит по хвастаться своим открытием и ждет новых посетителей на свой сайт!

12 Января 2015 Подробнее

Наша группа Вконтакте

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

17 Марта 2014 Подробнее

Свернуть

Прямой эфир

Пользователь: artCreative

В раздел по теме: Вид материалов как на Pinterest
Пользователь: artCreative

В раздел по теме: Ссылка на источник при копировании текста
Пользователь: muxa

В раздел по теме: Ссылка на источник при копировании текста
Не работает
Пользователь: muxa

В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
Все работает класс
Пользователь: muxa

В раздел по теме: Всплывающее меню на чистом CSS
Не работает
Пользователь: muxa

В раздел по теме: Шаблон Фотошоп-Мастер
Пользователь: vovany

В раздел по теме: Уникальная страница технических работ для uCoz

Свернуть

Статистика

Пользователи

Гости сайта

Онлайн
Кто был
СЧ

[Статистика недоступна]

Всего пользователей: 1492 ⁺⁰
Всего материалов [?]: 1434 +

Полный список

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Разные скрипты » Плагин скрывающий большой текст READMORE.JS

Плагин скрывающий большой текст READMORE.JS

Опубликовал: artCreative™
Категория: Разные скрипты
Дата: 18 Июня 2025 в 20:15

0 голосов

READMORE.JS - Плагин позволяющий скрывать часть текста, если он превышает заданную длину. Добавляется ссылка, как правило в виде кнопки "Подробнее" - по клику отображается скрытый текст.
Совместим с версиями jQuery выше 1.7.0

jQuery
Простой вызов плагина:

Код

$('article').readmore();

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

Код

$('article').readmore({
speed: 75,
maxHeight: 500
});

Опции:

speed: 100 (в миллисекундах)
maxHeight: 200 (в пикселях)
heightMargin: 16 (в пикселях, позволяет избежать ломания блоков, которые лишь немного больше заданной высоты - maxHeight)
moreLink: '< a href="#">Подробнее'
lessLink: '< a href="#">Скрыть'
embedCSS: true (вставляет динамический CSS стили, установите false, если все стили вы будете подключаать сами в своём файле стилей)
sectionCSS: 'display: block; width: 100%;' (устанавливает стиль блоков)
startOpen: false (по дефолту блок скрыт, при параметре true - текст будет показан полностью, но с возможностью скрыть)
expandedClass: 'readmore-js-expanded' (класс добавляемый к развернутому блоку)
collapsedClass: 'readmore-js-collapsed' (класс добавляемый к свернутому блоку)
beforeToggle: function() {} ( функция вызываемая после нажатия на кнопку "Подробнее" или "Скрыть", но до того, как блок свернется или развернется)
afterToggle: function() {} ( функция вызываемая после того, как блок развернется или свернется)

Если у элемента задана максимальная высота в CSS стилях, то плагин будет использовать именно это значение, а не значение опции maxHeight

Обратный вызов:
Функции обратного вызова, beforeToggle() и afterToggle() получают те же самые аргументы: trigger, element и more.
trigger: кнопки "Подробнее" или "Скрыть"
element: блок, который в настоящее время сворачивается или разворачивается
more: boolean, true - означает, что блок разворачивается
Пример обратного вызова.
Вот пример использования функции afterToggle, для прокрутки к верхней части блока, когда нажата кнопка "Скрыть":

Код

$('article').readmore({
  afterToggle: function(trigger, element, more) {
  if(! more) { // кнопка "Скрыть" была нажата
  $('html, body').animate({
  scrollTop: element.offset().top
  },{
  duration: 100
  });
  }
  }
});

Отключить функционал плагина можно так:

Код

$('article').readmore('destroy');

Или же вы можете указать элемент, на котором плагин не должен работать:

Код

$('article:first').readmore('destroy');

CSS

По умолчанию плагин вставляет следующий CSS код на страницу:

Код

.readmore-js-toggle, .readmore-js-section {
  display: block;
  width: 100%;
}
.readmore-js-section {
  overflow: hidden;
}

С помощью опции плагина можно изменить первое правило:

Код

$('article').readmore({
sectionCSS: 'display: inline-block; width: 50%;'
});

Если вы хотите использовать свой файл стилей, то в настройках плагина укажите false:

Код

$('article').readmore({
embedCSS: false
});

Спонсор материала: Дизайн-Ателье по разработке сайтов и граффики RealARTs

Автор файла: jedfoster.com/Readmore.js/

Ссылка на источник материала

Ссылка на ДЕМО

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

Просмотров 1338 « Назад

Теги материала: скрывающий, READMORE.JS, большой, текст, плагин

Комментарии пользователей

Внимание ! У вас нет прав для добавления комментариев.
Пожалуйста авторизуйтесь или зарегистрируйтесь.

E-mail отправителя *:
Тема письма:
Текст сообщения *:

ПАНЕЛЬ УПРАВЛЕНИЯ

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Разные скрипты » Плагин скрывающий большой текст READMORE.JS

Плагин скрывающий большой текст READMORE.JS

Комментарии пользователей