Трикове с връзка „прочетете повече“. Автоматично изрязване на дълъг текст в спойлер на jQuery Jquery повече

Добър ден

Нека започнем отначало, в случай че някой не знае нищо повече.

Не съм била на море.

- Добре, не пълнете, никога не съм ходил на море!

- Не съм, не съм...

- Вече почукаха на небето, напомпаха се с текила, буквално се похарчиха последен начин, а ти не си ходил на море?!

- Не успях, не се получи ...

- Не знаехте, че в рая не можете да отидете никъде без него?

k / f "Knockin' on Heaven"

Как да добавите повече

И така, коя част от текста да се показва в съобщението се задава с помощта на етикета Повече ▼. Този етикет разделя статията на две части: уводна (анонс) и продължение.

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

1. Режим на визуален редактор:

2. Режим на текстов редактор:

В текстов режим можете също ръчно да разделите записа: просто пишете

И сега важна информациякоето не всеки знае!

И така, има елементарен начин да зададете всеки линк след анонса със собствен уникален текст!

Можете да направите това, като просто напишете желания текст вътре в конструкцията с още. Като този:

Попитайте защо правите това? Все още предписвайте всеки път текста.

Честно казано, аз самият съм такъв =) Вече съм публикувал 84 статии и само „разкрих“ за това.

Как да променя текста?

1. Първият - най-лесният начин - е да добавите вашия текст (обикновено в index.php) към функцията_content

2. Вторият начин с помощта на кука the_content_more_link. Просто добавете следния код и задайте желания текст на връзката.

функция my_more_link($more_link, $more_link_text) ( връща 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.

ID, "custom_more_text", true); if(!$custom_more) ( $custom_more = "Продължете да четете статията »"; ) the_content($custom_more); ?>

Въвеждане на текст директно ве, разбира се, по-просто и по-ясно.

Тук просто коригирайте извикването на функцията съдържаниетопо един от двата начина.

Как да премахнете #more от връзка

В кода тази котва е зададена по следния начин:

Шаг 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("

"); //устанавливаем событие 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: " " }); });

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

Задача достаточно стандартная, однако поиск подходящего jquery-плагина не увенчался успехом, поскольку во всех плагинах, которые удалось найти, ограничения задаются не количеством символов, а высотой блока. То есть указывается высота контейнера, и плагин обрезает текст, выходящий за его пределы. В интернете можно найти весьма удобные варианты таких плагинов, например, Readmore.js и dotdotdot . Причем последний даже может отслеживать изменение размера окна и автоматически обновлять результат.

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

Можно выделить несколько преимуществ данного подхода.

1. Можно быть уверенным, что в блоке будет отображаться объем текста, несущий смысловую нагрузку даже в свернутом состоянии.
2. Не требуются лишние обработчики на изменение размера окна, которые бы постоянно выполняли проверку того, сколько текста влезает в блок.

При реализации также необходимо было учесть две вещи, влияющих на красоту результата. Во-первых, нужно чтобы текст обрезался по целому слову. Во-вторых, избежать ситуации «раскрывать слишком мало» – может произойти в случае, когда общее количество символов в блоке чуть больше заданного значения, по которому следует производить обрезку, например, на 50-100 символов. Если параметры не будет указаны, то модуль будет использовать дефолтные значения.

Итак, алгоритм задачи достаточно прост:

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

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

// формирование анонса person.cutBrief = function() { var tmp, i = 0, // счетчик циклов j = 0, // счетчик циклов html = data.html, // html блока htmlLength = html.length, // количество символов html блока count = 0, // счетчик текстовых символов countFlag = true, // текущий символ не является html-разметкой endCharsLen = ENDCHARS.length, // размер массива символов, указывающих на окончание слова end = htmlLength, // позиция конца анонса при поиске resultLimit = data.limit.total - data.limit.delta, // требуемое количество символов tagName, // название тега tagStack = ; // стек тегов, которые необходимо закрыть в конце анонса if (data.count > data.limit.total) { // формируем анонс for (; i < htmlLength; i++) { // если открывается тег if (html[i] === "<") { countFlag = false; // символ не последний if (i < htmlLength - 1) { // тег является закрывающим if (html === "/") { tmp = html.indexOf(">", i+1); if (tmp > 0) { // верный формат закрытия тега tagName = html.substr(i+2, tmp-i-2); // обнаруженный тег должен иметь закрывающую часть? if ($.inArray(tagName, TAGDIC) >= 0) { tagStack.pop(); } } } else { // тег является открывающим // следующий символ - любая латинская буква? if (/\w/gi.test(html)) { // получение имени тега и опредение его на необходимость закрытия tmp = html.indexOf(">", i+1); if (tmp > 0) { tagName = html.substr(i+1, tmp-i-1); // тег должен иметь закрывающую часть if ($.inArray(tagName, TAGDIC) >= 0) { tagStack.push(tagName); } } else { // не является тегом countFlag = true; } } else { // не является тегом countFlag = true; } } } } // инкрементим счетчик текстовых символов if (countFlag) { count++; } // если закрывается тег if (html[i] === ">") { countFlag = true; } // дошли до конца требуемого размера анонса if (count >= resultLimit) { // текущий символ не является концом слова if ($.inArray(html[i], ENDCHARS) < 0) { // символ не последний if (i < htmlLength - 1) { // следующий символ тоже не конец слова if ($.inArray(html, ENDCHARS) < 0) { // ищем первое вхождение каждого символа из набора и выбираем ближайший for (; j < endCharsLen; j++) { tmp = html.indexOf(ENDCHARS[j], i+1); if ((tmp > 0) && (tmp < end)) { end = tmp; } }; i = end; } } } else { // слово закончилось целиком count--; } break; } }; // вырезаем кусок html data.brief = html.substr(0, i); // добавляем точки data.brief += opt.ellipsis; // закрываем открытые теги for (i = tagStack.length - 1; i >= 0; i--) { data.brief += ""; }; } else { // не обрезаем data.brief = html; } };

Применяется плагин стандартно:

$(".b-block--first").readmore();

В плагине предусмотрены следующие параметры:

• ellipsis {string} – символы, которые будут выводиться в конце анонса;
• textOpen {string} – текст ссылки в свернутом состоянии;
• textClose {string} – текст ссылки в развернутом состоянии;
• callback {function} – функция, исполняющаяся после раскрытия/закрытия блока;
• brief {integer} – максимальное количество символов анонса, уменьшенное на величину addition;
• addition {integer} – минимальное количество символов раскрываемой части текста;
• smoothly {integer} – время плавного раскрытия/закрытия блока в миллисекундах.

Следует заметить, что callback-функция срабатывает только после окончания анимации текста, которая выполняется на jquery с помощью метода animate, и принимает два входных параметра: ссылку блок и текущее состояние.

Ниже приведен пример того, как можно в зависимости от состояния блока, выполнять какие-либо свои действия:

$(".b-block--second").readmore({ ellipsis: "[...]", textOpen: "Открыть", textClose: "Закрыть", callback: function(self, state) { state ? self.css("background", "#e74c3c") : self.css("background", "#3498db"); }, brief: 500, addition: 100 });

CSS в примере по минимуму, можно и вовсе без него обойтись (код приведен на SCSS):

B-readmore { padding: 15px 0 0 0; &__link { color: #000; text-decoration: underline; &:hover, &:focus, &:active { color: #000; text-decoration: none; } } &__open { display: inline-block; } &__close { display: none; } &--opened & { &__open { display: none; } &__close { display: inline-block; } } }

Оцениваем и комментируем, как лучше сделать спойлер для сайта по задаваемому количеству символов.

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

Мы в своей работе очень часто используем или использовали раньше эти плагины. Итак. К вашему вниманию 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 позволяет выровнять текст, как вам будет угодно. Часто применяется для выравнивания текста по какому-то предмету, который изображен на картинке . То есть, не по заданным размерам самого , а именно по тому, что изображено на фотографии. На скрине хорошо показан принцип его работы.