核心提示：1.效果如下：(虽然感觉有点丑，但是后台主要是看功能，不看颜值吧) 2.引入必要的文件//引入 jQuery核心库，这里采用的是 2.0 script type = text/JavaScriptsr...
1.效果如下：(虽然感觉有点丑，但是后台主要是看功能，不看颜值吧)
2.引入必要的文件
//引入 jQuery核心库，这里采用的是 2.0 < script type = "text/JavaScript"src = "easyui/jquery.min.js" > </script> //引入jQuery EasyUI核心库，这里采用的是1.3.6 < script type = "text/javascript"src = "easyui/jquery.easyui.min.js" > </script> //引入EasyUI中文提示信息 < script type = "text/javascript"src = "easyui/locale/easyui-lang-zh_CN.js" > </script> //引入自己开发的JS文件 < script type = "text/javascript"src = "js/index.js" > </script> // 引入EasyUI核心UI文件CSS < link rel = "stylesheet"type = "text/css"href = "easyui/themes/default/easyui.css" / > //引入 EasyUI图标文件 < link rel = "stylesheet"type = "text/css"href = "easyui/themes/icon.css" / > //引入自己的js文件和css文件 < script type = "text/javascript"src = "js/login.js" > </script> <link rel="stylesheet" type="text/css " href="css / login.css " />"
3.这里使用了dialog,LinkButton(按钮)组件,ValidateBox(验证框)组件
html代码如下：
<html> <head> <title>登录窗口</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> <p id="login"> <p>管理员账号：<input type="text" name="username" class="textbox" id="username" /></p> <p>管理员密码：<input type="text" name="password" class="textbox" id="password" /></p> </p> <p id="btn"> <a href="#" class="easyui-linkbutton">登录</a> </p> <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/login.js"></script> </body> </html>
css代码：
#login{
padding:6px 0 0 0;
}
p{
height: 22px;
line-height: 22px;
padding: 4px 0 0 25px;
}
#btn{
text-align: center;
}
.easyui-linkbutton{
padding: 0,10px;
}
4.
#login {
padding: 6px 0 0 0;
}
p {
height: 22px;
line-height: 22px;
padding: 4px 0 0 25px;
}
#btn {
text-align: center;
}
.easyui-linkbutton {
padding: 0,10px;
}
5.使用js调用加载UI组件
$('#login').dialog({
title: "登录后台",
width: "300",
height: "180",
modal: true,
//不可修改
iconCls: "icon-login",
//登录图标
buttons: "#btn" //对话框按钮
});
6.使用validatebox对输入框进行验证
//管理员账号验证
$('#username').validatebox({
required: true,
missingMessage: "请输入管理员账号",
invalidMessage: "管理员账号不得为空！",
});
//管理员密码验证
$('#password').validatebox({
required: true,
missingMessage: "请输入管理员密码",
invalidMessage: "管理员密码不得为空！"
});
if (!$('#username').validatebox('isValid')) {
$('#username').focus();
} else if (!$('#password').validatebox('isValid')) {
$('#password').focus();
}
7.点击登录
$('#btn a').click(function() {
if (!$('#username').validatebox('isValid')) {
$('#username').focus();
} else if (!$('#password').validatebox('isValid')) {
$('#password').focus();
} else {
$.ajax({
url: 'checklogin.php',
type: "post",
data: {
username: $('#username').val(),
password: $('#password').val(),
},
beforeSend: function() {
$.messager.progress({
text: '正在登录中...',
});
},
success: function(data, response, status) {
$.messager.progress('close');
if (data > 0) {
} else {
$.messager.alert('登录失败！', '用户名或者密码不正确！', 'warning',
function() {
$('#password').select();
});
}
}
});
}
});
