jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
190 lines (189 loc) • 9.09 kB
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, DockPanel, Layout Panel" />
<meta name="description" content="This page represents the help documentation of the jqxDockPanel widget." />
<title>jqxDockPanel 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='Span9'>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>
Gets whether the dockpanel is disabled.
</p>
<h4>Code examples</h4>
<p>
Set the <code>disabled</code> property.
</p>
<pre><code>$('#jqxDockPanel').jqxDockPanel({ disabled: false }); </code></pre>
<p>
Get the <code>disabled</code> property.
</p>
<pre><code>var disabled = $('#jqxDockPanel').jqxDockPanel('disabled');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="">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 dockpanel's height.
</p>
<h4>Code examples</h4>
<p>
Set the <code>height</code> property.
</p>
<pre><code>$('#jqxDockPanel').jqxDockPanel({ height:"300px" }); </code></pre>
<p>
Get the <code>height</code> property.
</p>
<pre><code>var height = $('#jqxDockPanel').jqxDockPanel('height');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Z5ZFZ/">height is set to 210</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span2'>lastchildfill</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>
When true, the last child gets the available width and height.
</p>
<h4>Code examples</h4>
<p>
Set the <code>lastchildfill</code> property.
</p>
<pre><code>$('#jqxDockPanel').jqxDockPanel({ lastchildfill: false }); </code></pre>
<p>
Get the <code>lastchildfill</code> property.
</p>
<pre><code>var lastchildfill = $('#jqxDockPanel').jqxDockPanel('lastchildfill');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9arMQ/">lastchildfill is set to true</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 dockpanel's width.
</p>
<h4>Code examples</h4>
<p>
Set the <code>width</code> property.
</p>
<pre><code>$('#jqxDockPanel').jqxDockPanel({width: '200px'});</code></pre>
<p>
Get the <code>width</code> property.
</p>
<pre><code>var width = $('#jqxDockPanel').jqxDockPanel('width');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/u7z2V/">width is set to 300</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='Span27'>layout</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>
Occurs when the layout is performed.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>layout</code> event by type: jqxDockPanel.
</p>
<pre><code>$('#jqxDockPanel').bind('layout', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pkZtr/">Bind to the layout event by type: jqxDockPanel.</a>
</div>
</div>
</td>
</tr>
</table>
<br />
</div>
</body>
</html>