Custom Elements Documentation

Properties

checked

boolean

false

Sets or gets the checked property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>SwitchButton Custom Element Settings</title>    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxswitchbutton.js"></script>    <script>        JQXElements.settings["switchButtonSettings"] =        {			checked:true, theme:"light"        }    </script></head><body>   <jqx-switch-button settings="switchButtonSettings"></jqx-switch-button></body></html>

disabled

boolean

false

Sets or gets the disabled property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>SwitchButton Custom Element Settings</title>    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxswitchbutton.js"></script>    <script>        JQXElements.settings["switchButtonSettings"] =        {			disabled:true, theme:"light"        }    </script></head><body>   <jqx-switch-button settings="switchButtonSettings"></jqx-switch-button></body></html>

height

number

null

Sets or gets the height property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>SwitchButton Custom Element Settings</title>    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxswitchbutton.js"></script>    <script>        JQXElements.settings["switchButtonSettings"] =        {			theme:"light"        }    </script></head><body>   <jqx-switch-button settings="switchButtonSettings"></jqx-switch-button></body></html>

orientation

string

'horizontal'

Sets or gets the orientation property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>SwitchButton Custom Element Settings</title>    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxswitchbutton.js"></script>    <script>        JQXElements.settings["switchButtonSettings"] =        {			orientation:"vertical", theme:"light"        }    </script></head><body>   <jqx-switch-button settings="switchButtonSettings"></jqx-switch-button></body></html>

onLabel

string

'On'

Sets or gets the onLabel property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>SwitchButton Custom Element Settings</title>    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxswitchbutton.js"></script>    <script>        JQXElements.settings["switchButtonSettings"] =        {			onLabel:"On", theme:"light"        }    </script></head><body>   <jqx-switch-button settings="switchButtonSettings"></jqx-switch-button></body></html>

offLabel

string

'Off'

Sets or gets the offLabel property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>SwitchButton Custom Element Settings</title>    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxswitchbutton.js"></script>    <script>        JQXElements.settings["switchButtonSettings"] =        {			offLabel:"Off", theme:"light"        }    </script></head><body>   <jqx-switch-button settings="switchButtonSettings"></jqx-switch-button></body></html>

thumbSize

string

'40%'

Sets or gets the thumbSize property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>SwitchButton Custom Element Settings</title>    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxswitchbutton.js"></script>    <script>        JQXElements.settings["switchButtonSettings"] =        {			thumbSize:"'30%'", theme:"light"        }    </script></head><body>   <jqx-switch-button settings="switchButtonSettings"></jqx-switch-button></body></html>

rtl

boolean

false

Sets or gets the rtl property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>SwitchButton Custom Element Settings</title>    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxswitchbutton.js"></script>    <script>        JQXElements.settings["switchButtonSettings"] =        {			rtl:true, theme:"light"        }    </script></head><body>   <jqx-switch-button settings="switchButtonSettings"></jqx-switch-button></body></html>

width

number

null

Sets or gets the width property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>SwitchButton Custom Element Settings</title>    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxswitchbutton.js"></script>    <script>        JQXElements.settings["switchButtonSettings"] =        {			theme:"light"        }    </script></head><body>   <jqx-switch-button settings="switchButtonSettings"></jqx-switch-button></body></html>

checked

Event

Code examples

Bind to the checked event of jqxSwitchButton.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>SwitchButton Custom Element Settings</title>    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxswitchbutton.js"></script>    <script>        JQXElements.settings["switchButtonSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-switch-button").addEventListener("checked", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-switch-button settings="switchButtonSettings"></jqx-switch-button></body></html>

change

Event

Code examples

Bind to the change event of jqxSwitchButton.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>SwitchButton Custom Element Settings</title>    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxswitchbutton.js"></script>    <script>        JQXElements.settings["switchButtonSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-switch-button").addEventListener("change", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-switch-button settings="switchButtonSettings"></jqx-switch-button></body></html>

unchecked

Event

Code examples

Bind to the unchecked event of jqxSwitchButton.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>SwitchButton Custom Element Settings</title>    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxswitchbutton.js"></script>    <script>        JQXElements.settings["switchButtonSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-switch-button").addEventListener("unchecked", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-switch-button settings="switchButtonSettings"></jqx-switch-button></body></html>

check

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>SwitchButton Custom Element Settings</title>    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxswitchbutton.js"></script>    <script>        JQXElements.settings["switchButtonSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-switch-button").check();								}    </script></head><body>   <jqx-switch-button settings="switchButtonSettings"></jqx-switch-button></body></html>

disable

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>SwitchButton Custom Element Settings</title>    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxswitchbutton.js"></script>    <script>        JQXElements.settings["switchButtonSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-switch-button").disable();								}    </script></head><body>   <jqx-switch-button settings="switchButtonSettings"></jqx-switch-button></body></html>

enable

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>SwitchButton Custom Element Settings</title>    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxswitchbutton.js"></script>    <script>        JQXElements.settings["switchButtonSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-switch-button").enable();								}    </script></head><body>   <jqx-switch-button settings="switchButtonSettings"></jqx-switch-button></body></html>

toggle

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>SwitchButton Custom Element Settings</title>    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxswitchbutton.js"></script>    <script>        JQXElements.settings["switchButtonSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-switch-button").toggle();								}    </script></head><body>   <jqx-switch-button settings="switchButtonSettings"></jqx-switch-button></body></html>

uncheck

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>SwitchButton Custom Element Settings</title>    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxswitchbutton.js"></script>    <script>        JQXElements.settings["switchButtonSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-switch-button").uncheck();								}    </script></head><body>   <jqx-switch-button settings="switchButtonSettings"></jqx-switch-button></body></html>

val

Method

Parameter	Type	Description
value	boolean

Return Value
Boolean

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>SwitchButton Custom Element Settings</title>    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxswitchbutton.js"></script>    <script>        JQXElements.settings["switchButtonSettings"] =        {			        }	window.onload = function() {		var result = document.querySelector("jqx-switch-button").val();								}    </script></head><body>   <jqx-switch-button settings="switchButtonSettings"></jqx-switch-button></body></html>

Custom Elements Documentation

Properties

Events

Code examples

Code examples

Code examples

Methods