Custom Elements Documentation

Properties

color

string

'#ff0000'

Sets or gets the color property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ColorPciker 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="../jqwidgets/styles/jqx.light.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/jqxcolorpicker.js"></script>    <script type="text/javascript">        JQXElements.settings["colorPickerSettings"] =        {            width:250,height:250, color:"#ffff00", theme:"light"        }    </script></head><body>   <jqx-color-picker settings="colorPickerSettings"></jqx-color-picker></body></html>

colorMode

string

'saturation'

Sets or gets the colorMode property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ColorPciker 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="../jqwidgets/styles/jqx.light.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/jqxcolorpicker.js"></script>    <script type="text/javascript">        JQXElements.settings["colorPickerSettings"] =        {            width:250,height:250, colorMode:"hue", theme:"light"        }    </script></head><body>   <jqx-color-picker settings="colorPickerSettings"></jqx-color-picker></body></html>

disabled

boolean

false

Sets or gets the disabled property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ColorPciker 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="../jqwidgets/styles/jqx.light.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/jqxcolorpicker.js"></script>    <script type="text/javascript">        JQXElements.settings["colorPickerSettings"] =        {            width:250,height:250,disabled:true, theme:"light"        }    </script></head><body>   <jqx-color-picker settings="colorPickerSettings"></jqx-color-picker></body></html>

height

number

null

Sets or gets the height property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ColorPciker 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="../jqwidgets/styles/jqx.light.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/jqxcolorpicker.js"></script>    <script type="text/javascript">        JQXElements.settings["colorPickerSettings"] =        {            width:250,height:250, theme:"light"        }    </script></head><body>   <jqx-color-picker settings="colorPickerSettings"></jqx-color-picker></body></html>

showTransparent

boolean

false

Sets or gets the showTransparent property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ColorPciker 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="../jqwidgets/styles/jqx.light.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/jqxcolorpicker.js"></script>    <script type="text/javascript">        JQXElements.settings["colorPickerSettings"] =        {            width:250,height:250, theme:"light",showTransparent:true        }    </script></head><body>   <jqx-color-picker settings="colorPickerSettings"></jqx-color-picker></body></html>

width

number

null

Sets or gets the width property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ColorPciker 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="../jqwidgets/styles/jqx.light.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/jqxcolorpicker.js"></script>    <script type="text/javascript">        JQXElements.settings["colorPickerSettings"] =        {            width:250,height:250, theme:"light"        }    </script></head><body>   <jqx-color-picker settings="colorPickerSettings"></jqx-color-picker></body></html>

colorchange

Event

Code examples

Bind to the colorchange event of jqxColorPicker.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ColorPciker 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="../jqwidgets/styles/jqx.light.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/jqxcolorpicker.js"></script>    <script type="text/javascript">        JQXElements.settings["colorPickerSettings"] =        {            width:250,height:250, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-color-picker").addEventListener("colorchange", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-color-picker settings="colorPickerSettings"></jqx-color-picker></body></html>

getColor

Method

Parameter	Type	Description
None

Return Value
Object

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ColorPciker 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="../jqwidgets/styles/jqx.light.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/jqxcolorpicker.js"></script>    <script type="text/javascript">        JQXElements.settings["colorPickerSettings"] =        {            width:250,height:250, theme:"light"        }	window.onload = function() {		var result = document.querySelector("jqx-color-picker").getColor();								}    </script></head><body>   <jqx-color-picker settings="colorPickerSettings"></jqx-color-picker></body></html>

setColor

Method

Parameter	Type	Description
color	object/string	hex color string or object with object.r, object.g, object.b number properties. Each property value should be from 0 to 255.

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ColorPciker 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="../jqwidgets/styles/jqx.light.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/jqxcolorpicker.js"></script>    <script type="text/javascript">        JQXElements.settings["colorPickerSettings"] =        {            width:250,height:250, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-color-picker").setColor('#ffaaff');								}    </script></head><body>   <jqx-color-picker settings="colorPickerSettings"></jqx-color-picker></body></html>

Custom Elements Documentation

Properties

Events

Code examples

Methods