טקסט מקוצר דינמי עם תוסף Shave.js

רוב בלוגים וורדפרס להשתמש בתכונה "קרא עוד" כדי להציג טקסט תצוגה מקדימה של פוסט. טקסט זה חתוך וחותך בנקודה מסוימת כדי לחסוך מקום לעודד את הקוראים ללחוץ נוספת כדי להמשיך לקרוא.

אבל לפעמים תרצה להוסיף תכונה זו לדף יחיד. הזן Shave.js, תוסף JavaScript עבור תוכן מקצר באופן דינמי.

עובדה מגניב על תוסף זה הוא נוצר על ידי דולר Shave Club, הצוות שעשה את אחת המכוניות הכי מצחיק שראיתי אי פעם. לא הייתי מודע לצוות שלהם אפילו היה דף GitHub אבל זה מלא repos הן מקורי ומזלג.

תוסף זה הוא די חדש וזה כבר יש 800 + כוכבים. ללא שם: הוא ללא תלות, כך זה יכול לרוץ על JavaScript רגיל ללא קשר לדפדפן או לספריות אחרות כלולות.

קוד ההתקנה היא גם די פשוטה עם shave () פונקציה רק ​​לוקח שני פרמטרים: א בורר אלמנטים א גובה מקסימלי עבור אלמנט זה. הנה דוגמה בסיסית מאוד:

 maxheight = 320; גילוח ('' אלמקלאס ', מקס'); 

כמובן שיש פרמטרים נוספים אתה יכול לעבור תווים מותאמים אישית לאחר טקסט מקוצר, או בוררים מרובים שבו אתה רוצה להחיל את אפקט הגילוח.

אתה באמת יכול לראות הדגמה חיה באתר התוסף Shave ויש להם הדגמה CodePen נחמד מדי.

גילוח בנוי לעבוד על jQuery או Zepto אם אתה מעדיף את שתי הספריות האלה. אבל מאז זה גם פועל על וניל JS זה אחד התוספים הכי קל לרדת לאתר שלך ולהתחיל להשתמש.

אין יותר מדי תרחישים שבהם תרצה לקצץ טקסט, אבל כאשר אתה עושה את זה הרבה יותר קל להשתמש תוסף כמו גילוח מאשר לכתוב את כל הקוד בעצמך.

כדי להתחיל, להוריד עותק של ריפו GitHub או למשוך ריפו כמו npm. תוכלו למצוא גם הנחיות ותיעוד על ריפו GitHub אז אתה יכול פשוטו כמשמעו להעתיק, להדביק, ולקבל גילוח!