Ignite UI API Reference
mobile.igRating
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
-
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.
-
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 );
Gets sets (selected) value.
returnType="number|object" If parameter is not 'number', then current value rendered with selected css is returned. Otherwise, reference to igRating is returned.- 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'.