ejmRating

5 Jun 202318 minutes to read

The Essential JavaScript Mobile Rating control lets you quickly set a value by selecting a number of symbols from a group.

Custom Design for HTML Rating control.

$(element).ejmRating();

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="rating" data-role="ejmrating"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="rating"></div>
    <script>
        $("#rating").ejmRating();
    </script>

Requires

• module:jQuery

• module:ej.core

• module:ej.unobtrusive

• module:ej.mobile.core

• module:ej.data

• module:ej.touch

Members

enabled boolean

Specifies whether to enable or disable the control.

Default Value

• true

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="rating" data-role="ejmrating" data-ej-enabled="false"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="rating"></div>
    <script>
        $("#rating").ejmRating({ enabled: false });
    </script>

enablePersistence boolean

Specifies to maintain the current model value to browser cookies for state maintenance. While refresh the page, the model value will get apply to the control from browser cookies.

Default Value

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="rating" data-role="ejmrating" data-ej-enablepersistence="true"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="rating"></div>
    <script>
        $("#rating").ejmRating({ enablePersistence: true });
    </script>

incrementStep int

Specifies the step value for incrementation.

Default Value

• 1

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="rating" data-role="ejmrating" data-ej-incrementstep="1"></div>

HTML

<!-- Obtrusive way of rendering --> 
    <div id="rating"></div>
    <script>
        $("#rating").ejmRating({ incrementStep: 1 });
    </script>

maxValue int

Specifies the maximum value of Rating.

Default Value

• 5

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="rating" data-role="ejmrating" data-ej-maxvalue="7"></div>

HTML

<!-- Obtrusive way of rendering --> 
    <div id="rating"></div>
    <script>
        $("#rating").ejmRating({ maxValue: 7 });
    </script>

minValue int

Specifies the minimum value.

Default Value

• 0

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="rating" data-role="ejmrating" data-ej-minvalue="4"></div>

HTML

<!-- Obtrusive way of rendering --> 
    <div id="rating"></div>
    <script>
        $("#rating").ejmRating({ minValue: 4 });
    </script>

orientation enum

Specifies whether the orientation is horizontal or vertical. See Orientation

Default Value

• “horizontal”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="rating" data-role="ejmrating" data-ej-orientation="vertical"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="rating"></div>
    <script>
        $("#rating").ejmRating({ orientation: "vertical" });
    </script>

precision enum

Specifies the precision value. See Precision

Default Value

• “full”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="rating" data-role="ejmrating" data-ej-precision="half"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="rating"></div>
    <script>
        $("#rating").ejmRating({ precision: "half" });
    </script>

readOnly boolean

Specifies whether the control is read only.

Default Value

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="rating" data-role="ejmrating" data-ej-readonly="true" ></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="rating"></div>
    <script>
        $("#rating").ejmRating({ readOnly: true });
    </script>

renderMode enum

Specifies the rendering mode of the control. See RenderMode

Default Value

• “auto”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="rating" data-role="ejmrating" data-ej-rendermode="android"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="rating"></div>
    <script>
        $("#rating").ejmRating({ renderMode: "android" });
    </script>

shape enum

Specifies the shape. See Shape

Default Value

• “star”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="rating" data-role="ejmrating" data-ej-shape="circle"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="rating"></div>
    <script>
        $("#rating").ejmRating({ shape: "circle" });
    </script>

shapeHeight int

Specifies the shape height.

Default Value

• 25

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="rating" data-role="ejmrating" data-ej-shapeheight="40" ></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="rating"></div>
    <script>
        $("#rating").ejmRating({ shapeHeight: 40 });
    </script>

shapeWidth int

Specifies the shape width.

Default Value

• 25

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="rating" data-role="ejmrating" data-ej-shapewidth="40" ></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="rating"></div>
    <script>
        $("#rating").ejmRating({ shapeWidth: 40 });
    </script>

spaceBetweenShapes int

Specifies the space between shapes.

Default Value

• 25

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="rating" data-role="ejmrating" data-ej-spacebetweenshapes="40" ></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="rating"></div>
    <script>
        $("#rating").ejmRating({ spaceBetweenShapes: 40 });
    </script>

value int

Specifies the current value.

Default Value

• 1

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="rating" data-role="ejmrating" data-ej-value="2"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="rating"></div>
    <script>

        $("#rating").ejmRating({ value: 2 });
    </script>

Methods

disable()

To disable the Rating.

Example

HTML

<input data-role="ejmbutton" type="button" data-ej-text="Disable" data-ej-touchend="disable" /><br />
    <div id="rating" data-role="ejmrating"></div>

    <script>
        function disable() {
            $("#rating").ejmRating("disable");
        }
    </script>

enable()

To enable the rating.

Example

HTML

<input data-role="ejmbutton" type="button" data-ej-text="Disable" data-ej-touchend="disable" />
    <input data-role="ejmbutton" type="button" data-ej-text="Enable" data-ej-touchend="enable" /><br />
        
    <div id="rating" data-role="ejmrating"></div>

    <script>
        function disable() {
            $("#rating").ejmRating("disable");
        }
        function enable() {
            $("#rating").ejmRating("enable");
        }        
    </script>

getValue()

To get the current value.

Example

HTML

<input data-role="ejmbutton" type="button" data-ej-text="Get Value" data-ej-touchend="get" /><br />

    <div id="rating" data-role="ejmrating"></div>

    <script>
        function get() {
            var value = $("#rating").ejmRating("getValue");
            alert("Current value is: " + value);
        }
    </script>

hide()

To hide the Rating.

Example

HTML

<input data-role="ejmbutton" type="button" data-ej-text="Hide" data-ej-touchend="hide" /><br />
        
    <div id="rating" data-role="ejmrating"></div>

    <script>
        function hide() {
            $("#rating").ejmRating("hide");
        }
    </script>

reset()

To reset the value.

Example

HTML

<input data-role="ejmbutton" type="button" data-ej-text="Reset" data-ej-touchend="reset" /><br />
        
    <div id="rating" data-role="ejmrating"></div>

    <script>
        function reset() {
            $("#rating").ejmRating("reset");
        }
    </script>

setValue()

To set the value.

Example

HTML

<input data-role="ejmbutton" type="button" data-ej-text="Set Value" data-ej-touchend="set" /><br />
        
    <div id="rating" data-role="ejmrating"></div>

    <script>
        function set() {
            $("#rating").ejmRating("setValue", 2);
        }
    </script>

show()

To show the Rating.

Example

HTML

<input data-role="ejmbutton" type="button" data-ej-text="Hide" data-ej-touchend="hide" />
    <input data-role="ejmbutton" type="button" data-ej-text="Show" data-ej-touchend="show" /><br />
            
    <div id="rating" data-role="ejmrating"></div>

    <script>
        function hide() {
            $("#rating").ejmRating("hide");
        }            
        function show() {
            $("#rating").ejmRating("show");
        }
    </script>

Events

change

Event triggers when the value changed.

Name	Type	Description
argument	Object</span>	Event parameters from Rating. Name Type Description cancel boolean</span> returns true if the event should be cancelled; otherwise, false. type string</span> returns the name of the event. model Object</span> returns the model value of the control. value int</span> returns the current element associated value.

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="rating" data-role="ejmrating" data-ej-change="onChange"></div>
    <script>
        function onChange(args) {
            //handle the event
        }
    </script>

HTML

<!-- Unobtrusive way of rendering -->
    <div id="rating"></div>
    <script>
        $("#rating").ejmRating({
            change: function (args) {
                //handle the event
            }
        });
    </script>

tap

Event triggers when touch happens on the control.

Name	Type	Description
argument	Object</span>	Event parameters from Rating. Name Type Description cancel boolean</span> returns true if the event should be cancelled; otherwise, false. type string</span> returns the name of the event. model Object</span> returns the model value of the control. value int</span> returns the current element associated value.

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="rating" data-role="ejmrating" data-ej-tap="ontap"></div>
    <script>
        function ontap(args) {
            //handle the event
        }
    </script>

HTML

<!-- Unobtrusive way of rendering -->
    <div id="rating"></div>
    <script>
        $("#rating").ejmRating({
            tap: function (args) {
                //handle the event
            }
        });
    </script>

touchMove

Event triggers when touch move happens on the control.

Name	Type	Description
argument	Object</span>	Event parameters from Rating. Name Type Description cancel boolean</span> returns true if the event should be cancelled; otherwise, false. type string</span> returns the name of the event. model Object</span> returns the model value of the control. value int</span> returns the current element associated value.

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="rating" data-role="ejmrating" data-ej-touchmove="ontouchmove"></div>
    <script>
        function ontouchmove(args) {
            //handle the event
        }
    </script>

HTML

<!-- Unobtrusive way of rendering -->
    <div id="rating"></div>
    <script>
        $("#rating").ejmRating({
            touchmove: function (args) {
                //handle the event
            }
        });
    </script>