Dinamisks saīsināts teksts ar Shave.js spraudni

Lielākā daļa WordPress emuāru izmanto funkciju "lasīt vairāk", lai parādītu teksta priekšskatījuma tekstu. Šis teksts ir saīsināts un nogriezts noteiktā brīdī, lai ietaupītu vietu un mudināt lasītājus noklikšķināt tālāk, lai turpinātu lasīt.

Bet dažreiz jūs vēlaties pievienot šo funkciju vienai lapai. Ievadiet Shave.js, kas ir JavaScript spraudnis dinamiski saīsinot saturu.

Viltīgs fakts par šo spraudni ir tas, ka tas ir izveidots ar Dollar Shave Club, komandu, kura ir radījusi vienu no smieklīgākajām reklāmām, kuras esmu redzējis. Es nezināju, ka viņu komandai pat bija GitHub lapa, bet tā ir pilna ar repo oriģināliem un dakšām.

Šis konkrētais spraudnis ir diezgan jauns, un tajā jau ir 800+ zvaigznes. Tā ir atkarīga no tā var darboties vienkāršā JavaScript neatkarīgi no pārlūkprogrammas vai citām iekļautajām bibliotēkām.

Kodu iestatīšana ir arī diezgan vienkārša skūšanās () funkcija tikai divus parametrus: a elementu selektoru un a Maksimālais augstums par šo elementu. Lūk, ļoti vienkāršs piemērs:

 maxheight = 320; skūšanās (". elemclass", maksimums); 

Protams, ir papildu parametri, kurus varat nodot pielāgotās rakstzīmes pēc atdalītā teksta vai vairāki selektori, kuros vēlaties izmantot skūšanās efektu.

Jūs patiešām varat redzēt dzīvu demonstrāciju uz skūšanās spraudņa vietnes, un viņiem ir arī jauka CodePen demonstrācija.

Skūšanās ir veidota strādāt pie jQuery vai Zepto ja vēlaties kādu no šīm bibliotēkām. Bet kopš tā arī darbojas uz vaniļas JS tas ir viens no vienkāršākajiem spraudņiem, lai nokļūtu jūsu vietnē un sāktu lietot.

Nav pārāk daudz scenāriju, kur jūs vēlaties saīsināt tekstu, bet, kad jūs to izdarīsiet, ir daudz vieglāk izmantot spraudni, piemēram, skūšanu, nekā visu kodu ierakstīt pats.

Lai sāktu darbu, lejupielādējiet kopiju no GitHub repo vai izvelciet no repo, piemēram, npm. Jūs atradīsiet arī vadlīnijas un dokumentāciju par GitHub repo, lai jūs varētu burtiski vienkārši kopēt, ielīmēt un saņemt skūšanos!