Knep med länken "läs mer". Dölja och visa extra text - jQuery Auto Line-Height plugin - automatiskt radavstånd

Uppgiften är ganska standard, men sökningen efter en lämplig jquery-plugin lyckades inte, eftersom i alla plugins som hittades är begränsningarna inte satta av antalet tecken, utan av blockets höjd. Det vill säga, höjden på behållaren är specificerad, och plugin beskär texten som sträcker sig utanför dess gränser. På Internet kan du hitta ganska bekväma alternativ plugins som Readmore.js och dotdotdot. Dessutom kan den senare till och med övervaka förändringar i fönsterstorlek och automatiskt uppdatera resultatet.

Problemet var dock att sajten är responsiv och blocket tar olika bredd beroende på webbläsarfönstrets bredd. Som ett resultat kan en situation uppstå där det finns väldigt få karaktärer i blocket. Naturligtvis kan du använda någon algoritm för att ändra höjden på blocket när du ändrar storlek på fönstret, men det beslutades att inte göra någon form av tillägg över vissa färdig lösning, men skriv ett eget litet plugin som kommer att trimma text i jquery baserat på ett givet antal tecken.

Det finns flera fördelar med detta tillvägagångssätt.

Du kan vara säker på att blocket kommer att visa en textvolym som bär en semantisk belastning även när den är komprimerad.

Det finns inget behov av extra fönsterstorlekshanterare som ständigt kontrollerar hur mycket text som får plats i blocket.

Under implementeringen var det också nödvändigt att ta hänsyn till två saker som påverkar resultatets skönhet. För det första måste texten skäras av med ett helt ord. För det andra, undvik situationen att "avslöja för lite" - vilket kan hända när det totala antalet tecken i blocket är något mer än det angivna värdet för att trimma, till exempel med 50-100 tecken. Om parametrar inte anges kommer modulen att använda standardvärden.

Så, problemalgoritmen är ganska enkel:

Den mest tidskrävande delen av att implementera ett html-spoilerskript är att få meddelandet från hela texten i blocket, eftersom blocket inte bara kan innehålla text, utan uppmärkning formaterad med html-taggar.

Nedan finns en funktion som ansvarar för att klippa ut en bit från html-koden vars antal tecken som inte är html-kodning är lika med värdet som anges i parametrarna eller högre i slutet av det sista ordet i meddelandet.

// skapa ett meddelande person.cutBrief = function() ( var tmp, i = 0, // cykelräknare j = 0, // cykelräknare html = data.html, // block html htmlLength = html.length, // kvantitet html-tecken blockantal = 0, // räknare texttecken countFlag = true, // det aktuella tecknet är inte html-markering endCharsLen = ENDCHARS.length, // storleken på den array av tecken som anger slutet på ordet end = htmlLength, // positionen för slutet av meddelandet vid sökning resultLimit = data.limit.total - data limit.delta, // krävs antal tecken tagName, // tag name tagStack = ; // hög med taggar som måste stängas i slutet av tillkännagivandet if (data.count > data.limit.total) ( // bildar ett meddelande för (; i< htmlLength; i++) { // если открывается тег if (html[i] === "", i+1); if (tmp >0) ( // korrekt format för stängningstaggnamn = html.substr(i+2, tmp-i-2); // ska den upptäckta taggen ha en avslutande del? if ($.inArray(tagnamn, TAGDIC) >= 0) ( tagStack.pop(); ) ) ) else ( // taggen är den inledande // nästa tecken är en latinsk bokstav? om (/\w/gi.test(html)) ( // får taggnamn och avgöra om det måste stängas tmp = html.indexOf(">", i+1 if (tmp > 0) (tagnamn = html.substr(i+1, tmp-i-1); / /-taggen måste ha en avslutande del om ($. inArray(tagName, TAGDIC) >= 0) ( tagStack.push(tagName); ) ) else ( // är inte en tagg countFlag = true; ) ) else ( // är inte en tagg countFlag = true; ) ) ) ) // öka räknaren för texttecken if (countFlag) ( count++; ) // om taggen är stängd if (html[i] === ">") ( countFlag = sann;< 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 ( // trimma inte data.brief = html; ) );

Plugin används som standard:

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

Insticksprogrammet tillhandahåller följande parametrar:

• ellips (sträng) – tecken som kommer att visas i slutet av tillkännagivandet;
• textOpen (sträng) – länkens text i det komprimerade tillståndet;
• textClose (sträng) – länktext i expanderat tillstånd;
• callback (funktion) – en funktion som exekveras efter att ett block har öppnats/stängts;
• kort (heltal) – maximalt antal meddelandetecken, reducerat med tillägg;
• addition (heltal) – det minsta antalet tecken i den utökade delen av texten;
• smidigt (heltal) – tid för mjuk öppning/stängning av blocket i millisekunder.

Det bör noteras att återuppringningsfunktionen utlöses först efter slutet av textanimeringen, som utförs i jquery med animeringsmetoden, och tar två ingångsparametrar: blocklänken och det aktuella tillståndet.

Nedan är ett exempel på hur du, beroende på blockets tillstånd, kan utföra någon av dina åtgärder:

$(".b-block--second").readmore(( ellips: "[...]", textOpen: "Öppna", textClose: "Stäng", callback: function(self, state) ( state ? self .css("bakgrund", "#e74c3c") : self.css("bakgrund", "#3498db" ), kort: 500, tillägg: 100 ));

CSS i exemplet är minimal, du kan klara dig helt utan den (koden ges i SCSS):

B-readmore ( utfyllnad: 15px 0 0 0; &__länk ( färg: #000; text-decoration: underline; &:hover, &:focus, &:active ( color: #000; text-decoration: none; ) ) &__öppna ( display: inline-block; ) &__close ( display: none; ) &--opened & ( &__open ( display: none; ) &__close ( display: inline-block; ) ) )

Vi utvärderar och kommenterar hur man bäst gör en spoiler för sajten utifrån det angivna antalet tecken.

Plugins från denna samling är inte till för att skapa prylar och olika skönheter, till exempel animationer eller liknande, utan för att säkerställa att webbsidan fungerar korrekt. De kommer att behövas i det fall man blir maktlös inför uppgiften. Till exempel om du behöver automatisera texttrimning med antal tecken eller blockhöjd, om du snabbt och korrekt behöver ställa in typografi på en responsiv webbplats, samt med komplex textjustering osv.

Vi använder mycket ofta eller har använt dessa plugins i vårt arbete. Så. Här är de 10 bästa jQuery-plugins för att arbeta med text, som hjälper dig att snabbt och effektivt implementera en icke-standard designidé.

TextTailor - trimma text beroende på höjden på blocket TextTailor är ett mycket användbart plugin som hjälper dig att trimma text (lägg klipp eller en "mer detaljer"-länk) så att den fyller behållaren där den är placerad så mycket som möjligt. Det vill säga att du kan trimma texten beroende på höjden på föräldrablocket och ta bort allt som inte får plats under katten. Det enda villkoret för att skriptet ska fungera korrekt är att blocket har en given höjd i ett fast eller procentuellt värde.
TextTailor används ofta på sidor med artikellista i form av brickor, när block med ämnesförhandsvisningar är ordnade flera i rad och med artikelrubriker av olika storlek. Dessutom kan detta bli mer komplicerat om bredden på dessa block ändras, till exempel i . I sådana fall, som regel, antalet tecken kort beskrivning(anteckningar) är grovt begränsad, och eftersom rubrikerna är av olika höjd, hamnar blocken med tomma ytor. TextTailor hjälper dig att komma runt det här problemet och fylla meddelandeblocket med text.

P/S Kanske är det användbart för någon. Vi publicerade en gång en plugin som heter flexMenu som justerar antalet objekt beroende på bredden på det överordnade blocket. Allt som inte passar skickas till rullgardinsmenyn. Han kom med en artikel som heter "5 adaptiva menyer för olika uppgifter."

Utöver allt detta utför plugin också en andra, inte mindre viktig funktion. Den kan användas för att skala flerradstext beroende på storleken på föräldraenheten eller skärmen. Allt du behöver göra är att konfigurera de nödvändiga parametrarna, plugin-programmet gör resten åt dig. Den kommer automatiskt att ändra teckenstorlek och teckenstorlek i förhållande till användarens skärmstorlek för att säkerställa den mest bekväma läsupplevelsen.

Succinct - trimma text med antalet tecken Succinct är ett jQuery-plugin som låter dig sätta en "Mer detaljer"-länk eller en ellips efter ett angivet antal tecken i texten. Allt som inte passar skärs bort.
Faktum är att detta är en standardmetod för texttrimning, endast med jQuery, inte PHP.

Readmore.js - gömma text under en spoilerReadmore.js låter dig dölja en del av texten under en spoiler. Skriptet, efter ett specificerat antal tecken i texten, placerar en "Mer detaljer"-knapp, när du klickar på den visas en dold del av texten med en "flyttande ut"-effekt nedåt, vilket flyttar resten av innehållet.

FitText - skala text för att passa bredden på skärmen FitText - jQery-plugin som dynamiskt ändrar teckenstorleken beroende på bredden på skärmen eller det överordnade blocket. Perfekt för att skapa skärmrubriker på responsiva webbplatser. Nu behöver du inte ändra teckenstorleken för varje skärmupplösning.

Auto Line-Height - automatisk linjeavståndAuto Line-Height låter dig automatiskt beräkna linjehöjd (linjehöjd) när du ändrar storlek på fönstret. Som regel används det på responsiva webbplatser för att förbättra läsbarheten av text på mobila enheter.

Bacon – justera text längs en kurva Bacon är ett jQuery-plugin som hjälper dig att justera text på en sida längs en given cirkel eller kurva.
Denna lösning används sällan i arbetet, men med en sofistikerad designidé kan du inte klara dig utan den.

jQSlickWrap - Justera text till bild jQSlickWrap låter dig justera text som du vill. Används ofta för att justera text på något ämne som visas på bilden. Det vill säga inte enligt de givna måtten på själva bilen, utan just enligt vad som visas på fotografiet. Skärmdumpen visar tydligt principen för dess funktion.

Många människor ser att skapa sitt eget plugin som något svårt och komplicerat. Detta är inte fallet för jQuery alls. Om du har grundläggande kunskaper om jQuery-kodning blir det enkelt att skapa ditt eget plugin. Denna manual kommer att beskriva steg för steg hur du skapar ditt eget plugin. Insticksprogrammet tillåter dölj extra text. Låt oss säga om din startsida Det finns en sådan widget som "dagens tips". Vårt plugin låter oss klippa det till den längd vi behöver och skapar en länk, när du klickar på vilken widgeten expanderar till helt dra tillbaka innehållet den innehåller.

Nedan är ett fungerande exempel:

Observera att när JavaScript är inaktiverat (eller inte stöds) kommer innehållet att visas i sin helhet.
Redo? Då börjar vi...

Steg 1

I det första steget lägger vi till vår egen inpackningsmetod (truncate) till jQuery. Eftersom vår metod är skapad som en egenskap för $.fn-objektet, kommer funktionskontexten (detta) i kroppen av denna metod att hänvisa till den omslutna uppsättningen.

$.fn.truncate = function(options)( return.this.each(function())( // kod för varje element från den omslutna uppsättningen));

Som du säkert har hört vid det här laget bör plugin-utvecklare inte använda $-aliaset eftersom det kan orsaka konflikter med andra bibliotek. Detta är bara delvis sant. Nästa fragment är detsamma som det första, med ett undantag: vi har avslutat deklarationen i extern funktion vilket säkerställer att $alias matchar jQuery-identifieraren. Vi kommer att fortsätta att använda $.

(function($)( $.fn.truncate = function(options)( return.this.each(function())( // kod för varje element från den omslutna uppsättningen )); ))(jQuery);

Steg 2

Innan vi går vidare, låt oss skapa en enkel testsida där vi ska testa vårt plugin. Skapa en sida och namnge den whatever_you want.html. Klistra in följande kod. Som du kan se placerade jag plugin- och jQuery-biblioteket i js-mappen. Lägg märke till att plugin-programmet redan körs i det här utdraget, även om vi ännu inte har skrivit koden som är ansvarig för dess beteende.

Trunkeringsplugin-demoexempel $().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. Namn ac mi. Pellentesque pede purus, mattis aliquet, semper nec, cursus a, orci. Duis bibendum nibh ac massa. Heltal eu tortor. Aenean convallis quam vid nunc. Nunc mollis tincidunt nisi. Suspendisse mauris odio, iaculis ut, feugiat vitae, ultrices in, tortor. Quisque på eliten. I hac habitasse platea dictumst.

Steg 3

Därefter måste vi skapa en mekanism som gör det möjligt för användaren att redigera plugin-programmet. Vi behöver ett plugin som är så flexibelt som möjligt vad gäller inställningar. I det här fallet är det värt att ställa in ett antal parametrar med standardvärden så att användaren inte behöver ställa in en lång lista med parametrar och deras värden själv. För att åstadkomma detta använder vi metoden jQuery extend. Uppdatera din plugin så att den matchar följande:

Vi kommer inte att ändra parametrarna med standardvärden för tillfället, vi kommer att visa detta senare.

(function($)( $.fn.truncate = function(options) ( var defaults = (längd: 300, minTrail: 20, moreText: "mer", lessText: "mindre", ellipsText: "..." ); var options = $.extend(defaults, options returnerar this.each(function() ( ))(jQuery);

jQuery.extend
Utökar ett objekt med andra objekt och returnerar det ändrade objektet.

Steg 4

Efter att ha avslutat våra inledande diskussioner, låt oss gå vidare till att koda insticksprogrammets funktionalitet. Som du redan har sett returnerar plugin-programmet this.each(...) . Metoden each() itererar över alla element i den packade uppsättningen. Så om vi anropade $("p").truncate() , kommer koden vi kommer att skriva inom kort att köras för varje p-tagg. Eftersom vi returnerar det inslagna setet som erhållits som ett resultat av varje metod, kan vår metod ingå i metodkedjor.

Förutsatt att du är bekant med jQuery kommer jag inte att beskriva i detalj hur funktionen fungerar (men jag beskrev den ändå). Om något i koden är oklart, se dokumentationen eller ställ en fråga i kommentarerna. För att ge pluginet ett komplett utseende, uppdatera det så att det matchar följande:

(function($)( $.fn.truncate = function(options) ( var defaults = ( length: 300, minTrail: 20, moreText: "read in full", lessText: "hide", ellipsisText: "..." ); var options = $.extend(defaults, options returnera this.each(function() ( // DOM-elementet i den aktuella iterationen obj = $(this); // hämta innehållet i elementet som); HTML-uppmärkning var body = obj.html(); if(body.length > options.length + options.minTrail) ( // returnerar positionen efter numret (options.length) från vilken matchningen börjar // i vårt fall är det ett mellanslag var splitLocation = body.indexOf(" ", options .length); // om en matchning hittas då if(splitLocation != -1) ( // dölj verktygstipset var splitLocation = body.indexOf(" ", options.length); var str1 = body. substring(0, splitLocation); var str2 = body.substring(splitLocation, body.length - 1); css("display", "none"); // infoga länken "read in full" i slutet av det befintliga innehållet obj.append("" + "" + options.moreText + "" + ""); för "läs hela"/"dölj" länk 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", "ingen"); ) else ( moreContent.hide("normal"); moreLink.text(options.moreText); ellipsis.css("display", "inline"); ) returnerar false; )); ) ) // end if )); ); ))(jQuery);

Observera att när jag behövde välja något element i plugin-programmet, använde jag obj som kontext (exempel: moreLink = $(".truncate_more_link", obj)). Detta är nödvändigt för att binda varje val till det aktuella elementet som trunkeras. Utan ett sådant sammanhang kan oförutsägbara resultat erhållas.

Där har du det – ditt första jQuery-plugin! Även om det kommer mer, lovade jag tidigare att jag skulle demonstrera att ändra standardvärdena för parametrar. I följande exempel ersätts värdet för varje parameter (det är helt acceptabelt att endast ändra vissa parametrar).

Ersätt skriptet på din testsida med följande:

$().ready(function() ( $(".tip").truncate((längd: 120, minTrail: 10, moreText: "visa mer", lessText: "visa mindre", ellipsText: " " )); ));

Resultatet kan ses i demoexemplet.

Ett plugin som låter dig dölja en del av texten om den överskrider en angiven längd. En länk läggs till, vanligtvis i form av en "Mer detaljer"-knapp - när du klickar på den visas dold text.

Kompatibel med jQuery-versioner högre än 1.7.0

JS

Ett enkelt pluginsamtal:

$("artikel").läs mer();

Kan ringas från ytterligare alternativ:

$("artikel").readmore((hastighet: 75, maxhöjd: 500));

alternativ

• hastighet: 100 (i millisekunder)
• maxhöjd: 200 (i pixlar)
• heightMargin : 16 (i pixlar, undviker att bryta block som bara är något större än den angivna höjden - maxHeight)
• moreLink : "Mer detaljer"
• lessLink : "Göm"
• embedCSS : true (infogar dynamiska CSS-stilar, ställ in false om du vill inkludera alla stilar själv i din stilfil)
• sectionCSS : "display: block; width: 100%;" (ställer in blockstilen)
• startOpen : false (som standard är blocket dolt, om parametern är sann - texten kommer att visas i sin helhet, men med möjlighet att dölja)
• expandedClass : "readmore-js-expanded" (klass tillagd i expanderat block)
• collapsedClass : "readmore-js-collapsed" (klass läggs till i det kollapsade blocket)
• beforeToggle : function() () (funktionen anropas efter att ha klickat på knappen "Detaljer" eller "Göm", men innan blocket komprimeras eller expanderas)
• afterToggle : function() () (funktion anropad efter att blocket har expanderats eller komprimerats)

Om ett element har en maxhöjd inställd på CSS-stilar, då kommer plugin-programmet att använda exakt detta värde, och inte värdet för maxHeight-alternativet

Ring tillbaka:

Callback-funktionerna beforeToggle() och afterToggle() tar samma argument: trigger , element och mer .

• trigger : "Mer detaljer" eller "Göm"-knappar
• element : blocket som för närvarande kollapsar eller expanderar
• mer : boolean, sant - betyder att blocket utökas

Exempel på återuppringning.
Här är ett exempel på hur du använder afterToggle-funktionen för att rulla till toppen av ett block när du klickar på Göm-knappen:

$("article").readmore(( afterToggle: function(trigger, element, more) ( if(! more) ( // "Göm"-knappen klickades $("html, body").animate(( scrollTop: element .offset().top ),( varaktighet: 100 ));

Du kan inaktivera plugin-funktionen så här:

$("artikel").readmore("förstör");

Eller så kan du ange ett element som plugin-programmet inte ska fungera på:

$("artikel:först").readmore("förstör");

CSS

Som standard infogar plugin följande CSS-kod på sidan:

Readmore-js-toggle, .readmore-js-section ( display: block; bredd: 100%; ) .readmore-js-section ( overflow: hidden; )

Med hjälp av plugin-alternativet kan du ändra den första regeln:

$("artikel").readmore(( sectionCSS: "display: inline-block; bredd: 50%;" ));

Om du vill använda din egen stilfil, ange false i plugin-inställningarna:

$("artikel").readmore(( embedCSS: false ));

God eftermiddag

Låt oss börja från början ifall någon inte vet något om mer.

Jag har inte varit till havet.

- Okej, översvämma det inte, jag har aldrig varit i havet!

- Jag hade inte en chans, jag var inte...

– Vi har redan knackat på himlens dörr, pumpat upp oss på tequila, bokstavligen tagit oss av på vår sista resa, men du har inte varit till havet?!

– Jag hade inte tid, det gick inte...

"Jag visste inte att det inte finns någonstans i himlen utan detta?"

Filmen "Knocking on Heaven's Door"

Hur man lägger till mer

Så vilken text som ska visas i meddelandet ställs in med mer-taggen. Den här taggen delar upp artikeln i två delar: inledning (meddelande) och fortsättning.

I WordPress-editorn kan ju fler-taggen infogas med knappen i verktygsfältet.

1. Visuell redigeringsläge:

2. Textredigeringsläge:

I textläge kan du också manuellt dela upp posten: skriv bara

Och nu viktig information, vilket inte alla vet!

Så det finns ett elementärt sätt att ge varje länk efter tillkännagivandet sin egen unika text!

Du kan göra detta genom att helt enkelt skriva, önskad text invändig design med mer. Så här:

Du kanske frågar varför gör detta? Skriv också ner texten varje gång.

För att vara ärlig så är jag själv =) Jag har redan publicerat 84 artiklar, och jag "kommer bara ut ur skogen" om detta.

Hur ändrar man texten?

1. Det första - enklaste sättet - är att lägga till din text (vanligtvis i index.php) till funktionen_content

2. Den andra metoden är att använda kroken the_content_more_link. Lägg bara till följande kod och ställ in önskad länktext.

function my_more_link($more_link, $more_link_text) (retur str_replace($more_link_text, "Fortsätt läsa...", $more_link); ) add_filter("the_content_more_link", "my_more_link", 10, 2);

Denna metod är bekväm eftersom du inte behöver söka igenom mallfilerna för att hitta exakt var the_content används (detta behöver inte vara i index.php, det kan vara content.php eller vad som helst.) Här arbetar du bara i filen functions.php.

3. I den tredje punkten sparar jag helt enkelt metoden för historik med hjälp av ett anpassat WordPress-fält.

Att skriva in text direkt i är naturligtvis enklare och tydligare.

Justera här helt enkelt funktionsanropet the_content på ett av två sätt.

Hur man tar bort #mer från en länk

I koden är detta ankare inställt på detta sätt: