jQuery Docking API

Name Type Default

cookies Boolean false

Enables or disables the cookies. If the cookies are enabled then the docking layout is going to be saved and kept every time the page is being reloaded.

Code examples

Set the cookies property.

$('#jqxDocking').jqxDocking({ cookies: true });

Get the cookies property.

var cookies = $('#jqxDocking').jqxDocking('cookies');

Try it: cookies is set to true

cookieOptions Object {}

Sets or gets the cookie options.

Code examples

Set the cookieOptions property.

$('#jqxDocking').jqxDocking({ cookieOptions: { domain: 'jqwidgets.com', expires: 90 } });

Get the cookieOptions property.

var cookieOptions = $('#jqxDocking').jqxDocking('cookieOptions');

Try it: cookieOptions is set to { domain: 'jqwidgets.com', expires: 90 }

disabled Boolean false

Sets or gets whether the docking is disabled.

Code examples

Set the disabled property.

$('#jqxDocking').jqxDocking({ disabled:true });

Get the disabled property.

var disabled = $('#jqxDocking').jqxDocking('disabled');

Try it: disabled is set to true

floatingWindowOpacity Number 0.3

Sets or gets the opacity of the window which is currently dragged by the user.

Code examples

Set the floatingWindowOpacity property.

$('#jqxDocking').jqxDocking({ floatingWindowOpacity: 0.5 });

Get the floatingWindowOpacity property.

var floatingWindowOpacity = $('#jqxDocking').jqxDocking('floatingWindowOpacity');

Try it: floatingWindowOpacity is set to 0.5

height Number/String auto

Sets or gets the docking's height.

Code examples

Set the height property.

$('#jqxDocking').jqxDocking({height:"400px"});

Get the height property.

var height = $('#jqxDocking').jqxDocking('height');

Try it: height is set to 300

keyboardNavigation Boolean false

Enables or disables the jqxDocking's keyboard navigation.

Code example

Set the keyboardNavigation property.

$('#jqxDocking').jqxDocking({keyboardNavigation: true});

Get the disabled property.

var keyboardNavigation = $('#jqxDocking').jqxDocking('keyboardNavigation');

Try it: keyboardNavigation is set to true

mode String default

Sets or gets docking's mode.

Possible Values:

'default'-the user can  drop every window inside any docking panel or outside the docking panels

'docked'-the user can drop every window just into the docking panels

'floating'-the user can drop any window just outside of the docking panels.

Code examples

Set the mode property.

$('#jqxDocking').jqxDocking({ mode: 'docked' });

Get the mode property.

var mode = $('#jqxDocking').jqxDocking('mode');

Try it: mode is set to 'docked'

orientation String horizontal

Sets or gets docking's orientation. This property is setting whether the panels are going to be side by side or below each other.

Code examples

Set the orientation property.

$('#jqxDocking').jqxDocking({ orientation: 'vertical' });

Get the vertical property.

var vertical = $('#jqxDocking').jqxDocking('vertical');

Try it: orientation is set to 'vertical'

rtl Boolean false

Sets ot gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

$('#jqxDocking').jqxDocking({rtl : true});

Get the rtl property.

var rtl = $('#jqxDocking').jqxDocking('rtl');

Try it: rtl is set to true

theme String ''

width Number/String auto

Sets or gets the docking's width.

Code examples

Set the width property.

$('#jqxDocking').jqxDocking({width:"200px"});

Get the width property.

var width = $('#jqxDocking').jqxDocking('width');

Try it: width is set to 300

windowsMode Object null

Sets ot gets specific mode for each window. The value of the property is object with keys - window's ids and values - specific modes.

Code examples

Set the windowsMode property.

$('#jqxDocking').jqxDocking({ windowsMode: { 'window0': 'default', 'window1': 'docked' } });

Get the windowsMode property.

var windowsMode = $('#jqxDocking').jqxDocking('windowsMode');

Try it: windowsMode is set to windowsMode: { 'window0': 'default', 'window1': 'docked' }

windowsOffset Number 5

Sets or gets the offset between the windows.

Code examples

Set the windowsOffset property.

$('#jqxDocking').jqxDocking({ windowsOffset: 3 });

Get the windowsOffset property.

var windowsOffset = $('#jqxDocking').jqxDocking('windowsOffset');

Try it: windowsOffset is set to 7

dragStart Event

This event is triggered when the user start to drag any window.

Code examples

Bind to the dragStart event by type: jqxDocking.

$('#jqxDocking').on('dragStart', function (event) { // Some code here. });

Try it: Bind to the dragStart event by type:jqxDocking

dragEnd Event

This event is triggered when the user drop any window.

Code examples

Bind to the dragEnd event by type: jqxDocking.

$('#jqxDocking').on('dragEnd', function (event) { // Some code here. });

Try it: Bind to the dragEnd event by type:jqxDocking

addWindow Method

Adding new window to the docking. This method accepts four arguments. The first one is id of the window we wish to add to the docking. The second argument is window's mode (default, docked, floating) the third argument is the panel's number and the last one is the position into the panel. The last three arguments are optional.

Parameter	Type	Description
windowId	String	window's id
mode	String	window's mode - 'default' or 'float'
panel	Number	panel's index
position	Number	window's index

Return Value
None

Code example

Invoke the addWindow method.

$('#jqxDocking').jqxDocking('addWindow', 'windowId', 'default', 0, 1);

Try it: adds a new window

closeWindow Method

Closing specific window.

Parameter	Type	Description
windowId	String	window's id

Return Value
None

Code example

Invoke the closeWindow method.

$('#jqxDocking').jqxDocking('closeWindow', 'windowId');

Try it: closes a window

collapseWindow Method

Collapsing a specific window.

Parameter	Type	Description
windowId	String	window's id

Return Value
None

Code example

Invoke the collapseWindow method.

$('#jqxDocking').jqxDocking('collapseWindow', 'windowId');

Try it: the first window is collapsed

destroy Method

Destroys the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the destroy method.

$('#jqxDocking').jqxDocking('destroy');

Try it: destroys the jqxDocking

disableWindowResize Method

Disabling the resize of a specific window.

Parameter	Type	Description
windowId	String	window's id

Return Value
None

Code example

Invoke the disableWindowResize method.

$('#jqxDocking').jqxDocking('disableWindowResize', 'windowId');

Try it: disables a window to resize

disable Method

Disabling the jqxDocking.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the disable method.

$('#jqxDocking').jqxDocking('disable');

Try it: disables the jqxDocking

exportLayout Method

Exporting docking's layout into a JSON string.

Parameter	Type	Description
None

Return Value
String

Code example

Invoke the exportLayout method.

$('#jqxDocking').jqxDocking('exportLayout');

Try it: exports a layout out of the jqxDocking

enable Method

Enabling the docking

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the enable method.

$('#jqxDocking').jqxDocking('enable');

Try it: enables the jqxDocking

expandWindow Method

Expanding a specific window.

Parameter	Type	Description
windowId	String	window's id

Return Value
None

Code example

Invoke the expandWindow method.

$('#jqxDocking').jqxDocking('expandWindow', 'windowId');

Try it: the first window is expanded

enableWindowResize Method

Enabling the resize of a specific window which is not docked into a panel.

Parameter	Type	Description
windowId	String	window's id

Return Value
None

Code example

Invoke the enableWindowResize method.

$('#jqxDocking').jqxDocking('enableWindowResize', 'windowId');

Try it: enables a window to resize

focus Method

Focuses the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the focus method.

$('#jqxDocking').jqxDocking('focus');

Try it: Focuses the jqxDocking

hideAllCloseButtons Method

Hiding the close buttons of all windows.

Code example

Invoke the hideAllCloseButtons method.

$('#jqxDocking').jqxDocking('hideAllCloseButtons');

Try it: hides all close buttons

hideAllCollapseButtons Method

Hiding the collapse buttons of all windows.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the hideAllCollapseButtons method.

$('#jqxDocking').jqxDocking('hideAllCollapseButtons');

Try it: hides all collapse buttons

hideCollapseButton Method

Hiding the collapse button of a specific window.

Parameter	Type	Description
windowId	String	window's id

Return Value
None

Code example

Invoke the hideCollapseButton method.

$('#jqxDocking').jqxDocking('hideCollapseButton', 'windowId');

Try it: the collapse button of the firts window is hidden

hideCloseButton Method

Hiding the close button of a specific window.

Parameter	Type	Description
windowId	String	window's id

Return Value
None

Code example

Invoke the hideCloseButton method.

$('#jqxDocking').jqxDocking('hideCloseButton', 'windowId');

Try it: the close button of the firts window is hidden

importLayout Method

Importing the docking layout from a JSON string.

Parameter	Type	Description
Json	String	The json string to import

Return Value
None

Code example

Invoke the importLayout method.

$('#jqxDocking').jqxDocking('importLayout', '{"panel0": {"window2":{"collapsed":false}},"floating":{"window1":{"x":"150px","y":"70px","width":"381px","height":"auto","collapsed":false}},"orientation": "horizontal"}');

Try it: imports a layout in the jqxDocking

move Method

Moving window to specific position into specific panel. This method have three parameters. The first one is id of the window we want to move, the second one is number of the panel where we want to move our window and the last one is the position into this panel.

Parameter	Type	Description
windowId	String	window's id
panel	Number	panel's index
position	Number	window's index in the panel

Return Value
None

Code example

Invoke the move method.

$('#jqxDocking').jqxDocking('move', 'windowId', 0, 1);

Try it: moves a window in the jqxDocking

pinWindow Method

Pinning a specific window

Parameter	Type	Description
windowId	String	window's id

Return Value
None

Code example

Invoke the pinWindow method.

$('#jqxDocking').jqxDocking('pinWindow', 'windowId');

Try it: pins a window

setWindowMode Method

Setting mode to a specific window. This method accepts two arguments - window id and mode type.

Parameter	Type	Description
windowId	String	window's id
mode	String	window's mode - 'default' or 'float'

Return Value
None

Code example

Invoke the setWindowMode method.

$('#jqxDocking').jqxDocking('setWindowMode', 'windowId','default');

Try it: sets the window's mode

showCloseButton Method

Showing the close button of a specific window.

Parameter	Type	Description
windowId	String	window's id

Return Value
None

Code example

Invoke the showCloseButton method.

$('#jqxDocking').jqxDocking('showCloseButton', 'windowId');

Try it: the close button of the firts window is shown

showCollapseButton Method

Showing the collapse button of a specific window.

Parameter	Type	Description
windowId	String	window's id

Return Value
None

Code example

Invoke the showCollapseButton method.

$('#jqxDocking').jqxDocking('showCollapseButton', 'windowId');

Try it: the collapse button of the firts window is shown

setWindowPosition Method

Moving window in floating mode to a specific position.

Parameter	Type	Description
windowId	String	window's id
top	Number
left	Number

Return Value
None

Code example

Invoke the setWindowPosition method.

$('#jqxDocking').jqxDocking('setWindowPosition', 'windowId', 300, 531);

Try it: sets the possition of the window

showAllCloseButtons Method

Showing the close buttons of all windows.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the showAllCloseButtons method.

$('#jqxDocking').jqxDocking('showAllCloseButtons');

Try it: shows all close buttons

showAllCollapseButtons Method

Showing the collapse buttons of all windows.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the showAllCollapseButtons method.

$('#jqxDocking').jqxDocking('showAllCollapseButtons');

Try it: shows all collapse buttons

unpinWindow Method

Unpinning a specific window

Parameter	Type	Description
windowId	String	window's id

Return Value
None

Code example

Invoke the unpinWindow method.

$('#jqxDocking').jqxDocking('unpinWindow', 'windowId');

Try it: unpins a window

Properties

Code examples

Code examples

Code examples

Code examples

Code examples

Code example

Code examples

Code examples

Code example

Code examples

Code examples

Code examples

Events

Code examples

Code examples

Methods

Code example

Code example

Code example

Code examples

Code example

Code example

Code example

Code example

Code example

Code example

Code examples

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example