Blogs

In this post, we will show you how to add the jqxDocking widget to your web page.

Let’s start by defining the HTML structure for the jqxDocking. We will have two Docking Zones – panel1 and panel2 and four jqxWindow widgets inside the jqxDocking widget – jqxDock1, jqxDock2, jqxDock3 and jqxDock4. The first docking zone – panel1 will be the container for the jqxDock1 and jqxDock2 and the second docking zone will be the container for jqxDock3 and jqxDock4.

<div id="docking">
	<div id="panel1">
		<div id="jqxDock1" style="height: 70px; width: 300px;">
			<div>jqxDock1</div>
			<div>Content 1</div>
		</div>
		<div id="jqxDock2" style="height: 70px; width: 100px;">
			<div>jqxDock2</div>
			<div>Content 2</div>
		</div>
	</div>
	<div id="panel2">
		<div id="jqxDock3" style="height: 70px; width: 100px;">
			<div>jqxDock3</div>
			<div>Content 3</div>
		</div>
		<div id="jqxDock4" style="height: 70px; width: 100px;">
			<div>jqxDock4</div>
			<div>Content 4</div>
		</div>
	</div>
</div>

Next, we will add references to the external style sheets and JavaScript code files that control the layout of the jqxDocking widget and implement the operations and logic.

<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.7.1.min.js"></script>
<script type="text/javascript" src="scripts/gettheme.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" src="jqwidgets/jqxbuttons.js"></script>

The last step is to add the initialization script. jqxDocking is initialized by selecting the ‘docking’ DIV tag and calling the jqxDocking constructor.

<script type="text/javascript">
    $(document).ready(function () {
        $('#docking').jqxDocking({ theme: 'classic', width: 450 });
    });
</script>

The resulting jQuery Docking widget is shown below:



With jqxDocking, you can easily change the position of the jqxWindow widgets. You can move a window from one docking zone to another with drag and drop.

In the image below, jqxDock4 window is dragged over the first docking zone.



Here’s the result after dropping the jqxDock4 window in the first docking zone.



If you drag and drop a window outside the docking zones, the dragged window goes into a ‘floating’ mode until you drop it into a docking zone.