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');

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');

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');

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'); 

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
  
  

• Set the widget's theme property to 'energyblue' when you initialize it.

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'); 

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'); 

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'); 

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'); 

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'); 

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'); 

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'); 

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'); 

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'); 

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'); 

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'); 

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'); 

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'); 

Initializes the jqxWindow's content.

Code example

Invoke the initContent method.

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

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'); 

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'); 

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'); 

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'); 

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'); 

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'); 

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'); 

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'); 

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'); 

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'); 

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'); 

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'); 

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'); 

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'); 

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'); 

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'); 

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. }); 

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. }); 

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. }); 

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. }); 

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. }); 

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. }); 

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. }); 

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. }); 

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. }); 

Closing all open windows which are not modal.

Code example

Invoke the closeAll method.

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

Setting window's title

Code example

Invoke the setTitle method.

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

Setting window's content.

Code example

Invoke the setContent method.

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

Disabling the window.

Code example

Invoke the disable method.

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

Enabling the window

Code example

Invoke the enable method.

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

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

Code example

Invoke the isOpen method.

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

Bringing the window to the front.

Code example

Invoke the bringToFront method.

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

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

Code example

Invoke the close method.

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

Opening/showing the current window.

Code example

Invoke the open method.

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

Expand the current window.

Code example

Invoke the expand method.

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

Collapse the current window.

Code example

Invoke the collapse method.

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

Moving the current window.

Code example

Invoke the move method.

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

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

Code example

Invoke the resize method.

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

Focuses the window.

Code example

Invoke the focus method.

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

Destroys the widget.

Code examples

Invoke the destroy method.

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