ejRating

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

  • javascript
  • $(element).ejRating()

    Example

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <input id="rating"></input>
    
        <script>
            // Create Rating
            $("#rating").ejRating();
            
            // Create Rating Object
            var ratingObj = $("#rating").data("ejRating");
            ratingObj.destroy();
            
        </script>
  • html
  • <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

  • html
  • <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>
  • html
  • <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

  • html
  • <input id="rating"></input>
    
        <script>
           
            $("#rating").ejRating();
            
            //Create rating object
            var ratingObj = $("#rating").data("ejRating");
    
            // hides the rating control
            ratingObj.hide(); 
            
        </script>
  • html
  • <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

  • html
  • <input id="rating"></input>
    
        <script>
            $("#rating").ejRating();
            // Create rating control object
            var ratingObj = $("#rating").data("ejRating");
            // Refresh the rating control
            ratingObj.refresh(); 
        </script>
  • html
  • <input id="rating"></input>
    
        <script>
            $("#rating").ejRating();
            // To refresh the rating values
            $("#rating").ejRating("refresh");
        </script>

    reset()

    To reset the rating value.

    Example

  • html
  • <input id="rating"></input>
    
        <script>
            $("#rating").ejRating();
            //  Create the rating object.
            var ratingObj = $("#rating").data("ejRating");
            
            // reset the rating values
            ratingObj.reset(); 
        </script>
  • html
  • <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

  • html
  • <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>
  • html
  • <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

  • html
  • <input id="rating"></input>
    
        <script>
    
            $("#rating").ejRating();
    
            // Create rating object
            var ratingObj = $("#rating").data("ejRating");
    
            // shows the rating control
            ratingObj.show();
    
        </script>
  • html
  • <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
    Name Type Description
    value number returns the current value.
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the rating model
    type string returns the name of the event
    event object returns the mouse click event args values.

    Example

  • html
  • <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
    Name Type Description
    value number returns the current value.
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the rating model
    type string returns the name of the event
    event object returns the mouse click event args values.

    Example

  • html
  • <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
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the rating model
    type string returns the name of the event.

    Example

  • html
  • <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
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the rating model
    type string returns the name of the event

    Example

  • html
  • <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
    Name Type Description
    value number returns the current value.
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the rating model
    type string returns the name of the event
    event object returns the mouse click event args values.

    Example

  • html
  • <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
    Name Type Description
    value number returns the current value.
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the rating model
    type string returns the name of the event
    event object returns the mouse click event args values.

    Example

  • html
  • <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
    Name Type Description
    value number returns the current value.
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the rating model
    type string returns the name of the event
    event object returns the mouse click event args values.
    index object returns the current index value.

    Example

  • html
  • <input id="rating"></input>
    
        <script>
            //mouseover event for rating
            $("#rating").ejRating({
                mouseover: function (args) { }
            });
        </script>