Trigger events of jqxWindow in jqxDocking

In this post, we will show you how to trigger the jqxWindow events and change its settings when the widget is used in a jqxDocking. Let’s create an instance of the jqxDocking widget with two instances of jqxWindow.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdocking.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#docking').jqxDocking({ theme: theme, orientation: 'horizontal', width: 680, mode: 'docked' });
});
</script>
</head>
<body class='default'>
<div id="docking">
<div>
<div id="window1" style="height: 220px;">
<div>
Window 1</div>
<div>
</div>
</div>
<div id="window2" style="height: 220px">
<div>
Window 2</div>
<div>
</div>
</div>
</div>
</div>
</body>
</html>
If you want to invoke a method of jqxWindow, set a property or trigger its events, you need to select the jqxWindow by Id and call its jqxWindow function. – Binding to an event of jqxWindow:
$("#window1, #window2").bind('close',
function (event) {
});
– Setting a property of jqxWindow:
$("#window1").jqxWindow({ showCollapseButton: true });
– Calling a method of jqxWindow:
$("#window1").jqxWindow('collapse');

About admin


This entry was posted in jQuery, jqxDock, jqxWindow and tagged , , , , , , , , , , , , , . Bookmark the permalink.



Leave a Reply