The first step is to create html page and add links to the javascript files and
css dependencies to your project.
The jqxDockPanel 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/jqxdockpanel.js"></script>
The last step is to initialize the element settings:<jqx-dock-panel settings="elementSettings"></jqx-dock-panel>
To call a function(method), you need to pass the method name and parameters(if any) in the jqxDockPanel's instance.<script type="text/javascript">JQXElements.settings["elementSettings"] ={width:300,height:300, theme:"light"}</script>
To get the result of a function after calling it, you can use the following syntax: To set a property(option), you need to use the property name and value(s) along with the jqxDockPanel's instance.<script>window.onload = function () {var element = document.querySelector("jqx-dock-panel");element.refresh();}</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-dock-panel").height = null;}
window.onload = function() {var propertyValue = document.querySelector("jqx-dock-panel").height;}
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-dock-panel");element.addEventListener("layout", function(event){// Your code here});}</script>
<!DOCTYPE html><html lang="en"><head><title id='Description'>DragDrop 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="../../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" src="../../jqwidgets/jqxdragdrop.js"></script><script type="text/javascript" src="../../scripts/demos.js"></script><style type="text/css">.row {padding: 1px;}.draggable {border: 1px solid #bbb;background-color: #C9ECFF;width: 100px;height: 100px;left: 30px;top: 50px;padding: 5px;z-index: 2;}#draggable-parent {background-color: #eeffee;width: 350px;height: 350px;text-align: center;border: 1px solid #eee;float: left;}.main-container {width: 650px;z-index: 0;}.events {float: right;padding: 10px;font-family: Tahoma;font-size: 13px;}.label {position: relative;font-family: Verdana;font-size: 11px;color: #000;}.drop-target {background-color: #FBFFB5;width: 150px;height: 150px;border: 1px solid #ddd;margin-left: 190px;margin-top: 70px;z-index: 1;}</style><script type="text/javascript">JQXElements.settings["dragdropSettings"] ={dropTarget: '.drop-target',restricter: 'parent'}</script></head><body><div class="main-container"><div id="draggable-parent"><jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"><div class="label">I can be dragged only inside my parent</div></jqx-drag-drop><div class="drop-target"><div class="label">I'm a drop target</div></div></div><div id="events" class="events"></div></div></body></html>
