第三十九章： 后台管理界面--登陆设计
学习要点：
- HTML部分
- CSS部分
- JQuery部分
一、HTML部分
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
</head>
<body>
<div id="login">
<p>管理员账号：<input type="text" class="manager" id="textbox"></p>
<p>管理员密码：<input type="password" class="password" id="textbox"></p>
</div>
<div id="btn">
<a href="#" class="easyui-linkbutton">登陆</a>
</div>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
二、CSS部分
#login{
padding:6px 0 0 0;
}
p{
height:22px;
line-height:22px;
padding:4px 0 0 25px;
}
.textbox{
height:22px;
padding:0 2px;
}
#btn{
text-align:center;
}
.easyui-linkbutton{
padding:0 10xp;
}
三、JQuery部分
$(function(){
$('#login').dialog({
title:'后台管理',
width:300px,
height:180px,
modal:true,
iconCls:'icon-login',
buttons:'#btn',
});
//管理员账号验证
$('#manager').validatebox({
required:true,
missingMessage:'请输入管理员账号：',
invalidMessage:'管理员账号不得为空',
});
//管理员密码验证
$('#password').validatebox({
required:true,
validType：'length[6,30]',
missingMessage:'请输入管理员密码：',
invalidMessage:'管理员密码不得为空',
});
//加载时判断验证
if(!$('#manager').validatebox('isValid')){
$('#manager').focus();
}else if(!$('#password').validatebox('isValid')){
$('#password').focus();
}
//单击登陆
$('#btn a').click(function(){
if(!$('#manager').validatebox('isValid')){
$('#manager').focus();
}else if(!$('#password').validatebox('isValid')){
$('#password').focus();
}else{
alert(提交中……);
}
});
});
作者：Roger_CoderLife
链接：https://blog.csdn.net/Roger_CoderLife/article/details/103905207
本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载