简单的EasyUI登录界面

使用easyui自带的样式等，做的一个简单的登录界面，效果如下：

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width" /><title>用户登录</title><script src="~/Plugins/easyui-1.4.4/jquery.min.js"></script><script src="~/Plugins/easyui-1.4.4/jquery.easyui.min.js"></script><link href="~/Plugins/easyui-1.4.4/themes/gray/easyui.css" rel="stylesheet" /><link href="~/Plugins/easyui-1.4.4/themes/icon.css" rel="stylesheet" /><script type="text/javascript">document.onkeydown = function (e) {var event = e || window.event;var code = event.keyCode || event.which || event.charCode;if (code == 13) {login();}}$(function () {$("input[name='login']").focus();});function cleardata() {$('#loginForm').form('clear');}function login() {if ($("input[name='login']").val() == "" || $("input[name='password']").val() == "") {$("#showMsg").html("用户名或密码为空，请输入");$("input[name='login']").focus();} else {//ajax异步提交$.ajax({type: "POST",   //post提交方式默认是geturl: "login.action",data: $("#loginForm").serialize(),   //序列化error: function (request) {      // 设置表单提交出错$("#showMsg").html(request);  //登录错误提示信息},success: function (data) {document.location = "index.action";}});}}</script>
</head>
<body><div id="loginWin" class="easyui-window" title="登录" style="width:350px;height:188px;padding:5px;"minimizable="false" maximizable="false" resizable="false" collapsible="false"><div class="easyui-layout" fit="true"><div region="center" border="false" style="padding:5px;background:#fff;border:1px solid #ccc;"><form id="loginForm" method="post"><div style="padding:5px 0;"><label for="login">帐号:</label><input type="text" name="login" style="width:260px;" /></div><div style="padding:5px 0;"><label for="password">密码:</label><input type="password" name="password" style="width:260px;" /></div><div style="padding:5px 0;text-align: center;color: red;" id="showMsg"></div></form></div><div region="south" border="false" style="text-align:right;padding:5px 0;"><a class="easyui-linkbutton" iconcls="icon-ok" href="javascript:void(0)" onclick="login()">登录</a></div></div></div>
</body>
</html>

简单的EasyUI登录界面相关推荐

一个简单的用户登录界面
今天我们学习了如何实现一个简单的用户登陆界面,具体要用到两个jsp和一个servlet,具体操作如下: 首先创建一个用户登录界面,inputview.jsp,其源代码如下所示: <!DOCTYP ...
Java简单的用户登录界面+MySQL
1 概述一个简单的Swing登录界面,使用了简单的JDBC. 如图: 2 UI 2.1 主界面主界面使用了31网格布局+三个JPanel,中间的JPanel使用了22网格布局: import ja ...
用Android Studio设计一个简单个性的登录界面
一.用到的组件: LinearLaout.TableLayout.FrameLayout.RelativeLout 二.效果图展示: 三.步骤及过程: 1.首先新建一个Project,并在app -& ...
php开发路由器界面,PHP制作简单仿路由器登录界面
在php中,可以使用Header函数用户验证: Header('WWW-Authenticate: Basic realm="USER LOGIN"'); Header('HTTP ...
PHP制作简单仿路由器登录界面
在php中,可以使用Header函数用户验证: Header('WWW-Authenticate: Basic realm="USER LOGIN"'); Header('HTTP ...
在 Android Studio 中创建一个简单的 QQ 登录界面
一,创建一个新的 Android Studio 项目打开 Android Studio,选择 "Start a new Android Studio project",然后填写应 ...
php登录界面模板美化,一款简单好看的登录界面——Typecho美化包 Sign-Page-For-Typecho...
Loading... 一款对Typecho后台登录的美化首发于 MBRBlog 和 Github ![ ][1] ---------- 源码包只有200KB,总体制作时间为一周,开发者为学生党,不定 ...
【初级】html教程：写出简单的注册登录界面
首先你要有基本素材,需求见图: 代码如下: <!DOCTYPE html> <html><head><meta charset="utf-8&quo ...
EasyUI 搭建后台登录界面和管理系统主界面
EasyUI介绍 1.EasuyUI介绍: EasyUI:简单的界面设计框架,作用主要是用来设计网站的后台管理系统.帮助程序员快速的构建网站界面. 特点: 基于jQuery的一个UI插件 2.Easy ...

简单的EasyUI登录界面

简单的EasyUI登录界面相关推荐

最新文章

热门文章