Introduction: jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxWindow is used for entering data or viewing information in an application.
The autoOpen property is used to set or return whether the specified window will be shown after its creation or not. It accepts boolean value either true or false.
Syntax:
Set the autoOpen property.
$('#jqxWindow').jqxWindow({ autoOpen: true});
Get the autoOpen property.
var autoOpen = $('#jqxWindow').jqxWindow('autoOpen'); Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.summer.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.10.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/jqxbuttons.js”></script>
Example: This example illustrates the jqxWindow autoOpen property in jQWidgets. For this example, autoOpen is set to false. So, after clicking the “Open the Window” button the specified window will open.
<!DOCTYPE html> <html lang="en">
<head>
<link rel="stylesheet" href=
"jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href=
"jqwidgets/styles/jqx.summer.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.10.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/jqxbuttons.js"></script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
jQWidgets jqxWindow autoOpen Property
</h3>
<div id='jqxwindow'>
<div>Header</div>
<div>GeeksforGeeks</div>
</div>
<button id="button">Open the Window</button>
</center>
<script type="text/javascript">
$(document).ready(function () {
$("#jqxwindow").jqxWindow({
height: 100,
width: 200,
theme: 'energyblue',
autoOpen: false
});
$("#button").click(function () {
$("#jqxwindow").jqxWindow('open');
});
});
</script>
</body>
</html>
|
Output: