Rater Js
rater-js is a star rating widget for the browser.
The author is looking for consulting work implementing anything with his open source libraries or other stuff. I do javascript/php/wordpress/c#/asp.net. I have over 10 years experience with software development. Keep in mind that I only work remotely.
Main features:
- Unlimited number of stars.
- Svg as background image makes it look good in any size.
- Custom css. Use your own image as star.
- RTL support.
- Touch support.
Installation
npm install rater-js --save
Usage
rater-js can be used with amd, commonjs or without any module loader using global scope.
In your html create an element that acts as the placeholder for the widget.
Global scope
Directly reference the js from the module
<!--Add js before end body tag-->
The widget will be available globally as "raterJs" on the window object.
Node/Browserify
Just require the module.
var rater = ;
Lastly we can use the widget like this:
var myRater = ;
Css will be injected at runtime, but you can override the css to get the look you want.
//// //
Configuration
Property | Description |
---|---|
element | HtmlElement. Required. |
rateCallback | Function. Triggered when star i clicked. |
max | Number. Number of stars to show. |
showToolTip | true/false. If set to true, show tooltip when hover the stars. |
starSize | Number. Width and height of the star image. |
disableText | Text to show when disabled. |
ratingText | Text to show when hover over stars. Text {rating} {maxRating}. |
isBusyText | Displayed while user is rating but done not called yet. |
readOnly | true/false. If set to true, will disable the rater. |
step | Number. Set a precision between 0 and 1 for the rating. |
reverse | true/false. If set to true, the ratings will be reversed. |
Methods/Properties
: //Disable the widget: //Enable the widget: //Set the rating: //Get the average rating; //Removes event handlers; //Clears the ratingelement; //Get the element used by rater js