Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)
starCaptions
array with captions for each star rating value, the plugin will auto generate the caption. Also note that you can navigate to the rating via the keyboard and change the ratings using the keyboard RIGHT ARROW and LEFT ARROW keys. <label for="input-1" class="control-label">Rate This</label> <input id="input-1" name="input-1" value="4.3" class="rating-loading"> <script> $(document).ready(function(){ $('#input-1').rating({min: 0, max: 8, step: 0.1, stars: 8}); }); </script>
<label for="input-2" class="control-label">Rate This</label> <input id="input-2" name="input-2" value="2.5" class="rating-loading"> <script> $(document).ready(function(){ $('#input-2').rating({ step: 1, starCaptions: {1: 'Very Poor', 2: 'Poor', 3: 'Ok', 4: 'Good', 5: 'Very Good'}, starCaptionClasses: {1: 'text-danger', 2: 'text-warning', 3: 'text-info', 4: 'text-primary', 5: 'text-success'} }); }); </script>
<form> <label for="input-3" class="control-label">Rate This</label> <input id="input-3" name="input-3" value="2" class="rating-loading"> <button class="btn btn-primary">Submit</button> <button type="reset" class="btn btn-secondary">Reset</button> </form> <script> $(document).ready(function(){ $('#input-3').rating({}); }); </script>
Custom Clear Button | Caption Location |
---|---|
<label for="input-4" class="control-label">Rate This</label> <input id="input-4" name="input-4" value="2.5" class="rating-loading"> <table class="table-bordered table-condensed"> <tr><th>Custom Clear Button</th><th>Caption Location</th></tr> <tr><td><span id="kv-clear"></span></td><td><span id="kv-caption"></span></td></tr> </table> <script> $(document).ready(function(){ $('#input-4').rating({ clearButton: '<button class="btn btn-secondary" type="button">' + '<i class="bi-x-lg"></i> Clear</button>', clearElement: "#kv-clear", captionElement: "#kv-caption" }); }); </script>
<label for="input-5" class="control-label">Rate This</label> <input id="input-5" name="input-5" value="3" class="rating-loading"> <script> $(document).ready(function(){ $("#input-5").rating().on("rating:clear", function(event) { alert("Your rating is reset") }).on("rating:change", function(event, value, caption) { alert("You rated: " + value + " = " + $(caption).text()); }); }); </script>
<label for="input-6" class="control-label">Rate This</label> <input id="input-6" name="input-6" class="rating-loading"> <script> $(document).ready(function(){ $("#input-6").rating(); // trap the select change event to execute a rating method $("#rating_changer").on("change", function() { if (this.value == "") { $("#input-6").rating("clear"); } else { $("#input-6").rating("update", this.value); } }); }); </script>
<label for="input-7" class="control-label">Rate This</label> <input id="input-7" name="input-7" class="rating-loading"> <script> $(document).ready(function(){ $("#input-7").rating().on("rating:change", function(event, value, caption) { $("#input-7").rating("refresh", {disabled:true, showClear:false}); }); }); </script>
language
property to translate using your locale. Note that the locale JS file must be loaded after star-rating.js
. <input id="input-8" name="input-8" class="rating-loading"> <script> $(document).ready(function(){ $("#input-8").rating({language: 'de'}); }); </script>
hoverEnabled
, hoverChangeCaption
, hoverChangeStars
, hoverOnClear
. <label for='input-90'>All Hover Behavior Enabled</label> <input id='input-90' class='rating-loading'><hr/> <label for='input-91'>All Hover Behavior Disabled</label> <input id='input-91' class='rating-loading'><hr/> <label for='input-92'>Disallow Caption To Change On Hover</label> <input id='input-92' class='rating-loading'><hr/> <label for='input-93'>Disallow Stars To Change On Hover</label> <input id='input-93' class='rating-loading'><hr/> <label for='input-94'>Disallow Hover Behavior For Clear Button</label> <input id='input-94' class='rating-loading'> <script> $(document).ready(function(){ $('#input-90').rating({hoverEnabled: true}); $('#input-91').rating({hoverEnabled: false}); $('#input-92').rating({hoverChangeCaption: false}); $('#input-93').rating({hoverChangeStars: false}); $('#input-94').rating({hoverOnClear: false}); }); </script>
Comments & Discussion
Note
You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.
The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.