The first step is to create html page and add links to the javascript files and
css dependencies to your project.
The jqxButton element requires the following
files:
The next step is to add the html element within the body of the html page.<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/jqxdata.js"></script><script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
The last step is to initialize the element settings:<jqx-button settings="elementSettings"></jqx-button>
To call a function(method), you need to pass the method name and parameters(if any) in the jqxButton's instance.<script type="text/javascript">JQXElements.settings["elementSettings"] ={width:120,height:40,delay:100, theme:"light"}</script>
To get the result of a function after calling it, you can use the following syntax:<script>window.onload = function () {var element = document.querySelector("jqx-button");element.check();}</script>
To set a property(option), you need to use the property name and value(s) along with the jqxButton's instance.<script>window.onload = function () {var element = document.querySelector("jqx-button");var result = element.val();}</script>
You can also set properties of HTML Elements by using Attributes. Traditionally, attributes are used to set the initial state of an element. Properties with camelCase naming have dash-based attributes. For example: A property "dataSource" will have an attribute called "data-source".window.onload = function() {document.querySelector("jqx-button").delay = 50;}
window.onload = function() {var propertyValue = document.querySelector("jqx-button").delay;}
Event binding can be defined in the HTML as an attribute. The syntax is: 'on-' and the event's name. Event Names with camelCase naming have dash-based attributes. The attribute's value is the event handler's name. The addEventListener function can also be used for event binding.
<script>window.onload = function () {var element = document.querySelector("jqx-button");element.addEventListener("click", function(event){// Your code here});}</script>
<!DOCTYPE html><html lang="en"><head><title id='Description'>Button Custom Element Settings</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/jqxbuttons.js"></script><script type="text/javascript">JQXElements.settings["buttonSettings"] ={width:120,height:40,delay:100, theme:"light"}</script></head><body><{{tagName}} settings="buttonSettings">Click me</{{tagName}}></body></html>
