Как создать диалог входа в систему с помощью jQuery EasyUI Mobile?
Опубликовано: 22 Декабря, 2021
EasyUI - это платформа HTML5 для использования компонентов пользовательского интерфейса на основе технологий jQuery, React, Angular и Vue. Это помогает создавать функции для интерактивных веб-приложений и мобильных приложений, экономя много времени для разработчиков. В этой статье мы научимся создавать диалог входа в систему и диалог сообщений для мобильных телефонов с помощью плагина jQuery EasyUI.
Загрузки EasyUI для jQuery:
https://www.jeasyui.com/download/index.php
Пожалуйста, позаботьтесь о правильных путях к файлам при реализации кода.
Пример 1: Следующий пример демонстрирует дизайн диалогового окна входа в систему с использованием вышеуказанного плагина. Иконки, используемые в опциях данных, взяты из папки «themes» для загрузок.
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 > |
Выход:
Пример 2: Следующий пример демонстрирует дизайн диалогового окна сообщения для интерфейса входа в систему для мобильных телефонов.
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 > |
Выход:
