Allow Partial Icons

Building on the Quick Start example, you can allow users to select partial stars using the split option.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which uses the largest star size for the icons so that it is easier to see, and sets the split option to four, so that users can select a quarter of a star in their ratings.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $('#ratingRadio').wijrating({ split: 4, iconHeight: 32, iconWidth: 32, icons: { iconsClass: 'wijmo-wijrating-normal-32', hoverIconsClass: 'wijmo-wijrating-hover-32', ratedIconsClass: 'wijmo-wijrating-rated-32' } }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
     $(document).ready(function () {
         $('#ratingRadio').wijrating({
             split: 4,
             iconHeight: 32,
             iconWidth: 32,
             icons: {
                 iconsClass: 'wijmo-wijrating-normal-32',
                 hoverIconsClass: 'wijmo-wijrating-hover-32', 
                 ratedIconsClass: 'wijmo-wijrating-rated-32'
             }
         });
     });             
</script>

No changes are necessary in the <body> section of your HTML file. The basic <div> tags are sufficient to create the rating.
Save your HTML file and open it in a browser. The rating appears like the one in the live widget below. Click halfway or a quarter of the way across a star to see the partial star highlighted.

Reference

Widgets

Quick Start