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

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


<a href="http://www.internet-israel.com/wp-content/uploads/2010/03/stars.png"><img src="http://www.internet-israel.com/wp-content/uploads/2010/03/stars.png" alt="" title="stars" width="16" height="32" class="aligncenter size-full wp-image-2372" /></a>

קוד ה-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).

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (7 הצבעות, ממוצע: 3.86 מתוך 5)

תגיות: , פורסם בקטגוריה: jQuery Scripts

אל תשארו מאחור! יש עוד מה ללמוד!