jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
960 lines (955 loc) • 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 }); </