Documentation

Getting Started

jqxDocking represents a jQuery widget which allows you to manage multiple windows and even the layout of your web page. Each window in the jqxDocking can be dragged around the Web page, docked into docking zones, removed from the docking, collapsed into a minimized state to hide its content, expanded to display its content or pinned in place.
Every UI widget from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.

The first step is to create html page and add links to the javascript files and CSS dependencies to your project. The jqxDocking widget requires the following files: 

<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdocking.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>

The next step is to create a DIV element within the body of the html document. 
<div id="docking">
    <div>
        <div id="window1">
            <div>Header 1</div>
            <div>Content 1</div>
        </div>
        <div id="window2">
            <div>Header 2</div>
            <div>Content 2</div>
        </div>
    </div>
</div>

The last step is to initialize the widget by adding the following script to the html document: 
<script type="text/javascript">
    $(document).ready(function () {
        // Create jqxDocking
        $("#jqxtooltip").jqxDocking({ width: 300, theme: 'classic' });
    });
</script>
The upper code is going to create a jqxDocking widget with the classic theme and width 300px.
To call a function(method), you need to pass the method name and parameters(if any) in the jqxDocking’s constructor. 
$('#docking').jqxDocking('disableWindowResize', 'window1');
To get the result of a function(method) call, you need to pass the method name in the jqxDocking’s constructor and parameters(if any). 
var value = $("#docking").jqxDocking(‘exportLayout’);
To set a property(option), you need to pass the property name and value(s) in the jqxDocking's constructor. 
$("#docking").jqxDocking({ floatingWindowOpacity: 0.4 });
To get a property(option), you need to pass the property name to the jqxDocking's constructor. 
var dockingMode = $("#docking").jqxDocking('mode');
To bind to an event of a UI widget, you can use basic jQuery syntax. Let’s suppose that you want to know when the tooltip is displayed. The example code below demonstrates how to bind to the ‘dragEnd’ event of jqxDocking. 
$("#docking").on('dragEnd', function () {
});

Basic Sample

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jQuery jqxDocking Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdocking.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxDocking
            $("#docking").jqxDocking({ width: 250, theme: 'classic' });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id="docking">
        <div>
            <div id="window1">
                <div>Header 1</div>
                <div>Content 1</div>
            </div>
            <div id="window2">
                <div>Header 2</div>
                <div>Content 2</div>
            </div>
        </div>
    </div>
</body>
</html>

The result of the above code is: