Working with the jQuery Docking API

In this post, we will show you how to change the Docking window’s position programatically. 1. Add the Docking to your web page. In order to add the Docking widget, we need to add references to the jquery-1.7.1.min.js(jQuery Framework), jqxcore.js(jQWidgets Framework), jqxwindow.js(jQWidgets Window widget) and jqxdocking.js(jQWidgets Docking widget). We add a reference to the Window, because the Docking uses it internally. The initialization of the Docking includes selecting the ‘docking’ DIV tag and calling the jqxDocking constructor.


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.darkblue.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdocking.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#docking').jqxDocking({ theme: 'darkblue', width: 450 });
        });
    </script>
</head>
<body>
    <div id="docking">
        <div>
            <div id="window1" style="height: 70px; width: 300px;">
                <div>
                    jqxDock1</div>
                <div>
                    Docking Window 1.</div>
            </div>
            <div id="window2" style="height: 70px; width: 100px;">
                <div>
                    jqxDock2</div>
                <div>
                    Docking Window 2</div>
            </div>
        </div>
    </div>
</body>
</html>

Here’s the result of the above code:

2. To change the order of the windows inside the jQuery Docking widget, we need to call the ‘move’ function. The ‘move’ function accepts three parameters – the id of the window that we’ll move, the docking panel and the window’s new position inside the panel.

$('#docking').jqxDocking('move', "window2", 0, 0);

Here’s the result after calling the ‘move’ function:

3. Let’s see how to collapse the content of “window1”.

$('#docking').jqxDocking('collapseWindow', "window1");

Below is shown the collapsed docking window:

To expand the window, call the ‘expandWindow’ method and pass the window’s id as parameter.

4. To pin a window(disable drag operation), you can use the ‘pinWindow’ method.

$('#docking').jqxDocking('pinWindow', 'window1');

If you decide to unpin it, call the ‘unpinWindow’ method.

Blogs