jQuery Window API

Name Type Default

autoOpen Boolean true

Sets or gets whether the window will be shown after it's creation.

Code examples

Set the autoOpen property.

$('#jqxWindow').jqxWindow({ autoOpen: true });

Get the autoOpen property.

var autoOpen = $('#jqxWindow').jqxWindow('autoOpen');

Try it: autoOpen is set to false

animationType String fade

Sets or gets window's close and show animation type.

Possible Values:

'none'

'fade'

'slide'

'combined'

Code examples

Set the animationType property.

$('#jqxWindow').jqxWindow({ animationType: 'combined' });

Get the animationType property:

var animationType = $('#jqxWindow').jqxWindow('animationType');

Try it: animationType is set to 'slide'

collapsed Boolean false

Determines whether the window is collapsed.

Code examples

Set the collapsed property.

$('#jqxWindow').jqxWindow({ collapsed:true });

Get the collapsed property.

var collapsed = $('#jqxWindow').jqxWindow('collapsed');

Try it: collapsed is set to true

collapseAnimationDuration Number 150

Determines the duration in milliseconds of the expand/collapse animation.

Code examples

Set the collapseAnimationDuration property.

$('#jqxWindow').jqxWindow({ collapseAnimationDuration:500 });

Get the collapseAnimationDuration property.

var duration = $('#jqxWindow').jqxWindow('collapseAnimationDuration');

Try it: collapseAnimationDuration is set to 3000

content String ''

Sets or gets window's content's html content.

Code examples

Set the content property.

$('#jqxWindow').jqxWindow({ content: 'foobar' });

Get the content property:

var content = $('#jqxWindow').jqxWindow('content');

Try it: content is set to 'New content'

closeAnimationDuration Number 350

Sets or gets window's close animation duration.

Code examples

Set the closeAnimationDuration property.

$('#jqxWindow').jqxWindow({ closeAnimationDuration: 200 });

Get the closeAnimationDuration property:

var closeAnimationDuration = $('#jqxWindow').jqxWindow('closeAnimationDuration');

Try it: closeAnimationDuration is set to 3000

closeButtonSize Number 16

Sets or gets window's close button size.

Code examples

Set the closeButtonSize property.

$('#jqxWindow').jqxWindow({ closeButtonSize: 32});

Get the closeButtonSize property:

var closeButtonSize = $('#jqxWindow').jqxWindow('closeButtonSize');

Try it: closeButtonSize is set to 20

closeButtonAction String hide

This setting specifies what happens when the user clicks the jqxWindow's close button.

Possible Values:

'hide'

'close'-clicking the close button removes the window from the DOM

Code examples

set the closeButtonAction property.

$('#jqxWindow').jqxWindow({ closeButtonAction: 'close'});

Get the closeButtonAction property:

var closeButtonAction = $('#jqxWindow').jqxWindow('closeButtonAction');

Try it: closeButtonAction is set to 'close'

cancelButton Object null

Sets or gets cancel button. When a cancel button is specified you can use this button to interact with the user. When any user press the cacel button window is going to be closed and the dialog result will be in the following format: { OK: false, Cancel: true, None: false }.

Code examples

Set the cancelButton property.

$('#jqxWindow').jqxWindow({ cancelButton: $('#cancelButton')});

Get the cancelButton property:

var cancelButton = $('#jqxWindow').jqxWindow('cancelButton');

Try it: cancelButton is set to $('#cancel')

dragArea Object null

Sets or gets the screen area which is available for dragging(moving) the jqxWindow. Example value: { left: 300, top: 300, width: 600, height: 600 }. By default, the dragArea is null which means that the users will be able to drag the window in the document's body bounds.

Code examples

Set the dragArea property.

$('#jqxWindow').jqxWindow({ dragArea: { left: 300, top: 300, width: 600, height: 600 }});

Get the dragArea property:

var dragArea = $('#jqxWindow').jqxWindow('dragArea');

Try it: dragArea is set to {left: 50, top: 50,width: 400,height: 400}

draggable Boolean true

Sets or gets whether the window is draggable.

Code examples

Set the draggable property.

$('#jqxWindow').jqxWindow({ draggable: falde });

Get the draggable property:

var draggable = $('#jqxWindow').jqxWindow('draggable');

Try it: draggable is set to false

disabled Boolean false

Sets or gets whether the window is disabled.

Code examples

Set the disabled property .

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

Get the disabled property.

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

Try it: disabled is set to true

height Number/String null

Sets or gets the window's height.

Code examples

Set the height property.

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

Get the height property.

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

Try it: height is set to 100

initContent Method

Initializes the jqxWindow's content.

Code example

Invoke the initContent method.

$('#jqxWindow').jqxWindow({initContent: function() {// code for widgets initialization here.}});

Try it: initContent is set to a custom function

isModal Boolean false

Sets or gets whether the window is displayed as a modal dialog. If the jqxWindow's mode is set to modal, the window blocks user interaction with the underlying user interface.

Code examples

Set the isModal property.

$('#jqxWindow').jqxWindow({ isModal: true });

Get the isModal property:

var isModal = $('#jqxWindow').jqxWindow('isModal');

Try it: isModal is set to true

keyboardCloseKey Number/string 'esc'

Sets or gets the key which could be used for closing the window when it's on focus. Possible value is every keycode and the 'esc' strig (for the escape key).

Code examples

Set the keyboardCloseKey property.

$('#jqxWindow').jqxWindow({ keyboardCloseKey: 13 });

Get the keyboardCloseKey property.

var keyboardCloseKey = $('#jqxWindow').jqxWindow('keyboardCloseKey');

Try it: keyboardCloseKey is set to 32

keyboardNavigation Boolean true

Determines whether the keyboard navigation is enabled or disabled.

Code examples

Set the keyboardNavigation property:

$('#jqxWindow').jqxWindow({ keyboardNavigation: false });

Get the keyboardNavigation property:

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

Try it: keyboardNavigation is set to false

minHeight Number/String 50

Sets or gets window's minimum height.

Code examples

Set the minHeight property.

$('#jqxWindow').jqxWindow({ minHeight: '65px' });

Get the minHeight property.

var minHeight = $('#jqxWindow').jqxWindow('minHeight');

Try it: minHeight is set to '100px'

maxHeight Number/String 600

Sets or gets window's maximum height.

Code examples

Set the maxHeight property.

$('#jqxWindow').jqxWindow({ maxHeight: 1000 });

Get the maxHeight property.

var maxHeight = $('#jqxWindow').jqxWindow('maxHeight');

Try it: maxHeight is set to 300

minWidth Number/String 50

Sets or gets window's minimum width.

Code examples

Set the minWidth property.

$('#jqxWindow').jqxWindow({ minWidth: '65px' });

Get the minWidth property.

var minWidth = $('#jqxWindow').jqxWindow('minWidth');

Try it: minWidth is set to '100px'

maxWidth Number/String 600

Sets or gets window's maximum width.

Code examples

Initialize a jqxWindow with the maxWidth property specified.

$('#jqxWindow').jqxWindow({ maxWidth: 1000 });

Get the maxWidth property.

var maxWidth = $('#jqxWindow').jqxWindow('maxWidth');

Try it: maxWidth is set to 300

modalOpacity Number 0.3

Sets or gets the jqxWindow's background displayed over the underlying user interface when the window is in modal dialog mode.

Code examples

Set the modalOpacity property.

$('#jqxWindow').jqxWindow({ modalOpacity: 0.9});

Get the modalOpacity property:

var modalOpacity = $('#jqxWindow').jqxWindow('modalOpacity');

Try it: modalOpacity is set to 0.5

modalZIndex Number 18000

Sets or gets the jqxWindow's z-index when it is displayed as a modal dialog.

Code examples

Set the modalZIndex property.

$('#jqxWindow').jqxWindow({ modalZIndex: 99999});

Get the modalZIndex property:

var modalZIndex = $('#jqxWindow').jqxWindow('modalZIndex');

Try it: modalZIndex is set to 9999

modalBackgroundZIndex Number 12990

Sets or gets the jqxWindow overlay's z-index when it is displayed as a modal dialog.

Code examples

Set the modalBackgroundZIndex property.

$('#jqxWindow').jqxWindow({ modalBackgroundZIndex: 99999});

Get the modalBackgroundZIndex property:

var modalBackgroundZIndex = $('#jqxWindow').jqxWindow('modalBackgroundZIndex');

Try it: modalBackgroundZIndex is set to 9999

okButton Object null

Sets or gets submit button. When a ok/submit button is specified you can use this button to interact with the user. When any user press the submit button window is going to be closed and the dialog result will be in the following format: { OK: true, Cancel: false, None: false }.

Code examples

Set the okButton property.

$('#jqxWindow').jqxWindow({ okButton: $('#okButton')});

Get the okButton property:

var okButton = $('#jqxWindow').jqxWindow('okButton');

Try it: okButton is set to $('#ok')

position Object/String center

Sets or gets window's position. The value could be in the following formats: 'center', 'top, left', '{ x: 300, y: 500 }', '[300, 500]'.

Code examples

Set the position property.

$('#jqxWindow').jqxWindow({ position: { x: 300, y: 400 }});

Get the position property:

var position = $('#jqxWindow').jqxWindow('position');

Try it: position is set to 'top,left'

rtl Boolean false

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

Code example

Set the rtl property.

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

Get the rtl property.

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

Try it: rtl is set to true

resizable Boolean true

Enables or disables whether the end-user can resize the window.

Code examples

Set the resizable property .

$('#jqxWindow').jqxWindow({ resizable: false });

Get the resizable property:

var resizable = $('#jqxWindow').jqxWindow('resizable');

Try it: resizable is set to false

showAnimationDuration Number 350

Sets or gets window's show animation duration.

Code examples

Set the showAnimationDuration property.

$('#jqxWindow').jqxWindow({ showAnimationDuration: 200 });

Get the showAnimationDuration property:

var showAnimationDuration = $('#jqxWindow').jqxWindow('showAnimationDuration');

Try it: showAnimationDuration is set to 3000

showCloseButton Boolean true

Sets or gets whether a close button will be visible.

Code examples

Set the showCloseButton property.

$('#jqxWindow').jqxWindow({ showCloseButton: true });

Get the showCloseButton property.

var showCloseButton = $('#jqxWindow').jqxWindow('showCloseButton');

Try it: showCloseButton is set to false

showCollapseButton Boolean false

Sets or gets whether the collapse button will be visible.

Code examples

Set the showCollapseButton property.

$('#jqxWindow').jqxWindow({ showCollapseButton: true });

Get the showCollapseButton property.

var showCollapseButton = $('#jqxWindow').jqxWindow('showCollapseButton');

Try it: showCollapseButton is set to true

theme String ''

title String ''

Sets or gets window's title content.

Code examples

Set with the title property.

$('#jqxWindow').jqxWindow({ title: '42' });

Get the title property:

var title = $('#jqxWindow').jqxWindow('title');

Try it: title is set to 'Title'

width Number/String null

Sets or gets the window's width.

Code examples

Set the width property.

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

Get the width property.

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

Try it: width is set to 300

zIndex Number 9001

Sets or gets the jqxWindow z-index.

Code examples

Set the zIndex property.

$('#jqxWindow').jqxWindow({ zIndex: 99999});

Get the zIndex property:

var zIndex = $('#jqxWindow').jqxWindow('zIndex');

Try it: zIndex is set to 9999

close Event

This event is triggered when the window is closed.

Code examples

Bind to the close event by type: jqxWindow.

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

Try it: Bind to the close event by type: jqxWindow.

collapse Event

This event is triggered when the window is collapsed.

Code examples

Bind to the collapse event by type: jqxWindow.

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

Try it: Bind to the collapse event by type: jqxWindow.

created Event

This event is triggered when the user create new window.

Code examples

Bind to the created event by type: jqxWindow.

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

Try it: Bind to the created event by type: jqxWindow.

expand Event

This event is triggered when the window is expanded.

Code examples

Bind to the expand event by type: jqxWindow.

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

Try it: Bind to the expand event by type: jqxWindow.

moving Event

This event is triggered when the window is dragging by the user.

Code examples

Bind to the moving event by type: jqxWindow.

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

Try it: Bind to the moving event by type: jqxWindow.

moved Event

This event is triggered when the window is dropped by the user.

Code examples

Bind to the moved event by type: jqxWindow.

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

Try it: Bind to the moved event by type: jqxWindow.

open Event

This event is triggered when the window is displayed.

Code examples

Bind to the open event by type: jqxWindow.

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

Try it: Bind to the open event by type: jqxWindow.

resizing Event

This event is triggered when the end-user is resizing the window.

Code examples

Bind to the resizing event by type: jqxWindow.

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

Try it: Bind to the resizing event by type: jqxWindow.

resized Event

This event is triggered when the end-user has resized the window.

Code examples

Bind to the resized event by type: jqxWindow.

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

Try it: Bind to the resized event by type: jqxWindow.

bringToFront Method

Bringing the window to the front.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the bringToFront method.

$('#jqxWindow').jqxWindow('bringToFront');

Try it: Invoke the bringToFront method of the jqxWindow.

close Method

Hiding/closing the current window (the action - hide or close depends on the closeButtonAction).

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the close method.

$('#jqxWindow').jqxWindow('close');

Try it: closes the jqxWindow.

collapse Method

Collapse the current window.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the collapse method.

$('#jqxWindow').jqxWindow('collapse');

Try it: collapses the jqxWindow.

closeAll Method

Closing all open windows which are not modal.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the closeAll method.

$('#jqxWindow').jqxWindow('closeAll');

Try it: closes all open windows in the jqxWindow.

disable Method

Disabling the window.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the disable method.

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

Try it: disables the jqxWindow.

destroy Method

Destroys the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the destroy method.

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

Try it: destroy the jqxWindow.

enable Method

Enabling the window

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the enable method.

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

Try it: enables the jqxWindow.

expand Method

Expand the current window.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the expand method.

$('#jqxWindow').jqxWindow('expand');

Try it: expand the jqxWindow.

focus Method

Focuses the window.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the focus method.

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

Try it: focus the jqxWindow.

isOpen Method

Returns true when jqxWindow is opened and false when the jqxWindow is closed

Parameter	Type	Description
None

Return Value
Boolean

Code example

Invoke the isOpen method.

$('#jqxWindow').jqxWindow('isOpen');

Try it: Invoke the isOpen method of the jqxWindow.

move Method

Moving the current window.

Parameter	Type	Description
top	Number
left	Number

Return Value
None

Code example

Invoke the move method.

$('#jqxWindow').jqxWindow('move', 300, 600);

Try it: moves the jqxWindow.

open Method

Opening/showing the current window.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the open method.

$('#jqxWindow').jqxWindow('open');

Try it: opens the jqxWindow.

resize Method

Resizes the window. The 'resizable' property is expected to be set to "true".

Parameter	Type	Description
top	Number
left	Number

Return Value
None

Code example

Invoke the resize method.

$('#jqxWindow').jqxWindow('resize', 500, 500);

Try it: resizes the jqxWindow.

setTitle Method

Setting window's title

Parameter	Type	Description
title	String

Return Value
None

Code example

Invoke the setTitle method.

$('#jqxWindow').jqxWindow('setTitle', 'Sample title');

Try it: sets title in the jqxWindow.

setContent Method

Setting window's content.

Parameter	Type	Description
content	String

Return Value
None

Code example

Invoke the setContent method.

$('#jqxWindow').jqxWindow('setContent', 'Sample content');

Try it: sets content in the jqxWindow.

¿´¿´Å·ÃÀÒ»¼¶ÊÓÆµ¿á¹·

Properties

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code example

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code example

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Events

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Methods

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