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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

Научиться

Метки:

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree