Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to design login dialog using jQuery EasyUI Mobile ?

  • Last Updated : 14 Dec, 2020

EasyUI is a 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 to design login dialog and message dialog for mobiles using jQuery EasyUI plugin.

Downloads for EasyUI for jQuery: 

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

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

Please take care of proper file paths while code implementation.

Example 1: The following example demonstrates the design of login dialog box using the above plugin. The icons used in data-options are taken from the downloads “themes” folder.



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>
</head>
  
<body>
    <div class="easyui-navpanel" style="position:relative">
        <!-- m-title,m-toolbar class is used here-->
        <header>
            <div class="m-toolbar">
                <div class="m-title">Basic Dialog</div>
            </div>
        </header>
  
        <div style="text-align:center;margin:50px 30px">
            <a href="javascript:void(0)" 
                class="easyui-linkbutton" 
                data-options="plain:true,outline:true"
                style="width:80px;height:30px" 
                onclick="$('#dialogID')
                    .dialog('open').dialog('center')">
                Login
            </a>
        </div>
  
        <!-- easyui-dialog is used for Dialog box-->
        <div id="dialogID" class="easyui-dialog" 
            style="padding:20px 6px;width:80%;"
            data-options="inline: true, modal: true,
                    closed: true, title: 'Login'">
  
            <div style="margin-bottom:10px">
  
                <!-- easyui-textbox is used for username-->
                <input class="easyui-textbox" 
                    prompt="Username" 
                    style="width:100%;height:30px">
            </div>
  
            <div>
                <input class="easyui-textbox" 
                    type="password" prompt="Password" 
                    style="width: 100%; height: 30px">
            </div>
  
            <!-- dialog-button class is used here-->
            <div class="dialog-button">
                <a href="javascript:void(0)" 
                    class="easyui-linkbutton" 
                    style="width:100%;height:35px"
                    onclick="$('#dialogID').dialog('close')">
                    Sign in
                </a>
            </div>
        </div>
  
        <!-- m-buttongroup class is used here-->
        <footer>
            <div class="m-buttongroup m-buttongroup-justified" 
                style="width:100%">
  
                <a href="https://www.geeksforgeeks.org/about/" 
                    class="easyui-linkbutton" 
                    data-options="iconCls:'icon-large-picture',
                        size:'large', iconAlign:'top',plain:true">
                    About Us
                </a>
  
                <a href="https://www.geeksforgeeks.org/privacy-policy/"
                    class="easyui-linkbutton" 
                    data-options="iconCls:'icon-large-picture',
                    size:'large', iconAlign:'top', plain: true">
                    Privacy Policy
                </a>
                <a href="https://www.geeksforgeeks.org/careers/" 
                    class="easyui-linkbutton"
                    data-options="iconCls:'icon-large-picture',
                    size:'large', iconAlign:'top',plain:true">
                    Careers
                    <span class="m-badge">
                        25
                    </span>
                </a>
            </div>
        </footer>
    </div>
</body>
  
</html>

Output: 
 

 

Example 2: The following example demonstrates the design of message dialog for login interface for mobiles.

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>
</head>
  
<body>
    <div class="easyui-navpanel" style="position:relative">
        <header>
            <div class="m-toolbar">
                <div class="m-title">Message Dialog</div>
            </div>
        </header>
  
        <div style="text-align:center;margin:50px 30px">
            <a href="javascript:void(0)" 
                class="easyui-linkbutton" 
                data-options="plain:true,outline:true"
                style="width:80px;height:30px" 
                onclick="$('#dialogID')
                    .dialog('open').dialog('center')">
                Click me
            </a>
        </div>
  
        <div id="dialogID" class="easyui-dialog" 
            style="padding:20px 6px;width:80%;"
            data-options="inline:true,modal:true,
                closed:true,title:'Information'">
              
<p>This is a message dialog box.</p>
  
  
            <div class="dialog-button">
                <a href="javascript:void(0)" 
                    class="easyui-linkbutton" 
                    style="width:100%;height:35px"
                    onclick="$('#dialogID').dialog('close')">
                    OK
                </a>
            </div>
        </div>
  
        <!-- m-buttongroup class is used here-->
        <footer>
            <div class="m-buttongroup m-buttongroup-justified" 
                style="width:100%">
  
                <a href="https://www.geeksforgeeks.org/about/" 
                    class="easyui-linkbutton" 
                    data-options="iconCls:'icon-large-picture',
                        size:'large',iconAlign:'top',plain:true">
                    About Us
                </a>
                <a href="https://www.geeksforgeeks.org/privacy-policy/"
                    class="easyui-linkbutton" 
                    data-options="iconCls:'icon-large-picture',
                        size:'large', iconAlign:'top',plain:true">
                    Privacy Policy
                </a>
  
                <a href="https://www.geeksforgeeks.org/careers/" 
                    class="easyui-linkbutton" 
                    data-options="iconCls:'icon-large-picture',
                    size:'large', iconAlign:'top',plain:true">
                    Careers
                    <span class="m-badge">
                        25
                    </span>
                </a>
            </div>
        </footer>
    </div>
</body>
  
</html>

Output: 
 

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :