怎么使用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();
						});
					}
					
				}
			});
		}
	});




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

OpenCV入门:初试牛刀 — 视频播放控制器

视频播放控制器(进度条) #include #include using namespace cv; //创建一个全局的视频变量 CvCapture* video = NULL; /...
  • WSDS_MZM
  • WSDS_MZM
  • 2017年12月30日 16:41
  • 20

十一、轻松搭建网站管理后台

互联网上见到的多数网站都有一个你看不见的更强大的管理后台支持,比如一个新闻网站的管理后台一定有新闻编辑、发布、审核、管理等,一个论坛网站的管理后台一定有用户管理、板块管理、帖子审核等。这一节我们见识一...
  • jiangjingxuan
  • jiangjingxuan
  • 2017年01月25日 11:42
  • 732

Restful后台系统搭建(一)

入行Java Web端已经大概有两年左右了,作为新手小白,一直希望自己做一点什么小功能,考虑过培训时候使用的Spring+status2+mybatis,再配上tomcat部署,但这套框架部署起来很是...
  • w499614870
  • w499614870
  • 2017年04月23日 14:19
  • 601

搭建EasyUI环境

1 安装Web服务器,在http://tomcat.apache.org/download-70.cgi下载Tomcat7安装版本。安装好Tomcat后,启动Tomcat,在浏览器输入http://l...
  • qq_35158351
  • qq_35158351
  • 2016年09月25日 16:46
  • 168

easy_ui之搭建后台界面(一)

1、导入easy UI相关组件 首先我们在项目的webContent目录下新建一个static文件夹,这个文件夹主要存在我们的一个静态资源文件(js,css等),然后我们在官网下载好easy...
  • sj0613xz
  • sj0613xz
  • 2017年12月25日 14:23
  • 90

ios后台搭建 和那些坑

step1.准备tool        1. MyEclipse +tomcat +MySql step2.配置 遇到的问题:1.tomcat 参考链接: http://blog.csdn.net/y...
  • u012956424
  • u012956424
  • 2016年03月20日 18:29
  • 454

初试牛刀 - struts使用

装好了myeclipse,按照网上的一个例子, 即用struts实现用户登录的例子,但是没有成功,没有运行,在保存项目时,就出现了一堆错误。不过不是大概了解了一下struts,说明白点,就是一堆别人开...
  • bennyfun79
  • bennyfun79
  • 2007年03月25日 15:45
  • 816

bootstrap搭建后台管理页面

bootstrap搭建后台管理页面管理页面主体包括4部分,顶部导航栏,左侧导航栏,中间正文页和底部的页脚。其中左侧和顶部使用的是bootstrap的导航和下拉菜单组件,主体页面为了演示方便,使用了if...
  • xwxyjy
  • xwxyjy
  • 2017年03月03日 16:42
  • 5112

ThinkPHP之后台框架搭建

今天把代码移动TP下,发现了好多坑。首先,在Home模块下我引用{$Think.const.模块名称}可以,但是在我自定义的Admin模块下就不可以了!找了一天原因,郁闷! 后台管理应该属于管理员的范...
  • yexudengzhidao
  • yexudengzhidao
  • 2017年02月03日 16:35
  • 307

关于 codeigniter 前后台目录搭建

1.原始目录结构如下,在原始目录结构新建入口文件 home 和 admin 文件夹 分别是 前后台,index.php,admin.php 分别是前后台的入口文件。 2. home...
  • a7282787
  • a7282787
  • 2015年12月09日 14:54
  • 735
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:怎么使用easy_ui搭建后台ui--初试牛刀(上)登陆页面的搭建
举报原因:
原因补充:

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