What is Custom Elements
Custom elements is a capability for creating custom HTML tags and use those tags to build modern web sites with cleaner HTML DOM structure and enable easier component reuse. jQWidgets Elements is a set of custom elements designed for business applications with 60+ UI Custom Elements including Grid, Chart, Scheduler, Editor, TreeGrid and more.What is the benefit of using jQWidgets Custom Elements
Your code will be cleaner. The widgets can be used in an easier way as native HTML tags i.e the same way you use HTML Input, HTML Button, HTML Select, etc.
For example, to add a BarGauge you can use the jqx-bar-gauge HTML custom tag.
<jqx -bar-gauge settings="elementSettings"></jqx-bar-gauge>
The tag can use a settings object or you can define all element properties through attributes.
JQXElements.settings["elementSettings"] ={ colorScheme: "scheme02", values: [102, 115, 130, 137], max: 150, tooltip: { visible: true, formatFunction: function (value) { var realVal = parseInt(value); return ('Year: 2016<br />Price Index:' + realVal); } }}</script>To invoke a method, you can do that:
window.onload = function () { var barGauge = document.querySelector('jqx-bar-gauge'); barGauge.val([115,130,140]);}
As you see, we use the method’s name along with the widget’s HTML tag.
To set properties, you can use the property’s name:
barGauge.values = [115,130,140];Binding to events with the native addEventListener function:
barGauge.addEventListener('valueChanged', function(event){ // Your code here });
Full example:
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BarGauge Custom Element Demo</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/jqxdraw.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings["barGaugeSettings"] = { colorScheme: "scheme02", values: [102, 115, 130, 137], max: 150, tooltip: { visible: true, formatFunction: function (value) { var realVal = parseInt(value); return ('Year: 2016<br />Price Index:' + realVal); } } } </script></head><body> <jqx -bar-gauge settings="barGaugeSettings"></jqx></body></html>
All Demos are available on: https://www.jqwidgets.com/customelements/