Ratings
Default Ratings
Make sure to include following js files at end of body element
<script src="assets/vendor/jquery.rateit/scripts/jquery.rateit.min.js"></script>
<div class="rateit" data-rateit-mode="font">
</div>
Icon Font - Change icon
<div class="rateit" data-rateit-icon="@" data-rateit-mode="font">
</div>
Progressive enhancement (using select)
<select id="backing3b">
<option value="0">Bad</option>
<option value="1" selected="selected">OK</option>
<option value="2">Good</option>
<option value="3">Great</option>
<option value="4">Excellent</option>
</select>
<div class="rateit rateit-mdi" data-rateit-backingfld="#backing3b" data-rateit-mode="font" data-rateit-icon=""></div>
Javascript interaction
Make sure to include following js files at end of body element
<!-- Plgins only -->
<script src="assets/vendor/jquery.rateit/scripts/jquery.rateit.min.js"></script>
<script src="assets/js/ui/component.rating.js"></script>
<div class="rateit rateit-mdi" id="js-interaction" data-rateit-min="2" data-rateit-mode="font" data-rateit-icon="">
</div>
<div>
<span id="jsvalue"></span>
<span id="jshover"></span>
</div>
RTL support
Now we are in RTL mode. No changes needed to make this work
<div style="direction: rtl">
<div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="">
</div>
</div>
Material Design Icons
<!-- Star -->
<div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="">
</div>
<!-- Heart -->
<div class="rateit rateit-mdi mt-3" data-rateit-mode="font" data-rateit-icon="">
</div>
Icon Font - Sizing
<div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="" style="font-size: 36px;">
</div>
Readonly and preset value
<div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true">
</div>
Setting and Getting values
All properties can also be set on the fly. Here are a few examples:
<div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="" id="getting-values">
</div>
<!-- Onclick events -->
<button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('value'))">Get value</button>
<button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('value', prompt('Input numerical value'))">Set value</button>
<button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('max'))">Get max value</button>
<button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('max', prompt('Input numerical value'))">Set max value</button>
<button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('step'))">Get step size</button>
<button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('step', prompt('Input numerical value'))">Set step size</button>
<button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('readonly'))">Get readonly value</button>
<button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('readonly',!$('#getting-values').rateit('readonly'))">Toggle readonly</button>
<button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('ispreset'))">Get ispreset value</button>
<button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('ispreset',!$('#getting-values').rateit('ispreset'))">Toggle ispreset</button>
<button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('reset')">Reset</button>