mobile.igRating

mobile.igRating_image

The mobile igRating is a control that allows you to select and rate items from a given range of values. The control is specifically designed for mobile devices (which makes rating whole values the only option). If the control is in the read-only mode the control rounds values with half precision.

The following code snippet demonstrates how to initialize the igRating control.

Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the igRating control read, Using Mobile Resources in IgniteUI.

Code Sample

 
<!doctype html>
<html>
<head>
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
	<!-- jQuery Mobile -->
    <script src="js/jquery.mobile.js" type="text/javascript"></script>
	<!-- Moderznizr -->
    <script src="js/modernizr.js" type="text/javascript"></script>
    <!-- Infragistics Loader Script -->
    <script src="js/infragistics.loader.js" type="text/javascript"></script>    
    <!-- Infragistics Loader Initialization -->
    <script type="text/javascript">
        $.ig.loader({
            scriptPath: "js/",
            cssPath: "css/",
            resources: "igmRating"
        });
        
        $.ig.loader(function () {
            $("#igRating2").igRating({
                value: 1
            });
        });
    </script>
</head>
<body>
    <div id="igRating1" 
		data-role="igrating"
		data-value="2">
	</div>
    
    <div id="igRating2"></div>
</body>
</html>

Related Samples

Related Topics

Dependencies

jquery-1.7.2.js
jquery.mobile-1.2.0.js

  • inputName

    Type:
    string
    Default:
    null

    Gets or sets the name of hidden input used by the MVC to carry the value to the server.

    Code Sample

     
        //Initialize
        $(".selector").igRating({
            inputName : "hdnInput"
        });

        //Get
        var inputName = $(".selector").igRating("option", "inputName");

  • readOnly

    Type:
    bool
    Default:
    false

    Gets or sets whether the rating is editable.

    Code Sample

             
        //Initialize
        $(".selector").igRating({
            readOnly : true
        });

        //Get
        var isReadOnly = $(".selector").igRating("option", "readOnly");

        //Set
        $(".selector").igRating("option", "readOnly", true);

  • value

    Type:
    number
    Default:
    null

    Gets or sets value (selected votes).

    Code Sample

     
        //Initialize
        $(".selector").igRating({
            value : 4
        });

        //Get
        var value = $(".selector").igRating("option", "value");

        //Set
        $(".selector").igRating("option", "value", 4);

  • voteCount

    Type:
    number
    Default:
    5

    Gets or sets number of votes.

    Code Sample

     
        //Initialize
        $(".selector").igRating({
            voteCount : 7
        });

        //Get
        var voteCount = $(".selector").igRating("option", "voteCount");

        //Set
        $(".selector").igRating("option", "voteCount", 7);

  • voteHeight

    Type:
    number
    Default:
    0

    Gets or sets custom height of a vote in pixels. In case of 0 the run time style value is used.

    Code Sample

     
        //Initialize
        $(".selector").igRating({
            voteHeight : 20
        });

        //Get
        var height = $(".selector").igRating("option", "voteHeight");

        //Set
        $(".selector").igRating("option", "voteHeight", 20);

  • voteWidth

    Type:
    number
    Default:
    0

    Gets or sets custom width of a vote in pixels. In case of 0 the run time style value is used.

    Code Sample

     
        //Initialize
        $(".selector").igRating({
            voteWidth : 20
        });

        //Get
        var width = $(".selector").igRating("option", "voteWidth");

        //Set
        $(".selector").igRating("option", "voteWidth", 20);

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

  • hoverChange

    Cancellable:
    true

    Event which is raised before hover value is changed.
    If application returns false, then action is canceled and hover value stays unchanged.
    Function takes arguments evt and ui.
    Use ui.value to get new value.
    Use ui.oldValue to get old value.

    Code Sample

     
        //Bind after initialization
		$(document).delegate(".selector", "igratinghoverchange", function (evt, ui) {
            //return the triggered event
            evt;
            
            //gets old value of the igRating widget
            ui.oldValue;
            //gets the current hovered value of the igRating widget
            ui.value;
        });  
        
        //Initialize
        $(".selector").igRating({
            hoverChange : function(evt, ui) {...}
		});

  • valueChange

    Cancellable:
    true

    Event which is raised before (selected) value is changed.
    If application returns false, then action is canceled and value stays unchanged.
    Function takes arguments evt and ui.
    Use ui.value to get new value.
    Use ui.oldValue to get old value.

    Code Sample

             
        //Bind after initialization
		$(document).delegate(".selector", "igratingvaluechange", function (evt, ui) {
            //return the triggered event
            evt;
            
            //gets old value of the igRating widget
            ui.oldValue;
            //gets the current selected value of the igRating widget
            ui.value;
        });  
        
        //Initialize
        $(".selector").igRating({
            valueChange : function(evt, ui) {...}
		});

  • destroy

    .destroy( );
    Return Type:
    object
    Return Type Description:
    Returns reference to this igRating.

    Destroys igRating.

    Code Sample

     $(".selector").igRating("destroy");

  • value

    .value( val:number );
    Return Type:
    enumeration
    Return Type Description:
    Can return 'number|object'. If parameter is not "number", then current value rendered with selected css is returned. Otherwise, reference to igRating is returned.

    Gets sets (selected) value.

    • val
    • Type:number
    • New value which is rendered with selected css.

    Code Sample

     $(".selector").igRating("value");

  • ui-igrating-hovered

    Classes applied to the container of hover votes. Default value is "ui-igrating-hovered".

  • ui-igrating ui-state-default ui-widget-content

    Classes applied to the DIV container element. Default value is "ui-igrating ui-state-default ui-widget-content".

  • ui-igrating-selected ui-state-highlight

    Classes applied to the container of selected votes. Default value is "ui-igrating-selected ui-state-highlight".

  • ui-igrating-vote ui-icon ui-icon-star

    Classes applied to the SPAN element of a vote. Default value is "ui-igrating-vote ui-icon ui-icon-star".

  • ui-igrating-votehover

    Class applied to the SPAN element of a vote in hovered state. Default value is "ui-igrating-votehover".

  • ui-igrating-votereadonly

    Classes applied to the SPAN element of a vote in readOnly state. Default value is "ui-igrating-votereadonly".

  • ui-igrating-votereadonlyselected

    Classes applied to the SPAN element of a vote in selected state when igRating is readOnly. Default value is "ui-igrating-votereadonlyselected".

  • ui-igrating-voteselected

    Class applied to the SPAN element of a vote in selected state. Default value is "ui-igrating-voteselected".

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.