EasyUI jQuery messager widget

Last Updated : 23 Apr, 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 messager using jQuery EasyUI. messager widget provide different styles of message boxes, including alert, confirm, prompt, progress, etc

Downloads for EasyUI for jQuery:

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

Syntax:

<input class="easyui-messager">

Properties:

ok: The Ok button text.
cancel: The Cancel button text.
msg: message to display on the dialog.
fn: Callback function when clicking on the OK or CANCEL buttons.

Methods:

$.messager.show: window on right bottom of screen.
$.messager.alert: alert window
$.messager.confirm: confirmation message window with Ok and Cancel buttons
$.messager.prompt: window with Ok and Cancel buttons prompting user to enter some text.
$.messager.progress: progress message window

CDN Links: 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

<!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>  
  
    <h1>GeeksforGeeks</h1> 
    <h3>how to make a basic messager using jQuery UI?</h3> 
  
    <script type="text/javascript"> 
        $.messager.confirm('GeeksforGeeks', 
                           'how to make a basic messager using jQuery UI?') 
</script> 
</head>  
</html> 