Rating custom image - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: JavaScript, jQuery UI Widgets, jqxrating, rating, widgets

This topic contains 1 reply, has 2 voices, and was last updated by Minko 12 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Rating custom image Posts

November 9, 2011 at 4:11 pm Rating custom image #1177

alec

Member

Hi,

I want to change the default icon for the rating with custom one. How I can do this?

Greetings,

Alec.

November 11, 2011 at 1:14 pm Rating custom image #1198

Minko

Blocked

Hello Alec,

You can do it by overriding the CSS classs containing the pictures which you want to change:
For example:


.jqx-rating-image-default-classic
{
    background-color: transparent;
    padding: 0px;
    background-repeat: no-repeat;
    cursor: pointer;
    background-image: url(images/thumb.png);
    overflow: hidden;
}
/*applied to the rating when it is hovered.*/
.jqx-rating-image-hover-classic
{
    background-color: transparent;
    padding: 0px;
    background-repeat: no-repeat;
    cursor: pointer;
    background-image: url(images/thumb_hover.png);
    overflow: hidden;
}
/*applied to the rating when it is disabled.*/
.jqx-rating-image-backward-classic
{
    background-color: transparent;
    padding: 0px;
    background-repeat: no-repeat;
    cursor: pointer;
    background-image: url(images/thumb_disabled.png);
    overflow: hidden;
}

This is going to change your rating picture for the classic theme.
Here is the full source code:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Rating, jqxRating, Rating Widget" /> 
    <meta name="description" content="The jqxRating control represents a widget that allows you to choose a rating." />
    <title id='Description'>The jqxRating control represents a widget that allows you to choose a rating. You can configure the rating item's size, image and the number of displayed items.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxrating.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxPanel
            var theme = $.data(document.body, 'theme');
            if (theme == null || theme == undefined) theme = 'classic';
            $("#jqxRating").jqxRating({ width: 350, height: 35, theme: theme });
            $("#jqxRating").bind('change', function (event) {
                $("#rate").find('span').remove();
                $("#rate").append('<span>' + event.value + '</span');
            });
        });
    </script>
    <style type="text/css">
        .jqx-rating-image-default-classic
        {
            background-color: transparent;
            padding: 0px;
            background-repeat: no-repeat;
            cursor: pointer;
            background-image: url(images/thumb.png);
            overflow: hidden;
        }
        /*applied to the rating when it is hovered.*/
        .jqx-rating-image-hover-classic
        {
            background-color: transparent;
            padding: 0px;
            background-repeat: no-repeat;
            cursor: pointer;
            background-image: url(images/thumb_hover.png);
            overflow: hidden;
        }
        /*applied to the rating when it is disabled.*/
        .jqx-rating-image-backward-classic
        {
            background-color: transparent;
            padding: 0px;
            background-repeat: no-repeat;
            cursor: pointer;
            background-image: url(images/thumb_disabled.png);
            overflow: hidden;
        }
    </style>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana;">
        <div id='jqxRating'></div>
        <div style='margin-top:10px;'>
           <div style='float: left;'>Rating:</div> <div style='float: left;' id='rate'></div>
        </div>
  </div>
  </body>
</html>

Best regards!

Minko.

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.