jQWidgets jqxWindow dragArea Property
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 dragArea property is used to set or get the screen area that is available for dragging or moving the specified jqxWindow. By default, the dragArea is null which means that the users will be able to drag the given window in the document’s body bounds.
Syntax:
Set the dragArea property.
$('#jqxWindow').jqxWindow({ dragArea: {
left:300, top:300, width:600, height:600 }});
Get the dragArea property:
var dragArea = $('#jqxWindow').jqxWindow('dragArea'); 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: The below example illustrates the jqxWindow dragArea property in jQWidgets. In the below example, the dragArea has been set to “left: 10, top: 10, width: 300, and height: 300”.
HTML
<!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> <script type="text/javascript"> $(document).ready(function () { $("#jqxwindow").jqxWindow({ height: 100, width: 150, theme: 'energyblue', dragArea: { left: 10, top: 10, width: 300, height: 300 } }); }); </script></head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> jQWidgets jqxWindow dragArea Property </h3> <div id='content'> <div id='jqxwindow'> <div> Header</div> <div> <div>GeeksforGeeks</div> </div> </div> </div> </center></body> </html> |
Output:
Please Login to comment...