EasyUI jQuery window widget

Last Updated : 31 Mar, 2021

In this article, we will learn how to design a window using jQuery EasyUI. The window widget is draggable panel that can be used as an application window. It floats on the page and can be moved anywhere required. EasyUI is an HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

Downloads for EasyUI for jQuery:

https://www.jeasyui.com/download/index.php

Syntax:

<input class="easyui-window">

Properties:

title: It is the title text of the window.
collapsible: It defines if the collapsible button is shown.
minimizable: It defines if the minimizable button is shown.
maximizable: it defines if the maximizable button is shown.
closable: It defines if the closable button is shown.
closed: It defines if the window is closed.
zIndex: It is the z-index of the window.
draggable: It defines if the window can be dragged.
resizable: It defines if the window can be resized.
shadow: It defines the shadow of the window. If set to true, the shadow will be shown.
inline: It defines how to make the window stay inside its parent.
modal: It defines if the window is a modal window.
border: It defines the window border style.
constrain: It defines whether to constrain the window position.

Methods:

window: It returns the outer window object.
hcenter: It centers the window horizontally.
vcenter: It centers the window vertically.
center: It centers the window on the screen.

CDN Link: First, add jQuery Easy UI scripts needed for your project.

<script type=”text/javascript” src=”jquery.min.js”> </script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”> </script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>

Example:

HTML

<html>  
<head>              
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css"
          href="themes/metro/easyui.css">  
  
    <link rel="stylesheet" type="text/css"
          href="themes/mobile.css">  
  
    <link rel="stylesheet" type="text/css"
          href="themes/icon.css">  
  
    <!--jQuery library -->
    <script type="text/javascript"
            src="jquery.min.js">  
    </script>  
  
    <!--jQuery libraries of EasyUI -->
    <script type="text/javascript"
        src="jquery.easyui.min.js">  
    </script>  
      
    <!--jQuery library of EasyUI Mobile -->
    <script type="text/javascript"
        src="jquery.easyui.mobile.js">  
    </script>  
  
      
    <script type="text/javascript"> 
        $(document).ready(function (){  
            $('#gfg').window({  
                title: 'GfG', 
                resizable: true 
            });  
      });  
    </script>  
</head>  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>EasyUI jQuery window widget</h3> 
    
   <!-- Create the easyUI window -->
   <input id="gfg" class="easyui-window"> 
</body> 
</html>