Triky s odkazom „čítať viac“. Automatické orezanie dlhého textu na spojler na jQuery Jquery more

Dobrý deň

Začnime od začiatku pre prípad, že by niekto nevedel o viac vôbec nič.

pri mori som nebol.

- Dobre, nenapĺňaj to, nikdy som nebol pri mori!

- Nie, ja nie...

- Už vyklopení do neba, napumpovaní tequilou, doslova strávení v sebe posledný spôsob ale ty si nebol pri mori?!

- Nezvládol som to, nevyšlo to ...

- Nevedel si, že v nebi sa bez toho nikam nedostaneš?

k / f "Knockin' on Heaven"

Ako pridať ďalšie

Pomocou značky sa teda nastavuje, ktorý text sa má v oznámení zobraziť viac. Táto značka rozdeľuje článok na dve časti: úvodnú (oznámenie) a pokračovanie.

V editore WordPress je možné vložiť značku viac pomocou tlačidla na paneli nástrojov.

1. Režim vizuálneho editora:

2. Režim textového editora:

V textovom režime môžete položku rozdeliť aj manuálne: stačí písať

A teraz dôležitá informáciačo nie každý vie!

Existuje teda základný spôsob, ako nastaviť každý odkaz po oznámení s vlastným jedinečným textom!

Môžete to urobiť jednoduchým napísaním požadovaného textu do konštrukcie s ďalšími. Páči sa ti to:

Opýtajte sa, prečo to robíte? Stále predpisovať zakaždým text.

Aby som bol úprimný, sám som taký =) Publikoval som už 84 článkov a len o tom som „odhalil“.

Ako zmeniť text?

1. Prvý - najjednoduchší spôsob - je pridať svoj text (zvyčajne v index.php) do funkcie the_content

2. Druhý spôsob pomocou háku the_content_more_link. Stačí pridať nasledujúci kód a nastaviť požadovaný text odkazu.

function my_more_link($more_link, $more_link_text) ( return str_replace($more_link_text, "Continue reading...", $more_link); ) add_filter("the_content_more_link", "my_more_link", 10, 2);

Táto metóda je pohodlná, pretože nemusíte prehľadávať súbory šablón, kde presne používate the_content (v index.php to nie je potrebné, môže to byť content.php alebo čokoľvek iné.) Tu pracujete iba v súbore functions.php súbor.

3. V treťom bode si len uložím do histórie metódu pomocou vlastného poľa WordPress.

ID, "custom_more_text", true); if(!$custom_more) ( $custom_more = "Pokračovať v čítaní článku »"; ) the_content($custom_more); ?>

Zadávanie textu priamo doje, samozrejme, jednoduchšia a prehľadnejšia.

Tu stačí opraviť volanie funkcie obsah jedným z dvoch spôsobov.

Ako odstrániť #more z odkazu

V kóde je táto kotva nastavená nasledujúcim spôsobom:

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