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

כוכבים משמשים לדירוג עוד הרבה לפני המצאת האינטרנט, אבל שימוש בכוכבים לדירוג קיים בלא מעט אתרי אינטרנט. במקום לשבור את הראש על הצבת תמונות באמצעות 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).