Jquery читать далее. Автоматическое обрезание длинного текста в спойлер на jQuery

Многие рассматривают создание своего собственного плагина, как нечто трудное и сложное. Для jQuery это совсем не так. Если у вас есть базовые знания jQuery кодирования, создать свой собственный плагин вам не составит никакого труда. Данное руководство шаг за шагом опишет, как создать свой собственный плагин. Плагин позволит скрыть лишний текст . Допустим, на вашей главной странице есть такой виджет, как «подсказка дня». Наш плагин позволит нам урезать его под нужную нам длину и создаст ссылку, при клике на которой виджет будет расширяться, чтобы полностью вывести содержащийся в нем контент.

Ниже приведен рабочий пример:

Заметьте, что в случае, когда JavaScript отключен (или не поддерживается) контент будет показываться полностью.
Готовы? Тогда начнем…

Шаг 1

В первом шаге мы добавляем свой собственный метод обертки (truncate) в jQuery. Так как наш метод создается как свойство объекта $.fn , то в теле этого метода контекст функции (this) будет ссылаться на обернутый набор.

$.fn.truncate = function(options){ return.this.each(function(){ // код приминительно для каждого элемента из обернутого набора }); };

Как вы уже, наверное, слышали, разработчикам плагинов не следует использовать псевдоним $ , так как могут возникнуть конфликты с другими библиотеками. Это верно лишь частично. Следующий фрагмент такой же, как и первый, за одним исключением: мы заключили объявление во внешнюю функцию, которая обеспечивает соответствие псевдонима $ идентификатору jQuery . Мы продолжим использовать $ .

(function($){ $.fn.truncate = function(options){ return.this.each(function(){ // код приминительно для каждого элемента из обернутого набора }); }; })(jQuery);

Шаг 2

Прежде чем двигаться дальше, давайте создадим простую тестовую страницу, на которой мы и будем тестировать наш плагин. Создайте страницу и дайте имя любое_какое_захотите.html. Вставьте следующий код. Как видите, плагин и библиотеку jQuery я поместил в папку js. Заметьте, что в этом фрагменте плагин уже запускается, хотя нами еще не написан код, отвечающий за его поведение.

Truncation плагин демо-примерt $().ready(function() { $(".tip").truncate(); }); Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fringilla, purus a ultrices blandit, odio ante scelerisque neque, vitae imperdiet odio velit ac nisl. Sed tortor metus, placerat condimentum, feugiat in, feugiat adipiscing, mi. Donec pulvinar sem vitae leo. Vestibulum eget lectus et ligula hendrerit pharetra. Sed porta justo ac nisl. Aliquam nisi erat, pellentesque sed, sagittis eu, fringilla sit amet, dolor. Nam ac mi. Pellentesque pede purus, mattis aliquet, semper nec, cursus a, orci. Duis bibendum nibh ac massa. Integer eu tortor. Aenean convallis quam at nunc. Nunc mollis tincidunt nisi. Suspendisse mauris odio, iaculis ut, feugiat vitae, ultrices in, tortor. Quisque at elit. In hac habitasse platea dictumst.

Шаг 3

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

Пока не будем изменять параметры со значениями по умолчанию, продемонстрируем это позже.

(function($){ $.fn.truncate = function(options) { var defaults = { length: 300, minTrail: 20, moreText: "more", lessText: "less", ellipsisText: "..." }; var options = $.extend(defaults, options); return this.each(function() { }); }; })(jQuery);

jQuery.extend
Расширяет объект другими объектами и возвращает модифицированный объект.

Шаг 4

Закончив наши вступительные рассуждения, перейдем к кодированию функциональности плагина. Как вы уже видели, плагин возвращает this.each(...) . Метод each() выполняет обход всех элементов в обернутом наборе. Поэтому если, мы вызвали $("p").truncate() , код, который мы вскоре напишем, будет исполняться для каждого тега р. Так как мы возвращаем (return) обернутый набор, полученный как результат метода each , то наш метод может входить в состав цепочек методов.

Полагая, что вы хорошо знакомы с jQuery, не буду детально описывать, как работает функция (но все же описал). Если что-то в коде будет непонятно, обратитесь к документации или задайте вопрос в комментариях. Для придания плагину законченного вид, обновите его, чтобы он соответствовал следующему:

(function($){ $.fn.truncate = function(options) { var defaults = { length: 300, minTrail: 20, moreText: "читать полностью", lessText: "спрятать", ellipsisText: "..." }; var options = $.extend(defaults, options); return this.each(function() { // элемент DOM текущей итерации obj = $(this); // извлекаем содержимое элемента в виде HTML разметки var body = obj.html(); if(body.length > options.length + options.minTrail) { // возвращаем позицию, после числа (options.length), с которой начинается совпадение // в нашем случае это пробел var splitLocation = body.indexOf(" ", options.length); // если совпадение найденно то if(splitLocation != -1) { // прячем текст подсказки var splitLocation = body.indexOf(" ", options.length); var str1 = body.substring(0, splitLocation); var str2 = body.substring(splitLocation, body.length - 1); obj.html(str1 + "" + options.ellipsisText + "" + "" + str2 + ""); obj.find(".truncate_more").css("display", "none"); // вставляем ссылку "читать полностью" в конец сцществующего содержимого obj.append("" + "" + options.moreText + "" + ""); //устанавливаем событие onclick для ссылки "читать полностью"/"спрятать" var moreLink = $(".truncate_more_link", obj); var moreContent = $(".truncate_more", obj); //дополнительный текст за текстом, например "..." var ellipsis = $(".truncate_ellipsis", obj); moreLink.click(function() { if(moreLink.text() == options.moreText) { moreContent.show("normal"); moreLink.text(options.lessText); ellipsis.css("display", "none"); } else { moreContent.hide("normal"); moreLink.text(options.moreText); ellipsis.css("display", "inline"); } return false; }); } } // end if }); }; })(jQuery);

Отметьте, что всякий раз, когда мне нужно было выбрать какой-либо элемент внутри плагина, я использовал obj в качестве контекста (пример: moreLink = $(".truncate_more_link", obj)). Это необходимо, чтобы привязать каждую выборку к текущему усекаемому элементу. Без такого контекста можно получить непредсказуемые результаты.

Вот и все – ваш первый jQuery плагин! Хотя это еще не все, ранее я пообещал, что продемонстрирую замену значений у параметров, которые заданы по умолчанию. В следующем примере значение каждого параметра заменено (вполне допустимо менять лишь некоторые параметры).

Замените скрипт в вашей тестовой страницы на следующий:

$().ready(function() { $(".tip").truncate({ length: 120, minTrail: 10, moreText: "show more", lessText: "show less", ellipsisText: " " }); });

Результат можно увидеть в демо-примере.

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

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

TextTailor - обрезка текста в зависимости от высоты блокаTextTailor - это очень полезный плагин, который поможет обрезать текст (поставить cut или ссылку «подробнее») так, чтобы он максимально заполнил контейнер, в котором находится. То есть, он позволяет обрезать текст в зависимости от высоты родительского блока и убрать все, что не поместилось, под кат. Единственное условие для корректной работы скрипта - это наличие у блока заданной высоты в фиксированном или процентном значении.
TextTailor часто используется на страницах со списком статей в виде плитки, когда блоки с превью топиков расположены по несколько штук в ряд и при этом заголовки статей разного объема. Дополнительно это может усложниться, если ширина этих блоков меняется, например, в . В таких случаях, как правило, количество символов краткого описания (аннотации) грубо ограничено, и из-за того, что заголовки имеют разную высоту, в блоках получаются пустые области. TextTailor поможет обойти эту проблему и заполнит весть блок текстом .

P/S Возможно кому-то будет полезно. Когда-то мы публиковали плагин под названием flexMenu , который регулирует количество пунктов в зависимости от ширины родительского блока. Все, что не помещается, отправляется в выпадающий список. Он был с статье под названием "5 адаптивных меню для разных задач ".

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

Succinct - обрезка текста по количеству символовSuccinct - jQuery плагин, который позволяет поставить ссылку «Подробнее» или многоточие после заданного количества символов в тексте. Все что не поместилось - обрезается.
По сути, это стандартный подход в обрезке текста, только средствами jQuery, а не на PHP .

Readmore.js - скрытие текста под спойлерReadmore.js позволяет скрыть часть текста под спойлер . Скрипт, после заданного количества символов в тексте ставит кнопку «Подробнее», при нажатии на которую появляется скрытая часть текста с эффектом «выезда» вниз, сдвигая остальной контент.

FitText - масштабирование текста по ширине экранаFitText - jQery плагин, который динамически изменяет размер шрифта в зависимости от ширины экрана или родительского блока. Отлично подойдет для создания заголовков экранов в адаптивных сайтах. Теперь вам не потребуется менять размер шрифта под каждое разрешение экрана.

Auto Line-Height - автоматическое межстрочное расстояниеAuto Line-Height позволяет автоматически рассчитать lineheight (высоту строк) при изменении размера окна. Как правило, применяется в адаптивных сайтах для улучшения читабельности текста на мобильных устройствах.

Bacon - выравнивание текста по кривойBacon - это jQuery плагин, который поможет выровнять текст на странице по заданной окружности или кривой .
Данное решение применяется в работе нечасто, но при мудреной дизайнерской задумке без него не обойтись.

jQSlickWrap - выравнивание текста по изображениюjQSlickWrap позволяет выровнять текст, как вам будет угодно. Часто применяется для выравнивания текста по какому-то предмету, который изображен на картинке . То есть, не по заданным размерам самого , а именно по тому, что изображено на фотографии. На скрине хорошо показан принцип его работы.

Добрый день!

Начнем с самого начала на тот случай, если кто-то вообще ничего не знает о more.

Я не был на море.

– Ладно, не заливай, ни разу не был на море!

– Не довелось, не был…

– Уже постучались на небеса, накачались текиллой, буквально проводили себя в последний путь, а ты на море-то не побывал?!

– Не успел, не вышло…

– Не знал, что на небесах никуда без этого?

к/ф “Достучаться до небес”

Как добавить more

Так вот, какой фрагмент текста отображать в анонсе задается с помощью тега more . Этот тег разделяет статью на две части: вступительную (анонс) и продолжение.

В редакторе WordPress тег more можно вставить с помощью кнопки в панели инструментов.

1. Визуальный режим редактора:

2. Текстовый режим редактора:

В текстовом режиме, так же можно вручную разделить запись: просто напишите

А теперь важная информация, которую знают далеко не все!

Так вот, есть элементарный способ задавать каждой ссылке после анонса свой уникальный текст!

Сделать это можно, просто написав, нужный текст внутри конструкции с more. Вот так:

Спросите а зачем так делать? Еще прописывать каждый раз текст.

Честно говоря, сам такой =) Уже 84 статьи опубликовал, и только “расчехлился” по этому поводу.

Как изменить текст?

1. Первый – самый простой способ – это добавить ваш текст (обычно в index.php) в функцию the_content

2. Второй способ с использованием хука the_content_more_link . Просто добавьте следующий код в и задайте желаемый текст ссылки.

function my_more_link($more_link, $more_link_text) { return str_replace($more_link_text, "Продолжить чтение...", $more_link); } add_filter("the_content_more_link", "my_more_link", 10, 2);

Этот способ удобен тем, что вам не нужно искать по файлам шаблона, где именно у вас используется the_content (это не обязательно в index.php, может быть и content.php и что угодно.) Здесь вы работаете только в файле functions.php.

3. В третьем пункте просто сохраню для истории способ с использованием произвольного поля WordPress.

Вписывание текста непосредственно в , конечно же проще и понятней.

Здесь просто откорректируйте вызов функции the_content одним из двух способов.

Как убрать #more из ссылки

В коде этот якорь устанавливается таким вот способом: