ejRating
11 Jul 201821 minutes to read
The Rating control provides an intuitive Rating experience that enables you to select a number of stars that represent a Rating. You can configure the item size, orientation and the number of displayed items in the Rating control. You can also customize the Rating star image by using custom CSS.
Syntax
$(element).ejRating()
Example
<input id="rating"></input>
<script>
// Create Rating
$('#rating').ejRating();
</script>
Requires
-
module:jQuery
-
module:jquery.easing.1.3.js
-
module:ej.core.js
-
module:ej.rating.js
Members
allowReset boolean
Enables the rating control with reset button.It can be used to reset the rating control value.
Default Value
- true
Example
<input id="rating"></input>
<script>
//To set allowReset API value during initialization
$("#rating").ejRating({ allowReset: true });
</script>
cssClass string
Specify the CSS class to achieve custom theme.
Default Value
- ””
Example
<input id="rating"></input>
<script>
// Set the cssClass during initialization.
$("#rating").ejRating({ cssClass: "gradient-lime" });
</script>
enabled boolean
When this property is set to false, it disables the rating control.
Default Value
- true
Example
<input id="rating"></input>
<script>
//To set enabled API value during initialization
$("#rating").ejRating({ enabled: true });
</script>
enablePersistence boolean
Save current model value to browser cookies for state maintenance. While refresh the page Rating control values are retained.
Default Value
- false
Example
<input id="rating"></input>
<script>
//To set persist API value during initialization
$("#rating").ejRating({ enablePersistence: true });
</script>
height string
Specifies the height of the Rating control wrapper.
Default Value
- null
Example
<input id="rating"></input>
<script>
//To set height API value during initialization
$("#rating").ejRating({ height: "50" });
</script>
htmlAttributes object
Specifies the list of HTML attributes to be added to rating control.
Default Value
- {}
Example
<input id="rating"></input>
<script>
//To set htmlAttributes API value during initialization
$("#rating").ejRating({ htmlAttributes:{"aria-label":"rating"} });
</script>
incrementStep number
Specifies the value to be increased while navigating between shapes(stars) in Rating control.
Default Value
- 1
Example
<input id="rating"></input>
<script>
//To set incrementStep API value during initialization
$("#rating").ejRating({ incrementStep: 2 });
</script>
maxValue number
Allow to render the maximum number of Rating shape(star).
Default Value
- 5
Example
<input id="rating"></input>
<script>
//To set maxValue API value during initialization
$("#rating").ejRating({ maxValue: 10 });
</script>
minValue number
Allow to render the minimum number of Rating shape(star).
Default Value
- 0
Example
<input id="rating"></input>
<script>
//To set minValue API value during initialization
$("#rating").ejRating({ minValue: 3 });
</script>
orientation enum
Specifies the orientation of Rating control. See Orientation
Name | Type | Default | Description |
---|---|---|---|
Horizontal | string | horizontal | Used to set Orientation as Horizontal |
Vertical | string | vertical | Used to set Orientation as Vertical |
Default Value
- ej.Rating.Orientation.Horizontal
Example
<input id="rating"></input>
<script>
//To set orientation API value during initialization
$("#rating").ejRating({ orientation: ej.Rating.Orientation.Horizontal });
</script>
precision enum
Helps to provide more precise ratings.Rating control supports three precision modes - full, half, and exact. See Precision
Name | Type | Default | Description |
---|---|---|---|
Exact | string | exact | Used to set Precision as Exact |
Full | string | full | Used to set Precision as Full |
Half | string | half | Used to set Precision as Half |
Default Value
- “full”
Example
<input id="rating"></input>
<script>
//To set precision API value during initialization
$("#rating").ejRating({ precision: ej.Rating.Precision.Half });
</script>
readOnly boolean
Interaction with Rating control can be prevented by enabling this API.
Default Value
- false
Example
<input id="rating"></input>
<script>
//To set readOnly API value during initialization
$("#rating").ejRating({ readOnly: true });
</script>
shapeHeight number
To specify the height of each shape in Rating control.
Default Value
- 23
Example
<input id="rating"></input>
<script>
//To set shapeHeight API value during initialization
$("#rating").ejRating({ shapeHeight: 25 });
</script>
shapeWidth number
To specify the width of each shape in Rating control.
Default Value
- 23
Example
<input id="rating"></input>
<script>
//To set shapeWidth API value during initialization
$("#rating").ejRating({ shapeWidth: 25 });
</script>
showTooltip boolean
Enables the tooltip option.Currently selected value will be displayed in tooltip.
Default Value
- true
Example
<input id="rating"></input>
<script>
//To set showTooltip API value during initialization
$("#rating").ejRating({ showTooltip: true });
</script>
value number
To specify the number of stars to be selected while rendering.
Default Value
- 1
Example
<input id="rating"></input>
<script>
//To set value API value during initialization
$("#rating").ejRating({ value: 3 });
</script>
width string
Specifies the width of the Rating control wrapper.
Default Value
- null
Example
<input id="rating"></input>
<script>
//To set width API value during initialization
$("#rating").ejRating({ width: "200" });
</script>
Methods
destroy()
Destroy the Rating widget all events bound will be unbind automatically and bring the control to pre-init state.
Example
<input id="rating"></input>
<script>
// Create Rating
$("#rating").ejRating();
// Create Rating Object
var ratingObj = $("#rating").data("ejRating");
ratingObj.destroy();
</script>
<input id="rating"></input>
<script>
$("#rating").ejRating();
// destroy the rating
$("#rating").ejRating("destroy");
</script>
getValue()
To get the current value of rating control.
Returns:
number
Example
<input id="rating"></input>
<script>
// Create rating
$("#rating").ejRating();
// Create rating object
var ratingObj = $("#rating").data("ejRating");
// Get current value of rating
ratingObj.getValue();
</script>
<input id="rating"></input>
<script>
$("#rating").ejRating();
// To get the current value of rating
$("#rating").ejRating("getValue");
</script>
hide()
To hide the rating control.
Example
<input id="rating"></input>
<script>
$("#rating").ejRating();
//Create rating object
var ratingObj = $("#rating").data("ejRating");
// hides the rating control
ratingObj.hide();
</script>
<input id="rating"></input>
<script>
$("#rating").ejRating();
// hide the rating control
$("#rating").ejRating("hide");
</script>
refresh()
User can refresh the rating control to identify changes.
Example
<input id="rating"></input>
<script>
$("#rating").ejRating();
// Create rating control object
var ratingObj = $("#rating").data("ejRating");
// Refresh the rating control
ratingObj.refresh();
</script>
<input id="rating"></input>
<script>
$("#rating").ejRating();
// To refresh the rating values
$("#rating").ejRating("refresh");
</script>
reset()
To reset the rating value.
Example
<input id="rating"></input>
<script>
$("#rating").ejRating();
// Create the rating object.
var ratingObj = $("#rating").data("ejRating");
// reset the rating values
ratingObj.reset();
</script>
<input id="rating"></input>
<script>
$("#rating").ejRating();
// reset the rating values
$("#rating").ejRating("reset");
</script>
setValue(value)
To set the rating value.
Name | Type | Description |
---|---|---|
value | string|number | Specifies the rating value. |
Example
<input id="rating"></input>
<script>
$("#rating").ejRating();
// Create the rating object
var ratingObj = $("#rating").data("ejRating");
// Set current value of rating
ratingObj.setValue(4);
</script>
<input id="rating"></input>
<script>
$("#rating").ejRating();
// To set the current value of rating
$("#rating").ejRating("setValue", 4);
</script>
show()
To show the rating control
Example
<input id="rating"></input>
<script>
$("#rating").ejRating();
// Create rating object
var ratingObj = $("#rating").data("ejRating");
// shows the rating control
ratingObj.show();
</script>
<input id="rating"></input>
<script>
$("#rating").ejRating();
// show the rating control
$("#rating").ejRating("show");
</script>
Events
change
Fires when Rating value changes.
Name | Type | Description | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from rating
|
Example
<input id="rating"></input>
<script>
//change event for rating
$("#rating").ejRating({
change: function (args) { }
});
</script>
click
Fires when Rating control is clicked successfully.
Name | Type | Description | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from rating
|
Example
<input id="rating"></input>
<script>
//click event for rating
$("#rating").ejRating({
click: function (args) { }
});
</script>
create
Fires when Rating control is created.
Name | Type | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from rating
|
Example
<input id="rating"></input>
<script>
//create event for rating
$("#rating").ejRating({
create: function (args) { }
});
</script>
destroy
Fires when Rating control is destroyed successfully.
Name | Type | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from rating
|
Example
<input id="rating"></input>
<script>
//destroy event for rating
$("#rating").ejRating({
destroy: function (args) { }
});
</script>
mouseout
Fires when mouse hover is removed from Rating control.
Name | Type | Description | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from rating
|
Example
<input id="rating"></input>
<script>
//mouseout event for Rating
$("#rating").ejRating({
mouseout: function (args) { }
});
</script>
mousemove
Fires when mouse move is moving the Rating control.
Name | Type | Description | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from rating
|
Example
<input id="rating"></input>
<script>
//mousemove event for Rating
$("#rating").ejRating({
mousemove: function (args) { }
});
</script>
mouseover
Fires when mouse hovered over the Rating control.
Name | Type | Description | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from rating
|
Example
<input id="rating"></input>
<script>
//mouseover event for rating
$("#rating").ejRating({
mouseover: function (args) { }
});
</script>