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

来源：互联网发布：java构造器怎么理解编辑：程序博客网时间：2024/06/05 17:31

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

0 0