How to design login dialog 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 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%"> class="easyui-linkbutton" data-options="iconCls:'icon-large-picture', size:'large', iconAlign:'top',plain:true"> About Us </a> class="easyui-linkbutton" data-options="iconCls:'icon-large-picture', size:'large', iconAlign:'top', plain: true"> Privacy Policy </a> 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%"> class="easyui-linkbutton" data-options="iconCls:'icon-large-picture', size:'large',iconAlign:'top',plain:true"> About Us </a> class="easyui-linkbutton" data-options="iconCls:'icon-large-picture', size:'large', iconAlign:'top',plain:true"> Privacy Policy </a> 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:
Please Login to comment...