Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

EasyUI jQuery window widget

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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:


<input class="easyui-window">


  • 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.


  • 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=””>  </script> 



    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css"
    <link rel="stylesheet" type="text/css"
    <link rel="stylesheet" type="text/css"
    <!--jQuery library -->
    <script type="text/javascript"
    <!--jQuery libraries of EasyUI -->
    <script type="text/javascript"
    <!--jQuery library of EasyUI Mobile -->
    <script type="text/javascript"
    <script type="text/javascript">
        $(document).ready(function (){ 
                title: 'GfG',
                resizable: true
    <h3>EasyUI jQuery window widget</h3>
   <!-- Create the easyUI window -->
   <input id="gfg" class="easyui-window">




My Personal Notes arrow_drop_up
Last Updated : 31 Mar, 2021
Like Article
Save Article
Similar Reads
Related Tutorials