Installation
Download the latest build and link the minified files in your HTML file's head section.
<link rel="stylesheet" href="rate-VERSION.min.css">
<script src="rate-VERSION.min.js"></script>Usage
Each rating component has to be initialized with Rate.setup.
INFO: The default symbols require the page to be served as UTF-8.
IMPORTANT: The value of the component is stored in an attribute, however, this is for read-only use and setting the value is undefined behaviour.
Default
By default the component will start without a value and with a maximum of 5. The example below has the font-size
property set to 3em for readability (see component styling for details).
<span id="component-id"></span>Rate.setup(document.getElementById('component-id'));Value extraction
The value of the component can either be accessed through the optional hidden input field or via
the read-only data-rate-value attribute of the component.
Settings
Rate.setup will also accept a second argument containing custom settings. All configuration
is done without modifying the HTML.
| Name | Default | Description |
|---|---|---|
| start | 0 | The initial value |
| max | 5 | The maximum value |
| formInputName | undefined | The name of the hidden form input field that will be generated as a sibling. The field
will not be generated if the value is undefined. |
| filled | ★ | The character for filled stars |
| empty | ☆ | The character for empty stars |
| callback | undefined | The callback for when the value changes |
| invokeCallbackOnSetup | false | Whether the callback should be invoked when the component is created |
Styling
The component is made of text content and can therefor be styled just like any other text. Below you can see the component
with a size of 3em and with white foreground and black background.
#component-id {
color: white;
font-size: 3em;
padding: .1em;
background-color: black;
}