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

原创 2017年01月03日 22:01:36

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




版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

【ssm个人博客项目实战02】easy UI搭建后台管理界面

前面一节我们已经成功搭建ssm项目的环境,接下来我们需要做的就是搭建我们后台管理界面的框架。 这搭建完之后的效果图 基于easy UI搭建后台界面jQuery EasyUI是一组基于jQuery的...

Extjs设计后台管理员登陆页面

Extjs设计后台管理员登陆页面

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

JSP新闻系统之六 后台登陆页面

用户登陆
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)