Available in the OSS Version

Rating - Custom Styles

This sample illustrates how to apply a custom theme to our jQuery Rating control.

Customized igRating control with default behavior

Customized igRating control, which doesn't have hover effect

Customized igRating control, which has continuous hover effect

The igRating control that shows only the selected and hovered values

The igRating control with customized background

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Different effects and visualizations can be achieved by manipulating the CSS.

Code View

Copy to Clipboard

HTML

                    <!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />

    <style type="text/css">
        .theme1 .ui-igrating {
        }

        .theme1 .ui-igrating-active {
        }

        .theme1 .ui-igrating-hover {
        }

        .theme1 .ui-igrating-vote {
            width: 20px;
            height: 20px;
            background-image: url("/images/samples/rating/ig-rating-red.png")!important;
            background-position: -75px 0;
        }

        .theme1 .ui-igrating-voteselected {
            background-position: 0 0;
        }

        .theme1 .ui-igrating-votehover {
            background-position: -25px 0;
            filter: alpha(opacity=40);
            opacity: 0.4;
        }

        .theme1 .ui-igrating-votedisabled {
            background-position: -100px 0;
        }

        .theme1 .ui-igrating-votedisabledselected {
            background-position: -50px 0;
        }

        .theme2 .ui-igrating {
        }

        .theme2 .ui-igrating-active {
        }

        .theme2 .ui-igrating-hover {
        }

        .theme2 .ui-igrating-vote {
            width: 20px;
            height: 20px;
            background-image: url("/images/samples/rating/ig-rating-red.png") !important;
            background-position: -75px 0;
        }

        .theme2 .ui-igrating-voteselected {
            background-position: 0 0;
        }

        .theme2 .ui-igrating-votehover {
            background-position: -25px 0;
            filter: alpha(opacity=0);
            opacity: 0.0;
        }

        .theme2 .ui-igrating-votedisabled {
            background-position: -100px 0;
        }

        .theme2 .ui-igrating-votedisabledselected {
            background-position: -50px 0;
        }

        .theme3 .ui-igrating {
        }

        .theme3 .ui-igrating-active {
        }

        .theme3 .ui-igrating-hover {
        }

        .theme3 .ui-igrating-vote {
            width: 20px;
            height: 20px;
            background-image: url("/images/samples/rating/ig-rating-red.png") !important;
            background-position: -75px 0;
        }

        .theme3 .ui-igrating-voteselected {
            background-position: 0 0;
        }

        .theme3 .ui-igrating-votehover {
            background-position: 0 0;
            filter: alpha(opacity=100);
            opacity: 1.0;
        }

        .theme3 .ui-igrating-votedisabled {
            background-position: -100px 0;
        }

        .theme3 .ui-igrating-votedisabledselected {
            background-position: -50px 0;
        }

        .theme4 .ui-igrating {
        }

        .theme4 .ui-igrating-active {
        }

        .theme4 .ui-igrating-hover {
        }

        .theme4 .ui-igrating-vote {
            width: 20px;
            height: 20px;
            background-image: url("/images/samples/rating/ig-rating-red.png") !important;
            background-position: -125px 0;
        }

        .theme4 .ui-igrating-voteselected {
            background-position: 0 0;
        }

        .theme4 .ui-igrating-votehover {
            background-position: -25px 0;
            filter: alpha(opacity=40);
            opacity: 0.4;
        }

        .theme4 .ui-igrating-votedisabled {
            background-position: -100px 0;
        }

        .theme4 .ui-igrating-votedisabledselected {
            background-position: -50px 0;
        }

        .theme5 .ui-igrating {
            border: 1px solid #000000;
            background-color: #2CBDF9;
        }

        .theme5 .ui-igrating-active {
            border: 1px solid #000000;
            background-color: #ffffff;
        }

        .theme5 .ui-igrating-hover {
        }

        .theme5 .ui-igrating-vote {
            width: 20px;
            height: 20px;
            background-image: url("/images/samples/rating/ig-rating-red.png") !important;
            background-position: -75px 0;
        }

        .theme5 .ui-igrating-voteselected {
            background-position: 0 0;
        }

        .theme5 .ui-igrating-votehover {
            background-position: -25px 0;
            filter: alpha(opacity=40);
            opacity: 0.4;
        }

        .theme5 .ui-igrating-votedisabled {
            background-position: -100px 0;
        }

        .theme5 .ui-igrating-votedisabledselected {
            background-position: -50px 0;
        }
    </style>

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>

</head>
<body>

    <p>Customized igRating control with default behavior</p>
    <div id="igRating1"></div>
    <br />
    <p>Customized igRating control, which doesn't have hover effect</p>
    <div id="igRating2"></div>
    <br />
    <p>Customized igRating control, which has continuous hover effect</p>
    <div id="igRating3"></div>
    <br />
    <p>The igRating control that shows only the selected and hovered values</p>
    <div id="igRating4"></div>
    <br />
    <p>The igRating control with customized background</p>
    <div id="igRating5"></div>

    <script>

        $(function () {

            $("#igRating1").igRating({
                voteCount: 10,
                value: 0.5,
                theme: "theme1"
            });

            $("#igRating2").igRating(
            {
                voteCount: 10,
                value: 0.3,
                theme: "theme2"
            });

            $("#igRating3").igRating({
                voteCount: 10,
                value: 0.1,
                theme: "theme3"
            });
            $("#igRating4").igRating({
                voteCount: 10,
                value: 0.2,
                theme: "theme4"
            });
            $("#igRating5").igRating({
                voteCount: 10,
                value: 0.5,
                theme: "theme5"
            });

        });

    </script>

</body>
</html>

Ignite UI for jQuery | Samples

Search Results

Rating - Custom Styles

Code View