הצגה של מספרים ככוכבים

סקריפט של jQuery שממיר מספר לדירוג של כוכבים

כוכבים משמשים לדירוג עוד הרבה לפני המצאת האינטרנט, אבל שימוש בכוכבים לדירוג קיים בלא מעט אתרי אינטרנט. במקום לשבור את הראש על הצבת תמונות באמצעות PHP אפשר ליצור קוד jQuery שלוקח מספר כלשהו (כולל שברים) וממיר אותו למספר כוכבים. כך למשל אם אני מכניס מספר בשדה מסוים, הקוד יקח את המספר, ימיר אותו לכוכבים. אם הכנסתי 4.5, אני אראה את הדבר המופלא הבא:

4.5

איך עושים את הנס הזה? קצת jQuery, קצת CSS ותמונה אחת.

ה-jQuery לוקח את המספר, מכפיל אותו ברוחב של התמונה ומציג את התמונה. ככה זה עובד:

CSS


span.stars, span.stars span {
    display: block;
    background: url(images/stars.png) 0 -16px repeat-x;
    width: 80px;
    height: 16px;
}

span.stars span {
    background-position: 0 0;
}

התמונה
יש לשמור את התמונה בשם stars.png ולשים אותה בתיקית images:




קוד ה-jQuery:


 $.fn.stars = function() {
     $(this).each(function() {
        // Get the int value
        var val = parseFloat($(this).html());
        // Calculate physical size: If you change the image, make sure that you change the 16
        var size = 16 * val;
        // Create stars holder
        var stars = $('<span class="stars"><span></span></span>');
        // Adjust stars' width
        stars.find('span').width(size);
        // Replace the numerical value with stars
         $(this).replaceWith(stars);
    });
}

 $(document).ready(function() {
     $('span.stars').stars();
 });

אם אנו רוצים לשנות את התמונה, אין דבר קל מזה, פשוט מחליפים את התמונה ומשנים את הספרה 16 לרוחב של התמונה החדשה. (גם ב-CSS).

פוסטים נוספים שכדאי לקרוא

פתרונות ומאמרים על פיתוח אינטרנט

נגישות טכנית – פודקאסט ומבוא

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

מיקרו בקרים

בית חכם עם ESPHome ו Home Assistant

הסבר על הום אסיסטנט, מערכת הקוד הפתוח לבית חכם ואיך לחבר אליה מיקרובקרים.

גלילה לראש העמוד