Custom Elements Documentation

Properties

count

number

Sets or gets the count property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Rating Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxrating.js"></script>    <script>        JQXElements.settings["ratingSettings"] =        {            count:8, theme:"light"        }    </script></head><body>    <jqx-rating settings="ratingSettings"></jqx-rating></body></html>

disabled

boolean

false

Sets or gets the disabled property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Rating Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxrating.js"></script>    <script>        JQXElements.settings["ratingSettings"] =        {            disabled:true, theme:"light"        }    </script></head><body>    <jqx-rating settings="ratingSettings"></jqx-rating></body></html>

height

number

auto

Sets or gets the height property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Rating Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxrating.js"></script>    <script>        JQXElements.settings["ratingSettings"] =        {            theme:"light"        }    </script></head><body>    <jqx-rating settings="ratingSettings"></jqx-rating></body></html>

itemHeight

number

auto

Sets or gets the itemHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Rating Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxrating.js"></script>    <script>        JQXElements.settings["ratingSettings"] =        {            itemHeight:30, theme:"light"        }    </script></head><body>    <jqx-rating settings="ratingSettings"></jqx-rating></body></html>

itemWidth

number

auto

Sets or gets the itemWidth property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Rating Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxrating.js"></script>    <script>        JQXElements.settings["ratingSettings"] =        {            itemWidth:20, theme:"light"        }    </script></head><body>    <jqx-rating settings="ratingSettings"></jqx-rating></body></html>

precision

number

Sets or gets the precision property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Rating Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxrating.js"></script>    <script>        JQXElements.settings["ratingSettings"] =        {            precision:0.5, theme:"light"        }    </script></head><body>    <jqx-rating settings="ratingSettings"></jqx-rating></body></html>

singleVote

boolean

false

Sets or gets the singleVote property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Rating Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxrating.js"></script>    <script>        JQXElements.settings["ratingSettings"] =        {            singleVote:true, theme:"light"        }    </script></head><body>    <jqx-rating settings="ratingSettings"></jqx-rating></body></html>

value

number

Sets or gets the value property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Rating Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxrating.js"></script>    <script>        JQXElements.settings["ratingSettings"] =        {            value:3, theme:"light"        }    </script></head><body>    <jqx-rating settings="ratingSettings"></jqx-rating></body></html>

width

number

auto

Sets or gets the width property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Rating Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxrating.js"></script>    <script>        JQXElements.settings["ratingSettings"] =        {            theme:"light"        }    </script></head><body>    <jqx-rating settings="ratingSettings"></jqx-rating></body></html>

change

Event

Code examples

Bind to the change event of jqxRating.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Rating Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxrating.js"></script>    <script>        JQXElements.settings["ratingSettings"] =        {                    }	window.onload = function() {		document.querySelector("jqx-rating").addEventListener("change", function(event) {			// Your code here.		});	};    </script></head><body>    <jqx-rating settings="ratingSettings"></jqx-rating></body></html>

disable

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Rating Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxrating.js"></script>    <script>        JQXElements.settings["ratingSettings"] =        {                    }	window.onload = function() {		document.querySelector("jqx-rating").disable();								}    </script></head><body>    <jqx-rating settings="ratingSettings"></jqx-rating></body></html>

enable

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Rating Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxrating.js"></script>    <script>        JQXElements.settings["ratingSettings"] =        {                    }	window.onload = function() {		document.querySelector("jqx-rating").enable();								}    </script></head><body>    <jqx-rating settings="ratingSettings"></jqx-rating></body></html>

getValue

Method

Parameter	Type	Description
None

Return Value
Number

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Rating Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxrating.js"></script>    <script>        JQXElements.settings["ratingSettings"] =        {                    }	window.onload = function() {		var result = document.querySelector("jqx-rating").getValue();								}    </script></head><body>    <jqx-rating settings="ratingSettings"></jqx-rating></body></html>

setValue

Method

Parameter	Type	Description
value	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Rating Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxrating.js"></script>    <script>        JQXElements.settings["ratingSettings"] =        {                    }	window.onload = function() {		document.querySelector("jqx-rating").setValue(20);								}    </script></head><body>    <jqx-rating settings="ratingSettings"></jqx-rating></body></html>

val

Method

Parameter	Type	Description
value	number

Return Value
Number

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Rating Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxrating.js"></script>    <script>        JQXElements.settings["ratingSettings"] =        {                    }	window.onload = function() {		var result = document.querySelector("jqx-rating").val();								}    </script></head><body>    <jqx-rating settings="ratingSettings"></jqx-rating></body></html>

Custom Elements Documentation

Properties

Events

Code examples

Methods