ezStarz by Bitbenderz.com is a light weight jQuery Plugin
that turns any HTML Text Input into a Star Rating element.
ezStarz by Bitbenderz.com is compatible with most modern browsers and markup languages.
ezStarz by Bitbenderz.com requires the jQuery JS Library v1.7.1 or above which should be installed prior to the installation of the ezStarz plugin. Both of which should be installed within the <head> tags as shown below:
<head>
<!-- Install jQuery Library v1.7.1 or above -->
<script type="text/javascript" src="libs/jquery-3.2.0.min.js"></script>
<!-- Install ezStarz jQuery Plugin -->
<link type="text/css" href="css/ezStarz.css" rel="stylesheet" />
<script type="text/javascript" src="js/ezStarz.js"></script>
</head>
The following options can be applied to each ezStarz element:
Option | Type | Default | Settings | Description |
maxRating | int | 5 | integer greater than 0 | The number of Stars to display |
starSize | int | 20 | integer greater than 0 | The size (in pixels) of each Star |
baseColor | str | null | any valid RGB color | Color of the UNRATED Starz (null = grayscale) |
rateColor | str | "#00AAFF" | any valid RGB color | Color of the RATED Starz |
toolTips | str | "auto" | comma separated list of tooltips | Specifies the text in the tooltip above each Star Set to null to hide tooltips |
Within the <body> tags of your page, create a well formed text input.
Once your document is ready apply an ezStarz to it as shown below.
<form>
<label for="example_1">Default Usage :</label><br/>
<input id="example_1" name="example_1" type="text" value="0"/>
<script>$(function(){$('#example_1').ezStarz();});</script>
</form>
The default number of Starz is five.
To apply more or less Starz; invoke the maxRating option.
<form>
<label for="example_2">maxRating Usage :</label><br/>
<input id="example_2" name="example_2" type="text" value="0"/>
<script>$(function(){$('#example_2').ezStarz({maxRating:10});});</script>
</form>
The default Star size is 20px.
To get smaller or larger Starz; invoke the starSize option.
<form>
<label for="example_3">starSize Usage :</label><br/>
<input id="example_3" name="example_3" type="text" value="0"/>
<script>$(function(){$('#example_3').ezStarz({starSize:40});});</script>
</form>
The default UNRATED Star color is greyscale.
To change it; invoke the baseColor option.
<form>
<label for="example_4">baseColor Usage :</label><br/>
<input id="example_4" name="example_4" type="text" value="0"/>
<script>$(function(){$('#example_4').ezStarz({baseColor:'#F16310'});});</script>
</form>
The default RATED Star color is '#00AAFF' (blue).
To change it; invoke the rateColor option.
<form>
<label for="example_5">rateColor Usage :</label><br/>
<input id="example_5" name="example_5" type="text" value="0"/>
<script>$(function(){$('#example_5').ezStarz({rateColor:'#00FF00'});});</script>
</form>
By default, as you position your cursor over each Star, a tooltip with the value will be displayed.
To change tooltip text use the toolTips option. A setting of null will hide the tooltip.
<form>
<label for="example_6">toolTips Usage :</label><br/>
<input id="example_6" name="example_6" type="text" value="0"/>
<script>$(function(){$('#example_6').ezStarz({toolTips:'very poor,poor,average,good,very good'});});</script>
</form>
The decimal resolution of the ezStarz element is determined by the value attribute of its input.
Setting a value with a decimal will create a fractional ezStarz element.
<form>
<label for="example_7">Fractional Resolution :</label><br/>
<input id="example_7" name="example_7" type="text" value="0.0"/>
<script>$(function(){$('#example_7').ezStarz({starSize:40});});</script>
</form>
The decimal resolution of the ezStarz element is determined by the value attribute of its input.
Setting a value with a decimal will create a fractional ezStarz element.
<form>
<label for="example_8">Read Only :</label><br/>
<input id="example_8" name="example_8" type="text" value="2.5" readonly="readonly"/>
<script>$(function(){$('#example_8').ezStarz({starSize:40});});</script>
</form>