JQuery текст и его обрезка

Наверняка на многих популярных ресурсах вы могли заметить такой занимательный функционал: если комментарий или вообще какой-то там кусочек текста слишком велик по объему, то он динамично сворачивается JavaScript-ом до заданной длины. Это достаточно легко можно пристроить и на ваши сайты, — благо есть соответствующий JQuery плагин.

Обратите внимание! Вообще существует, как минимум два варианта такой обрезки текста. Первый — это, как уже было показано плагином, описанным выше, прямой учет количества символов внутри выбранного блока. Его серьезным недостатком является то, что в данном случае нужно отдельно реализовывать учет открываемых HTML тегов (ведь мы же часто имеем не только простой не отформатированный текст?). Ну а второй вариант рассмотрим в одной из следующих статей.

JQuery текст с динамичной обрезкой

Скачать рабочий пример

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>

Вот в общем-то и все о чем я хотел сегодня рассказать.

Опубликовано 6-08-2013 в 16:39


Комментариев к записи: 4

  1. Достаточно долго искал такой скрипт, и нашел на вашем сайте. Очень полезная вещь для сайта. Рекомендую.

    Спасибо

  2. id49788920:

    $(document).ready(function() {

    $(«.content»).shorten({
    «showChars» : 150, // — длина текста в символах.
    «moreText» : «Подробнее», // — текст «читать далее».
    «ellipsesText» : «…», // — вместо многоточия можно вписать к примеру и «[...]«.
    «lessText» : «Скрыть текст», // — текст возврата в исходное состояние.
    });

    }); — куда это прописывать???

  3. id49788920:

    Скрипт обрезает теги. Это возможно как-нибуть исправить?
    Прошу прощения за навязчивость, недавно только увлекся сайтостроением, еще совсем ничего не знаю.

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

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

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











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Blogroll:

  • обрезка старых плодовых деревьев

Последние твиты