ejmRating

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>