Pagrindinis » Interneto svetainės dizainas » Dinaminis sutrumpintas tekstas su „Shave.js“ papildiniu

    Dinaminis sutrumpintas tekstas su „Shave.js“ papildiniu

    Dauguma „WordPress“ tinklaraščių naudoja funkciją „skaityti daugiau“, kad būtų rodomas peržiūros pranešimas iš įrašo. Šis tekstas yra sutrumpintas ir tam tikru momentu nukirptas, kad būtų galima sutaupyti vietos ir paskatinti skaitytojus toliau spustelėti ir toliau skaityti.

    Tačiau kartais norite pridėti šią funkciją į vieną puslapį. Įveskite „Shave.js“, „JavaScript“ papildinį dinamiškai sutrumpinant turinį.

    Tai puikus dalykas apie tai, kad sukūrė „Dollar Shave Club“ - komanda, kuri sukūrė vieną iš juokiausių skelbimų, kuriuos aš kada nors matiau. Aš nežinojau, kad jų komanda netgi turėjo „GitHub“ puslapį, bet ji yra pilna repo, tiek originalių, tiek ir šakių.

    Šis konkretus įskiepis yra gana naujas ir jau turi 800 + žvaigždžių. Tai nėra priklausomas, todėl gali veikti paprastu „JavaScript“, nepriklausomai nuo naršyklės ar kitų įtrauktų bibliotekų.

    Kodo sąranka taip pat yra gana paprasta skustis () funkciją atlieka tik du parametrai: a elemento selektorius ir a maksimalus aukštis už šį elementą. Štai labai paprastas pavyzdys:

     maxheight = 320; skutimasis („.elemclass“, maks. aukštis); 

    Žinoma, yra papildomi parametrai, kuriuos galite perduoti pasirinktiniams simboliams po sutrumpinto teksto, arba kelis selektorius, kur norite naudoti skutimosi efektą.

    Iš tikrųjų galite matyti gyvą demonstraciją „Shave“ papildinio svetainėje ir jie taip pat turi „CodePen“ demo.

    Skutimas yra pastatytas dirbti su jQuery arba Zepto jei pageidaujate vienos iš šių bibliotekų. Bet nuo to taip pat veikia ant vanilės JS tai vienas iš paprasčiausių įskiepių, kuriuos galite patekti į svetainę ir pradėti naudoti.

    Nėra pernelyg daug scenarijų, kuriuose norėsite sutrumpinti tekstą, bet kai tai padarysite, lengviau naudoti „Shave“ kaip priedą, nei patys rašyti visą kodą.

    Norėdami pradėti, atsisiųskite kopiją iš „GitHub“ repo arba ištraukite iš repo, pvz., Npm. Taip pat rasite gaires ir dokumentus apie „GitHub“ repo, kad galėtumėte tiesiog tiesiog nukopijuoti, įklijuoti ir gauti skutimąsi!