jquery прочетете повече. jQuery автоматично изрязва дългия текст в спойлер
Мнозина смятат създаването на собствен плъгин за нещо трудно и сложно. За jQuery това изобщо не е така. Ако имате основни познания за кодирането на jQuery, създаването на ваш собствен плъгин е лесно. Това ръководство ще опише стъпка по стъпка как да създадете свой собствен плъгин. Плъгинът ще позволи скриване на допълнителен текст. Да кажем на вашия начална страницаима такава джаджа като "съвет на деня". Нашият плъгин ще ни позволи да го съкратим до дължината, от която се нуждаем, и да създадем връзка, която при щракване ще разшири джаджата до оттеглянесъдържанието, което съдържа.
По-долу е даден работещ пример:
Имайте предвид, че когато JavaScript е деактивиран (или не се поддържа), съдържанието ще се показва изцяло.
Готов? Тогава да започваме...
Етап 1
В първата стъпка добавяме собствен метод за обвивка (truncate) към jQuery. Тъй като нашият метод е създаден като свойство на обекта $.fn, в тялото на този метод контекстът на функцията (this) ще препраща към обвития набор.
$.fn.truncate = function(options)( return.this.each(function()( // код за всеки елемент от обвития набор )); );
Както вероятно сте чували досега, разработчиците на плъгини не трябва да използват псевдонима $, тъй като може да има конфликти с други библиотеки. Това е вярно само отчасти. Следващият фрагмент е същият като първия, с едно изключение: увихме декларацията във външна функция, която съпоставя псевдонима $ с jQuery ID. Ще продължим да използваме $.
(функция($)( $.fn.truncate = функция(опции)( return.this.each(функция()( // код за всеки елемент в обвития набор )); ); ))(jQuery);
Стъпка 2
Преди да продължим, нека създадем проста тестова страница, където можем да тестваме нашия плъгин. Създайте страница и я наименувайте whatever_you want.html. Поставете следния код. Както можете да видите, поставих плъгина и библиотеката jQuery в папката js. Забележете, че в този фрагмент плъгинът вече работи, въпреки че все още не сме написали кода за неговото поведение.
Стъпка 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() , кодът, който ще напишем скоро, ще бъде изпълнен за всеки p таг. Тъй като връщаме обвития набор, върнат като резултат от метода each, нашият метод може да бъде част от вериги от методи.
Ако приемем, че сте запознати с jQuery, няма да описвам подробно как работи функцията (но го направих). Ако нещо в кода не е ясно, вижте документацията или задайте въпрос в коментарите. За да придадете на приставката завършен вид, актуализирайте я, за да съответства на следното:
(function($)( $.fn.truncate = function(options) ( var defaults = ( length: 300, minTrail: 20, moreText: "read full", lessText: "hide", 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), където започва съвпадението // в нашия случай това е интервална променлива 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("
Обърнете внимание, че всеки път, когато трябваше да избера който и да е елемент в плъгина, използвах obj като контекст (пример: moreLink = $(".truncate_more_link", obj)). Това е необходимо, за да се обвърже всяка селекция с текущия съкратен елемент. Без такъв контекст могат да се получат непредвидими резултати.
Това е всичко - вашият първи jQuery плъгин! Въпреки че това не е всичко, обещах по-рано, че ще ви покажа как да променяте стойностите по подразбиране за параметрите. В следващия пример стойността на всеки параметър се заменя (напълно приемливо е да се променят само някои от параметрите).
Заменете скрипта във вашата тестова страница със следното:
$().ready(function() ( $(".tip").truncate(( length: 120, minTrail: 10, moreText: "покажи повече", lessText: "покажи по-малко", ellipsisText: " " )); ));
Резултатът може да се види в демото.
Плъгините от тази колекция не са за създаване на дрънкулки и различни красоти, например анимация или други подобни, но за да се гарантира правилното функциониране на уеб страницата. Те ще са необходими в случай, че стане безсилен пред задачата. Например, ако имате нужда автоматизирайте изрязването на текст по брой знаци или по височина на блокаако ви трябва бързо и правилно настройте типография в отзивчив сайт, както и с хитър подравняване на текстаи т.н.
Ние много често използваме или сме използвали тези добавки в нашата работа. Така. За вашето внимание 10 най-добри jQuery текстови добавки, което ще помогне за бързото и ефективно реализиране на нестандартна дизайнерска идея.
TextTailor - изрязване на текст в зависимост от височината на блока
TextTailor е много полезен плъгин, който ще ви помогне изрязан текст(поставете cut или link "more"), така че да запълни максимално контейнера, в който се намира. Тоест позволява изрязване на текст въз основа на височината на родителския блоки премахнете всичко, което не се побира под котката. Единственото условие за коректна работа на скрипта е блокът да има зададена височина във фиксирана или процентна стойност.TextTailor често се използва на страници със списък от статии под формата на плочка, когато блокове с визуализации на теми са разположени няколко части в един ред и в същото време заглавия на статии с различни размери. Освен това това може да стане по-сложно, ако ширината на тези блокове се промени, например в . В такива случаи, като правило, броят на знаците на кратко описание (реферат) е силно ограничен и поради факта, че заглавията са с различна височина, в блоковете се получават празни области. TextTailor ще ви помогне да заобиколите този проблем и ще запълни блока на съобщението с текст.
P/SМоже би някой ще бъде полезен. Веднъж публикувахме плъгин, наречен flexMenu, който регулира броя на елементите в зависимост от ширината на родителската кутия. Всичко, което не пасва, се изпраща в падащия списък. Той беше със статия, озаглавена "5 адаптивни менюта за различни задачи".
В допълнение към всичко това, плъгинът изпълнява и втора, не по-малко важна функция. С него можете мащабирайте многоредовия текст въз основа на размера на родителската кутия или екрана. Всичко, което трябва да направите, е да зададете необходимите параметри, плъгинът ще свърши останалото вместо вас. Ще автоматично променете размера на точката и размера на шрифта спрямо размера на екранапотребител за максимален комфорт при четене.
Кратко - изрязване на текст по брой знаци
Succinct е плъгин за jQuery, който ви позволява да поставите връзка „Прочетете повече“ или многоточие след определен брой знаци в текста. Всичко, което не пасва, се отрязва.Всъщност това е стандартният подход при изрязване на текст, само с jQuery, не с PHP.
Readmore.js - скриване на текст под спойлер
Readmore.js позволява скрийте част от текста под спойлера. Скриптът след даден брой знаци в текста поставя бутона "Още", при натискане се появява скрита част от текста с ефекта на "заминаване" надолу, измествайки останалото съдържание.
FitText - мащабиране на текст спрямо ширината на екрана
FitText е jQuery плъгин, който динамично променя размера на шрифта въз основа на ширината на екранаили родителски блок. Чудесно за създаване на екранни заглавия в адаптивни уебсайтове. Сега не е необходимо да променяте размера на шрифта за всяка резолюция на екрана.
Auto Line-Height - автоматично редово разстояние
Автоматичната височина на линията позволява автоматично изчисляване на височината на линията(височина на реда), когато прозорецът е преоразмерен. Като правило се използва в адаптивни сайтове за подобряване на четливостта на текста на мобилни устройства.
Бекон - извито подравняване на текста
Bacon е jQuery плъгин, който ще ви помогне подравнете текст на страница към даден кръг или крива.Това решение рядко се използва в работата, но със сложна идея за дизайн не можете без него.
jQSlickWrap - подравняване на текст към изображение
jQSlickWrap ви позволява да подравнявате текст, както желаете. Често се използва за подравняване на текст по някакъв обект, който е показан на снимката. Тоест не според зададените размери на себе си, а точно според това, което е показано на снимката. Екранната снимка показва как работи.
Добър ден!
Нека започнем отначало, в случай че някой не знае нищо повече.
Не съм била на море.
- Добре, не пълнете, никога не съм ходил на море!
- Не съм, не съм...
- Вече почукаха на небето, напомпаха се с текила, буквално се похарчиха последен начин, а ти не си ходил на море?!
- Не успях, не се получи ...
- Не знаехте, че в рая не можете да отидете никъде без него?
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 от връзка
В кода тази котва е зададена по следния начин: