jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
2,037 lines • 106 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../../../Styles/jqx.apireference.css" type="text/css" />
<script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../../scripts/documentation.js"></script>
<meta name="keywords" content="jQuery, Window JavaScript, jQuery Window, Window, Window Widget, jqxWindow" />
<meta name="description" content="This page represents the help documentation of the jqxWindow widget." />
<title>jqxWindow API Reference</title>
<script type="text/javascript">
$(document).ready(function () {
$(".documentation-option-type-click").click(function (event) {
$(event.target).parents('tr').next().find(".property-content").toggle();
});
});
</script>
</head>
<body>
<div id="properties">
<h2 class="documentation-top-header">Properties</h2>
<table class="documentation-table">
<tr>
<th>Name
</th>
<th>Type
</th>
<th>Default
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span7'>autoOpen</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets whether the window will be shown after it's creation.
</p>
<h4>Code examples</h4>
<p>
Set the <code>autoOpen</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ autoOpen: true }); </code></pre>
<p>
Get the <code>autoOpen</code> property.
</p>
<pre><code>var autoOpen = $('#jqxWindow').jqxWindow('autoOpen'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Em9wE/">autoOpen is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span35'>animationType</span>
</td>
<td>
<span>String</span>
</td>
<td>fade
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets window's close and show animation type.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'none'</code></pre>
<pre><code>'fade'</code></pre>
<pre><code>'slide'</code></pre>
<pre><code>'combined'</code></pre>
<h4>Code examples</h4>
<p>
Set the <code>animationType</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ animationType: 'combined' }); </code></pre>
<p>
Get the <code>animationType</code> property:
</p>
<pre><code>var animationType = $('#jqxWindow').jqxWindow('animationType'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/uyK6G/">animationType is set to 'slide'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span51'>collapsed</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines whether the window is collapsed.
</p>
<h4>Code examples</h4>
<p>
Set the <code>collapsed</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ collapsed:true }); </code></pre>
<p>
Get the <code>collapsed</code> property.
</p>
<pre><code>var collapsed = $('#jqxWindow').jqxWindow('collapsed'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/TNFG9/">collapsed is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span13'>collapseAnimationDuration</span>
</td>
<td>
<span>Number</span>
</td>
<td>150
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines the duration in milliseconds of the expand/collapse animation.
</p>
<h4>Code examples</h4>
<p>
Set the <code>collapseAnimationDuration</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ collapseAnimationDuration:500 }); </code></pre>
<p>
Get the <code>collapseAnimationDuration</code> property.
</p>
<pre><code>var duration = $('#jqxWindow').jqxWindow('collapseAnimationDuration'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rp8wZ/">collapseAnimationDuration is set to 3000</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span34'>content</span>
</td>
<td>
<span>String</span>
</td>
<td>''
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets window's content's html content.
</p>
<h4>Code examples</h4>
<p>
Set the <code>content</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ content: 'foobar' }); </code></pre>
<p>
Get the <code>content</code> property:
</p>
<pre><code>var content = $('#jqxWindow').jqxWindow('content'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6zRnz/">content is set to 'New content'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span36'>closeAnimationDuration</span>
</td>
<td>
<span>Number</span>
</td>
<td>350
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets window's close animation duration.
</p>
<h4>Code examples</h4>
<p>
Set the <code>closeAnimationDuration</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ closeAnimationDuration: 200 }); </code></pre>
<p>
Get the <code>closeAnimationDuration</code> property:
</p>
<pre><code>var closeAnimationDuration = $('#jqxWindow').jqxWindow('closeAnimationDuration'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/QDB2M/">closeAnimationDuration is set to 3000</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span41'>closeButtonSize</span>
</td>
<td>
<span>Number</span>
</td>
<td>16
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets window's close button size.
</p>
<h4>Code examples</h4>
<p>
Set the <code>closeButtonSize</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ closeButtonSize: 32}); </code></pre>
<p>
Get the <code>closeButtonSize</code> property:
</p>
<pre><code>var closeButtonSize = $('#jqxWindow').jqxWindow('closeButtonSize'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5LLay/">closeButtonSize is set to 20</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span42'>closeButtonAction</span>
</td>
<td>
<span>String</span>
</td>
<td>hide
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This setting specifies what happens when the user clicks the jqxWindow's close button.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'hide'</code></pre>
<pre><code>'close'-clicking the close button removes the window from the DOM</code></pre>
<h4>Code examples</h4>
<p>
set the <code>closeButtonAction</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ closeButtonAction: 'close'}); </code></pre>
<p>
Get the <code>closeButtonAction</code> property:
</p>
<pre><code>var closeButtonAction = $('#jqxWindow').jqxWindow('closeButtonAction'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/J3KGa/">closeButtonAction is set to 'close'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span46'>cancelButton</span>
</td>
<td>
<span>Object</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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 }.
</p>
<h4>Code examples</h4>
<p>
Set the <code>cancelButton</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ cancelButton: $('#cancelButton')}); </code></pre>
<p>
Get the <code>cancelButton</code> property:
</p>
<pre><code>var cancelButton = $('#jqxWindow').jqxWindow('cancelButton'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/py5PD/">cancelButton is set to $('#cancel')</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span44'>dragArea</span>
</td>
<td>
<span>Object</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<h4>Code examples</h4>
<p>
Set the <code>dragArea</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ dragArea: { left: 300, top: 300, width: 600, height: 600 }}); </code></pre>
<p>
Get the <code>dragArea</code> property:
</p>
<pre><code>var dragArea = $('#jqxWindow').jqxWindow('dragArea'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/n5Fwc/">dragArea is set to {left: 50, top: 50,width: 400,height: 400}</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span10'>draggable</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets whether the window is draggable.
</p>
<h4>Code examples</h4>
<p>
Set the <code>draggable</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ draggable: falde }); </code></pre>
<p>
Get the <code>draggable</code> property:
</p>
<pre><code>var draggable = $('#jqxWindow').jqxWindow('draggable'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/a92dW/">draggable is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span2'>disabled</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets whether the window is disabled.
</p>
<h4>Code examples</h4>
<p>
Set the <code>disabled</code> property .
</p>
<pre><code>$('#jqxWindow').jqxWindow({ disabled:true }); </code></pre>
<p>
Get the <code>disabled</code> property.
</p>
<pre><code>var disabled = $('#jqxWindow').jqxWindow('disabled');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rXVQZ/">disabled is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span1'>height</span>
</td>
<td>
<span>Number/String</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the window's height.
</p>
<h4>Code examples</h4>
<p>
Set the <code>height</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({height:"400px"});</code></pre>
<p>
Get the <code>height</code> property.
</p>
<pre><code>var height = $('#jqxWindow').jqxWindow('height');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/UuWCD/">height is set to 100</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span50'>initContent</span>
</td>
<td>
<span>Function</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Initializes the jqxWindow's content.</p>
<h4>Code example</h4>
<p>
Invoke the <code>initContent</code> method.
</p>
<pre><code>$('#jqxWindow').jqxWindow({initContent: function() {// code for widgets initialization here.}});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/STCPV/">initContent is set to a custom function</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span39'>isModal</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<h4>Code examples</h4>
<p>
Set the <code>isModal</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ isModal: true }); </code></pre>
<p>
Get the <code>isModal</code> property:
</p>
<pre><code>var isModal = $('#jqxWindow').jqxWindow('isModal'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/P927Z/">isModal is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span8'>keyboardCloseKey</span>
</td>
<td>
<span>Number/string</span>
</td>
<td>'esc'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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).
</p>
<h4>Code examples</h4>
<p>
Set the <code>keyboardCloseKey</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ keyboardCloseKey: 13 }); </code></pre>
<p>
Get the <code>keyboardCloseKey</code> property.
</p>
<pre><code>var keyboardCloseKey = $('#jqxWindow').jqxWindow('keyboardCloseKey'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9y5t6/">keyboardCloseKey is set to 32</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span54'>keyboardNavigation</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines whether the keyboard navigation is enabled or disabled.
</p>
<h4>Code examples</h4>
<p>
Set the <code>keyboardNavigation</code> property:
</p>
<pre><code>$('#jqxWindow').jqxWindow({ keyboardNavigation: false }); </code></pre>
<p>
Get the <code>keyboardNavigation</code> property:
</p>
<pre><code>var keyboardNavigation = $('#jqxWindow').jqxWindow('keyboardNavigation'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/z7eHw/">keyboardNavigation is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span3'>minHeight</span>
</td>
<td>
<span>Number/String</span>
</td>
<td>50
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets window's minimum height.
</p>
<h4>Code examples</h4>
<p>
Set the <code>minHeight</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ minHeight: '65px' }); </code></pre>
<p>
Get the <code>minHeight</code> property.
</p>
<pre><code>var minHeight = $('#jqxWindow').jqxWindow('minHeight'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/QACxk/">minHeight is set to '100px'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span4'>maxHeight</span>
</td>
<td>
<span>Number/String</span>
</td>
<td>600
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets window's maximum height.
</p>
<h4>Code examples</h4>
<p>
Set the <code>maxHeight</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ maxHeight: 1000 }); </code></pre>
<p>
Get the <code>maxHeight</code> property.
</p>
<pre><code>var maxHeight = $('#jqxWindow').jqxWindow('maxHeight'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2czFt/">maxHeight is set to 300</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span12'>minWidth</span>
</td>
<td>
<span>Number/String</span>
</td>
<td>50
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets window's minimum width.
</p>
<h4>Code examples</h4>
<p>
Set the <code>minWidth</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ minWidth: '65px' }); </code></pre>
<p>
Get the <code>minWidth</code> property.
</p>
<pre><code>var minWidth = $('#jqxWindow').jqxWindow('minWidth'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mdB6K/">minWidth is set to '100px'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span33'>maxWidth</span>
</td>
<td>
<span>Number/String</span>
</td>
<td>600
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets window's maximum width.
</p>
<h4>Code examples</h4>
<p>
Initialize a jqxWindow with the <code>maxWidth</code> property specified.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ maxWidth: 1000 }); </code></pre>
<p>
Get the <code>maxWidth</code> property.
</p>
<pre><code>var maxWidth = $('#jqxWindow').jqxWindow('maxWidth'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/PfCje/">maxWidth is set to 300</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span43'>modalOpacity</span>
</td>
<td>
<span>Number</span>
</td>
<td>0.3
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the jqxWindow's background displayed over the underlying user interface when the window is in modal dialog mode.
</p>
<h4>Code examples</h4>
<p>
Set the <code>modalOpacity</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ modalOpacity: 0.9}); </code></pre>
<p>
Get the <code>modalOpacity</code> property:
</p>
<pre><code>var modalOpacity = $('#jqxWindow').jqxWindow('modalOpacity'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/nE9A7/">modalOpacity is set to 0.5</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span24'>modalZIndex</span>
</td>
<td>
<span>Number</span>
</td>
<td>18000
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the jqxWindow's z-index when it is displayed as a modal dialog.
</p>
<h4>Code examples</h4>
<p>
Set the <code>modalZIndex</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ modalZIndex: 99999}); </code></pre>
<p>
Get the <code>modalZIndex</code> property:
</p>
<pre><code>var modalZIndex = $('#jqxWindow').jqxWindow('modalZIndex'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/g4w4n/">modalZIndex is set to 9999</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span57'>modalBackgroundZIndex</span>
</td>
<td>
<span>Number</span>
</td>
<td>12990
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the jqxWindow overlay's z-index when it is displayed as a modal dialog.
</p>
<h4>Code examples</h4>
<p>
Set the <code>modalBackgroundZIndex</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ modalBackgroundZIndex: 99999}); </code></pre>
<p>
Get the <code>modalBackgroundZIndex</code> property:
</p>
<pre><code>var modalBackgroundZIndex = $('#jqxWindow').jqxWindow('modalBackgroundZIndex'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/du7Kd/">modalBackgroundZIndex is set to 9999</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span45'>okButton</span>
</td>
<td>
<span>Object</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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 }.
</p>
<h4>Code examples</h4>
<p>
Set the <code>okButton</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ okButton: $('#okButton')}); </code></pre>
<p>
Get the <code>okButton</code> property:
</p>
<pre><code>var okButton = $('#jqxWindow').jqxWindow('okButton'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/py5PD/">okButton is set to $('#ok')</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span40'>position</span>
</td>
<td>
<span>Object/String</span>
</td>
<td>center
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets window's position. The value could be in the following formats: 'center', 'top, left', '{ x: 300, y: 500 }', '[300, 500]'.
</p>
<h4>Code examples</h4>
<p>
Set the <code>position</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ position: { x: 300, y: 400 }}); </code></pre>
<p>
Get the <code>position</code> property:
</p>
<pre><code>var position = $('#jqxWindow').jqxWindow('position'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5LLay/">position is set to 'top,left'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span55'>rtl</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.</p>
<h4>Code example</h4>
<p>
Set the <code>rtl</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({rtl : true}); </code></pre>
<p>
Get the <code>rtl</code> property.
</p>
<pre><code>var rtl = $('#jqxWindow').jqxWindow('rtl'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/e3Q87/">rtl is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span11'>resizable</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables or disables whether the end-user can resize the window.
</p>
<h4>Code examples</h4>
<p>
Set the <code>resizable</code> property .
</p>
<pre><code>$('#jqxWindow').jqxWindow({ resizable: false }); </code></pre>
<p>
Get the <code>resizable</code> property:
</p>
<pre><code>var resizable = $('#jqxWindow').jqxWindow('resizable'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/JFWz6/">resizable is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span38'>showAnimationDuration</span>
</td>
<td>
<span>Number</span>
</td>
<td>350
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets window's show animation duration.
</p>
<h4>Code examples</h4>
<p>
Set the <code>showAnimationDuration</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ showAnimationDuration: 200 }); </code></pre>
<p>
Get the <code>showAnimationDuration</code> property:
</p>
<pre><code>var showAnimationDuration = $('#jqxWindow').jqxWindow('showAnimationDuration'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/N3Mq5/">showAnimationDuration is set to 3000</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span5'>showCloseButton</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets whether a close button will be visible.
</p>
<h4>Code examples</h4>
<p>
Set the <code>showCloseButton</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ showCloseButton: true }); </code></pre>
<p>
Get the <code>showCloseButton</code> property.
</p>
<pre><code>var showCloseButton = $('#jqxWindow').jqxWindow('showCloseButton'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/s8aq3/">showCloseButton is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span47'>showCollapseButton</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets whether the collapse button will be visible.
</p>
<h4>Code examples</h4>
<p>
Set the <code>showCollapseButton</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ showCollapseButton: true }); </code></pre>
<p>
Get the <code>showCollapseButton</code> property.
</p>
<pre><code>var showCollapseButton = $('#jqxWindow').jqxWindow('showCollapseButton'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LVaJn/">showCollapseButton is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span63'>theme</span>
</td>
<td>
<span>String</span>
</td>
<td>''
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the widget's theme.
</p>
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:
<ul>
<li>Include the theme's CSS file after jqx.base.css.<br />
The following code example adds the 'energyblue' theme.
<pre><code>
<pre><code><link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
</code></pre>
</code></pre>
</li>
<li>Set the widget's theme property to 'energyblue' when you initialize it.
</li>
</ul>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mTvjp/">theme is set to 'energyblue'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span9'>title</span>
</td>
<td>
<span>String</span>
</td>
<td>''
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets window's title content.
</p>
<h4>Code examples</h4>
<p>
Set with the <code>title</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ title: '42' }); </code></pre>
<p>
Get the <code>title</code> property:
</p>
<pre><code>var title = $('#jqxWindow').jqxWindow('title'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LRvy3/">title is set to 'Title'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='property-name-disabled'>width</span>
</td>
<td>
<span>Number/String</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the window's width.
</p>
<h4>Code examples</h4>
<p>
Set the <code>width</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({width:"200px"});</code></pre>
<p>
Get the <code>width</code> property.
</p>
<pre><code>var width = $('#jqxWindow').jqxWindow('width');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/YSpgs/">width is set to 300</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span58'>zIndex</span>
</td>
<td>
<span>Number</span>
</td>
<td>9001
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the jqxWindow z-index.
</p>
<h4>Code examples</h4>
<p>
Set the <code>zIndex</code> property.
</p>
<pre><code>$('#jqxWindow').jqxWindow({ zIndex: 99999}); </code></pre>
<p>
Get the <code>zIndex</code> property:
</p>
<pre><code>var zIndex = $('#jqxWindow').jqxWindow('zIndex'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/yf3fU/">zIndex is set to 9999</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<h2 class="documentation-top-header">Events</h2>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span16'>close</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the window is closed.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>close</code> event by type: jqxWindow.
</p>
<pre><code>$('#jqxWindow').on('close', function (event) { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/VKHkX/">Bind to the close event by type: jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span48'>collapse</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the window is collapsed.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>collapse</code> event by type: jqxWindow.
</p>
<pre><code>$('#jqxWindow').on('collapse', function (event) { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/HWGnB/">Bind to the collapse event by type: jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span27'>created</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user create new window.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>created</code> event by type: jqxWindow.
</p>
<pre><code>$('#jqxWindow').on('created', function (event) { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/nCkec/">Bind to the created event by type: jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span49'>expand</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the window is expanded.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>expand</code> event by type: jqxWindow.
</p>
<pre><code>$('#jqxWindow').on('expand', function (event) { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/KBJ3Y/">Bind to the expand event by type: jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span14'>moving</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the window is dragging by the user.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>moving</code> event by type: jqxWindow.
</p>
<pre><code>$('#jqxWindow').on('moving', function (event) { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/JDTvQ/">Bind to the moving event by type: jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span15'>moved</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the window is dropped by the user.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>moved</code> event by type: jqxWindow.
</p>
<pre><code>$('#jqxWindow').on('moved', function (event) { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/CzAch/">Bind to the moved event by type: jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span32'>open</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the window is displayed.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>open</code> event by type: jqxWindow.
</p>
<pre><code>$('#jqxWindow').on('open', function (event) { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/CzAch/">Bind to the open event by type: jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span17'>resizing</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the end-user is resizing the window.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>resizing</code> event by type: jqxWindow.
</p>
<pre><code>$('#jqxWindow').on('resizing', function (event) { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/P3mYy/">Bind to the resizing event by type: jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span18'>resized</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the end-user has resized the window.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>resized</code> event by type: jqxWindow.
</p>
<pre><code>$('#jqxWindow').on('resized', function (event) { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Dbcm2/">Bind to the resized event by type: jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<h2 class="documentation-top-header">Methods</h2>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span25'>bringToFront</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Bringing the window to the front.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>bringToFront</code> method.
</p>
<pre><code>$('#jqxWindow').jqxWindow('bringToFront');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6xyHE/">Invoke the bringToFront method of the jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>close</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Hiding/closing the current window (the action - hide or close depends on the closeButtonAction).</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>close</code> method.
</p>
<pre><code>$('#jqxWindow').jqxWindow('close');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rQ9xj/">closes the jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span31'>collapse</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Collapse the current window.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>collapse</code> method.
</p>
<pre><code>$('#jqxWindow').jqxWindow('collapse');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8qhcP/">collapses the jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span37'>closeAll</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Closing all open windows which are not modal.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>closeAll</code> method.
</p>
<pre><code>$('#jqxWindow').jqxWindow('closeAll');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zQULd/">closes all open windows in the jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span21'>disable</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Disabling the window.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>disable</code> method.
</p>
<pre><code>$('#jqxWindow').jqxWindow('disable');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/HRFLF/">disables the jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span56'>destroy</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Destroys the widget.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>destroy</code> method.
</p>
<pre><code>$('#jqxWindow').jqxWindow('destroy'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/jA9Xp/">destroy the jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span22'>enable</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Enabling the window</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>enable</code> method.
</p>
<pre><code>$('#jqxWindow').jqxWindow('enable');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/NAAj4/">enables the jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span30'>expand</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Expand the current window.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>expand</code> method.
</p>
<pre><code>$('#jqxWindow').jqxWindow('expand');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/gRFKM/">expand the jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span53'>focus</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Focuses the window.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>focus</code> method.
</p>
<pre><code>$('#jqxWindow').jqxWindow('focus');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/FKQcW/">focus the jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span23'>isOpen</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Returns true when jqxWindow is opened and false when the jqxWindow is closed</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Boolean</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>isOpen</code> method.
</p>
<pre><code>$('#jqxWindow').jqxWindow('isOpen');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/f6ZAA/">Invoke the isOpen method of the jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span29'>move</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Moving the current window.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>top</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>left</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>move</code> method.
</p>
<pre><code>$('#jqxWindow').jqxWindow('move', 300, 600);</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mF7KQ/">moves the jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span28'>open</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Opening/showing the current window.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>open</code> method.
</p>
<pre><code>$('#jqxWindow').jqxWindow('open');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Rns4L/">opens the jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span52'>resize</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Resizes the window. The 'resizable' property is expected to be set to "true".</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>top</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>left</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>resize</code> method.
</p>
<pre><code>$('#jqxWindow').jqxWindow('resize', 500, 500);</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tzwQX/">resizes the jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span19'>setTitle</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Setting window's title</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>title</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>setTitle</code> method.
</p>
<pre><code>$('#jqxWindow').jqxWindow('setTitle', '<strong>Sample title</strong>');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/g4zfu/">sets title in the jqxWindow.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span20'>setContent</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Setting window's content.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>content</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>setContent</code> method.
</p>
<pre><code>$('#jqxWindow').jqxWindow('setContent', '<p>Sample content</p>');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/fxNU5/">sets content in the jqxWindow.</a>
</div>
</div>
</td>
</tr>
</table>
<br />
</div>
</body>
</html>