Rating
Allow users to easily view and set ratings that reflect degrees of satisfaction with content and services.
About
Allow users to easily view and set ratings that reflect degrees of satisfaction with content and services.
The rating
control has several great features that provide flexibility and customization.
To create rating
, add role rating
with attribute data-role
to input
element.
<input data-role="rating">
Options
The rating
component has a number of options to setup it.
Stars count
By default the rating is displayed with five stars.
You can set your own number of stars with attribute data-stars="..."
.
Value for this attribute must be a valid integer value.
<input data-role="rating" data-stars="10">
Value, values and round values
You can set rated value with attribute data-value="..."
.
Value for this attribute must be a valid number value and less or equal of count of stars.
<input data-role="rating" data-value="3">
If your value is a float, you can use special attribute data-round-func="round|ceil|floor"
to set round function.
By default, used round
function.
round
ceil
floor
<input data-role="rating" data-value="3.7" data-round-func="round">
<input data-role="rating" data-value="3.7" data-round-func="ceil">
<input data-role="rating" data-value="3.7" data-round-func="floor">
Each star has associated value, to determine the ranking. By default, this number is from 1 to the number of stars.
You can set own set of values with attribute data-values="..."
. Use comma separated string to set value for this attribute.
Click on star to view associated value.
<input data-role="rating" data-values="0.1, 0.2, 0.3, 0.4, 0.5">
<input data-role="rating" data-values="A, B, C, D, E">
Message
With attribute data-message="..."
you can set additional information field for rating
.
<input data-role="rating" data-value="3" data-message="(3856)">
Colors
You can set own colors for rating with attributes data-star-color="..."
and data-stared-color="..."
.
Value for this attribute must be valid color hex value or Metro UI color name. A color names a defined in Metro.utils
, you can see all names in example below.
<input data-role="rating"
data-value="3"
data-star-color="cyan"
data-stared-color="pink">
colors: {
lime: '#a4c400',
green: '#60a917',
emerald: '#008a00',
blue: '#00AFF0',
teal: '#00aba9',
cyan: '#1ba1e2',
cobalt: '#0050ef',
indigo: '#6a00ff',
violet: '#aa00ff',
pink: '#dc4fad',
magenta: '#d80073',
crimson: '#a20025',
red: '#CE352C',
orange: '#fa6800',
amber: '#f0a30a',
yellow: '#fff000',
brown: '#825a2c',
olive: '#6d8764',
steel: '#647687',
mauve: '#76608a',
taupe: '#87794e'
}
Static rating
If you need create static rating, use attribute data-static="true"
to set it.
<input data-role="rating"
data-value="3"
data-message="(3856)"
data-static="true">
Events
When rating
works, it generate the number of events. You can use callbacks for this events to interact with it.
Event | Data | Desc |
---|---|---|
onStarClick(value, star, element) |
data-on-star-click |
Fired when use click on the star on the not static rating |
onRatingCreate(element) |
data-on-rating-create |
Fired when the rating was created. |
<input id="rating-events"
data-role="rating"
data-on-star-click="
alert('User rated this with value ' + arguments[0])
">
Methods
Rating has the number of methods to interact with it.
Method | Desc |
---|---|
val() |
Get current rating value |
val(val) |
Set rating value |
msg(m) |
Set rating info message |
static(mode) |
Set rating mode: static when true or not when false |
<input data-role="rating" id="rating-methods" data-message="Please rate">
<div>
<button class="button" onclick="
var v = $.random(1, 5);
var r = $('#rating-methods').data('rating');
r.val(v).msg('Your rate is: ' + v);
">Click me for rate</button>
</div>
Customize
You can customize cube component. For change cube visual style use attributes:
data-cls-rating
- additional class for rating component,
data-cls-stars
- additional class for stars list,
data-cls-result
- additional class for message field.
Use these attributes to set additional classes to cube elements.