How to design login dialog using jQuery EasyUI Mobile ?
Last Updated :
23 Jul, 2025
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/legal/privacy-policy/"
class="easyui-linkbutton"
data-options="iconCls:'icon-large-picture',
size:'large', iconAlign:'top', plain: true">
Privacy Policy
</a>
<a href="https://accounts.zoho.in/signin?servicename=ZohoRecruit&hide_signup=false&serviceurl=%2Frecruit%2FIAMSecurityError.do%3Fisload%3Dtrue&hide_secure=true"
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/legal/privacy-policy/"
class="easyui-linkbutton"
data-options="iconCls:'icon-large-picture',
size:'large', iconAlign:'top',plain:true">
Privacy Policy
</a>
<a href="https://accounts.zoho.in/signin?servicename=ZohoRecruit&hide_signup=false&serviceurl=%2Frecruit%2FIAMSecurityError.do%3Fisload%3Dtrue&hide_secure=true"
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:
Similar Reads
How to design menu using jQuery EasyUI Mobile ? In this article, we will learn how to design menu list using jQuery EasyUI Mobile plugin. 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 ti
2 min read
How to design accordion using jQuery EasyUI Mobile ? 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. Accordions are HTML contents that toggle between showing and hiding. Do
3 min read
How to design badges for mobiles using jQuery EasyUI Mobile ? 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 about badges for mobile interface. Badge
4 min read
How to design buttons for mobiles using jQuery EasyUI Mobile? 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 to design various button styles for th
4 min read
How to design datalists for mobiles using jQuery EasyUI Mobile ? 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 to design datalists for mobile interfac
4 min read
How to create lists and links using jQuery EasyUI Mobile ? In this article we will learn how to design lists, group them and create links for easy navigation using jQuery EasyUI Mobile.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 mo
4 min read