Open In App

How to design login dialog using jQuery EasyUI Mobile ?

Last Updated : 14 Dec, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

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: 

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: 
 




 


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        How to design menu using jQuery EasyUI Mobile ?
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                How to design tree structure for files using jQuery EasyUI Mobile ?
            

        
    
        
            

                How to design accordion using jQuery EasyUI Mobile ?
            

        
    
        
            

                How to design badges for mobiles using jQuery EasyUI Mobile ?
            

        
    
        
            

                How to design datalists for mobiles using jQuery EasyUI Mobile ?
            

        
    
        
            

                How to design buttons for mobiles using jQuery EasyUI Mobile?
            

        
    
        
            

                How to design menu using jQuery EasyUI Mobile ?
            

        
    
        
            

                How to design navigation panel with ajax loading using jQuery EasyUI Mobile ?
            

        
    
        
            

                How to design tabs and pills using jQuery EasyUI Mobile ?
            

        
    
        
            

                EasyUI jQuery dialog widget
            

        
    
        
            

                How to create lists and links using jQuery EasyUI Mobile ?
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
G

        

            
        

        

                                    


                                    

                                        geetanjali16                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox