Топ плагинов jQuery. Плагин jQuery читать далее для работы с текстом

Топ плагинов jQuery. Плагин jQuery читать далее для работы с текстом

От автора: и снова здравствуйте. Позвольте представить вам очередной плагин из разряда must have. Сегодня мы познакомимся с простым, но вместе с тем весьма полезным плагином Readmore.js, который позволяет скрыть часть текста под кнопкой читать далее. Плагин jQuery читать далее также реализует эффект, известный как jQuery спойлер.

Итак плагин jQuery читать далее, с которым мы сегодня поработаем, позволяет скрывать часть текста за кнопкой читать далее, проще говоря, реализуется эффект jQuery спойлер. Весьма полезная функция, особенно для новостных сайтов и блогов, где много информации и часто не хватает места на странице. В этих случаях прибегают к сокрытию, к примеру, полного текста новости за спойлером, иначе говоря, под кнопкой читать далее.

Перейдем на сайт плагина readmore.js и скачаем его. Там же мы можем познакомиться и с документацией к плагину jQuery спойлер. Теперь подключим единственный файл плагина и, само собой, библиотеку jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/readmore.js"></script>

Далее нам потребуется относительно длинный фрагмент текста, я добавлю пару статей.

<article>
	<h2>Статья 1</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore necessitatibus quas aspernatur vero fugit nulla suscipit sed consequuntur qui architecto, assumenda, cumque iure doloribus accusamus adipisci tempore distinctio hic temporibus.</p>
	...
</article>
...

Топ плагинов jQuery. Плагин jQuery читать далее для работы с текстом

Ну и осталось лишь инициализировать сам плагин jQuery читать далее, вызвав метод readmore():

$(function(){
	$('article').readmore();
});

Топ плагинов jQuery. Плагин jQuery читать далее для работы с текстом

Отлично, плагин работает! Осталось лишь настроить его по своему вкусу, передав необходимые опции в плагин. Например, я хочу стилизовать ссылку под кнопку, поменять текст ссылки, изменить скорость анимации при открытии полного текста, а также изменить высоту короткой части статьи. Все это позволяют сделать следующие опции:

$(function(){
	$('article').readmore({
		speed: 500,
		lessLink: '<p class="more"><a href="#" class="btn btn-default">Свернуть</a></p>',
		moreLink: '<p class="more"><a href="#" class="btn btn-default">Читать далее</a></p>',
		collapsedHeight: 150,
	});
});

Топ плагинов jQuery. Плагин jQuery читать далее для работы с текстом

Как видим, ничего сложного — все просто. Думаю, плагин jQuery читать далее будет вам полезен. На этом у меня сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree