How to Convert Numeric Ratings to Star Ratings Using jQuery and CSS?

Converting Numbers to Star Ratings: A Versatile Solution Using jQuery and CSS

When designing user interfaces, it often becomes necessary to represent numeric ratings using stars. Despite the availability of jQuery plugins, adapting these plugins to display star ratings based on a given number can be a challenging task. This article explores a robust solution to this challenge, using a combination of CSS, jQuery, and a pre-defined image.

CSS Definition

To style the star ratings, the following CSS rules are employed:

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

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

In this CSS block, the outer span (span.stars) acts as a container for the individual stars (span.stars span). Both elements are set as block-level elements and given a background image of stars.png with specific offsets and repetition patterns.

Image Requirements

The image file, stars.png, serves as a sprite that contains images of both yellow (filled) and gray (empty) stars. This image must be stored on the user's server; hotlinking to the provided image is not recommended.

jQuery Implementation

The core functionality is implemented using a jQuery plugin named $.fn.stars. This plugin iterates through each element with the class stars and converts its numeric content to a star rating display. The calculation determines the width of the yellow stars based on the given number, ensuring a proportional representation.

$.fn.stars = function() {
    return $(this).each(function() {
        // Get the value
        var val = parseFloat($(this).html());
        // Make sure that the value is in 0 - 5 range, multiply to get width
        var size = Math.max(0, (Math.min(5, val))) * 16;
        // Create stars holder
        var $span = $('<span></span>').width(size);
        // Replace the numerical value with stars
        $(this).html($span);
    });
}

HTML Usage

To utilize this plugin, simply apply the class stars to the spans containing the numeric ratings.

<span class="stars">4.8618164</span>
<span class="stars">2.6545344</span>
<span class="stars">0.5355</span>
<span class="stars">8</span>

Invocation

Trigger the plugin using the following code:

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

Accessibility Considerations

To ensure accessibility, it is recommended to preserve the original numeric value within the span element but make it visually hidden using text-indent: -9999px. This approach allows screen readers and users with CSS disabled to access the underlying data.

Conclusion

This solution efficiently converts numeric ratings to star ratings using jQuery and CSS, making it a versatile tool for display ratings and user feedback in various web applications.

The above is the detailed content of How to Convert Numeric Ratings to Star Ratings Using jQuery and CSS?. For more information, please follow other related articles on the PHP Chinese website!