Наверняка на многих популярных ресурсах вы могли заметить такой занимательный функционал: если комментарий или вообще какой-то там кусочек текста слишком велик по объему, то он динамично сворачивается JavaScript-ом до заданной длины. Это достаточно легко можно пристроить и на ваши сайты, — благо есть соответствующий JQuery плагин.
Обратите внимание! Вообще существует, как минимум два варианта такой обрезки текста. Первый — это, как уже было показано плагином, описанным выше, прямой учет количества символов внутри выбранного блока. Его серьезным недостатком является то, что в данном случае нужно отдельно реализовывать учет открываемых HTML тегов (ведь мы же часто имеем не только простой не отформатированный текст?). Ну а второй вариант рассмотрим в одной из следующих статей.
Скачать рабочий пример
1. Подключаем необходимые скрипты:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/jquery.shorten.1.0.js"></script>
2. Задаем начальные настройки плагина, их немного:
$(document).ready(function() {
$(".content").shorten({
"showChars" : 150, // - длина текста в символах.
"moreText" : "Подробнее", // - текст "читать далее".
"ellipsesText" : "...", // - вместо многоточия можно вписать к примеру и "[...]".
"lessText" : "Скрыть текст", // - текст возврата в исходное состояние.
});
});
3. Собственно, осталось только создать саму разметку нашего HTML документа:
<div class="content"> Lacinia vel nec lobortis lacus habitant <!-- ... --> </div> <div class="content"> Elit condimentum justo id ligula Pellentesque <!-- ... --> </div> <div class="content"> Tellus ultrices nascetur odio habitant et urna <!-- ... --> </div>
Вот в общем-то и все о чем я хотел сегодня рассказать.
Достаточно долго искал такой скрипт, и нашел на вашем сайте. Очень полезная вещь для сайта. Рекомендую.
Спасибо
$(document).ready(function() {
$(«.content»).shorten({
«showChars» : 150, // — длина текста в символах.
«moreText» : «Подробнее», // — текст «читать далее».
«ellipsesText» : «…», // — вместо многоточия можно вписать к примеру и «[...]«.
«lessText» : «Скрыть текст», // — текст возврата в исходное состояние.
});
}); — куда это прописывать???
Скрипт обрезает теги. Это возможно как-нибуть исправить?
Прошу прощения за навязчивость, недавно только увлекся сайтостроением, еще совсем ничего не знаю.
Почитайте информацию на http://javascript.ru/