Skip to content
Related Articles

Related Articles

Improve Article

EasyUI jQuery dialog widget

  • Last Updated : 31 Mar, 2021

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.

In this article, we will learn how to design a dialog using jQuery EasyUI. Dialog widget is a floated and draggable panel that can be used as an application dialog.

Downloads for EasyUI for jQuery:

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

Syntax:

<input class="easyui-dialog">

Properties:



  • title: The dialog title text
  • collapsible: Defines if to show collapsible button
  • minimizable: Defines if to show minimizable button
  • maximizable: Defines if to show maximizable button
  • resizable: Defined if the dialog can be resized
  • toolbar: The top toolbar of dialog
  • buttons: The bottom buttons of dialog

Methods:

  • dialog: Return the outer dialog object.

CDN Link: First, add jQuery Easy UI scripts needed for your project, links are local paths.

<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 1:

HTML




<!doctype html> 
<html
  
<head
    <meta charset="UTF-8"
    <meta name="viewport" content="initial-scale=1.0, 
        maximum-scale=1.0, user-scalable=no"> 
              
    <!-- 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">
        // jQuery
        $(document).ready(function (){ 
            $('#gfg').dialog({ 
                title: 'GfG',
                resizable: true
            }); 
      }); 
    </script
</head
  
<body>
  
    <h1>GeeksforGeeks</h1>
    <h3>EasyUI jQuery Dialog widget</h3>
    <input id="gfg" class="easyui-dialog">
</body>
</html>

Output:

Reference: http://www.jeasyui.com/documentation/

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :