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:

The next step is to create a DIV element within the body of the html document.
The last step is to initialize the widget by adding the following script to the html document: 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

The result of the above code is:

[フレーム]