Dünaamiline kärbitud tekst Shave.js pluginaga

Enamik WordPressi blogisid kasutavad funktsiooni "Loe rohkem", et näidata postituse eelvaate teksti. See tekst on kärbitud ja lõigatud teatud kohas, et säästa ruumi ja julgustada lugejaid lugemise jätkamiseks klikkima.

Kuid mõnikord soovite selle funktsiooni lisada ühele lehele. Sisestage Shave.js, JavaScript-plugin dünaamiliselt kärbitakse sisu.

Selle lisandmooduli jahtumine on see, et selle on loonud Dollar Shave Club, meeskond, kes tegi ühe lõbusamaid reklaame, mida ma kunagi näinud olen. Ma ei teadnud, et nende meeskonnal oli isegi GitHubi leht, kuid see on täis nii originaalseid kui ka kahvlid.

See konkreetne plugin on üsna uus ja tal on juba 800 + tähte. See on sõltuvusest vaba, nii see võib töötada tavalisel JavaScriptis olenemata brauserist või teistest kaasatud raamatukogudest.

Koodi seadistamine on ka suhteliselt lihtne raseerima() funktsioon ainult kaks parameetrit: a elemendi valija ja a max kõrgus selle elemendi kohta. Siin on väga põhiline näide:

 maxheight = 320; raseerimine („. elemclass”, maxheight); 

Loomulikult on olemas täiendavaid parameetreid, mida saate kasutada kohandatud märkide jaoks pärast kärbitud teksti või mitu valijat, kuhu soovite raseerimise efekti rakendada.

Sa saad tegelikult näha live-demot Shave plugin saidil ja neil on ka kena CodePen demo.

Raseerimine on ehitatud töötage jQuery või Zepto juures kui soovid kumbagi neist raamatukogudest. Aga kuna see on ka jookseb vanilje JS see on üks lihtsamaid pluginaid, mis teie saidile langevad ja hakkavad kasutama.

Seal ei ole liiga palju stsenaariume, kus soovite teksti kärpida, kuid kui seda teha, on palju lihtsam kasutada sellist pluginat nagu Shave kui kirjutada kogu kood ise.

Alustamiseks laadige GitHub repost koopia või tõmmake tagasi repoligendist, näiteks npm. Samuti leiate GitHub repo juhiseid ja dokumentatsiooni, et saaksite sõna otseses mõttes lihtsalt kopeerida, kleepida ja saada raseerimist!