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