您的位置：首页 > 产品设计 > UI/UE

怎么使用easy_ui搭建后台ui--初试牛刀（上）登陆页面的搭建

2017-01-03 22:01 417 查看

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" />

4.这里使用了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>

<div id="login">
<p>管理员账号：<input type="text" name="username" class="textbox" id="username"></p>
<p>管理员密码：<input type="text" name="password" class="textbox" id="password"></p>
</div>
<div id="btn">
<a href="#" class="easyui-linkbutton">登录</a>
</div>

</body>
<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>
</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;
}

5.#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();
});
}

}
});
}
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航