Day45 EasyUI 搭建后台登录界面和管理系统主界面
EasyUI介绍
1.EasuyUI介绍：
EasyUI：简单的界面设计框架，作用主要是用来设计网站的后台管理系统。帮助程序员快速的构建网站界面。
特点：
基于jQuery的一个UI插件
2、EasyUI官网：
http://www.jeasyui.com
3、EasyUI使用目录介绍：
jeasyui：
demo: easui的效果示例
locale：easyui的语言文件
plugins:easyUI的案例切割的js文件
src:源码
themes:easyUI提供的css样式
jquery.easyui.min.js:easyUI的插件
jquery.min.js：easyUI依赖额jquery文件
EasyUI的使用
1 导入EasyUI的支持
2 将要使用的EasyUI加入到项目中
导入css文件
导入js文件
3 EasyUI是通过class类选择器方式进行样式添加的
在HTML标签上使用class属性直接引入EasyUI提供的样式支持
4 使用data-options指定一些样式效果，例如：小图标
使用此属性对样式的一些特效进行自定义修改
5 同时可以使用style属性自定义
示例：
form登录
EasyUI登录界面：
1 优化登录页面
登录界面居中
form表单居中显示
给登录和重置添加功能
jQuery校验弹窗
<html>
<head>
<title>登录title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="themes/icon.css" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8">script>
<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8">script>
<style type="text/css">
table{
margin: auto;
margin-top: 20px;
}
tr{
height: 40px;
text-align: center;
}
style>
<script type="text/javascript">
/*校验登录信息*/
$(function(){
//登录校验
$("#btnCon").click(function(){
//校验用户信息
if($(":text").val()==""){
//使用EasyUI的信息框进行提示
$.messager.alert('登录提示',"用户名不能为空！","warning");
}else if($(":password").val()==""){
//使用EasyUI的信息框进行提示
$.messager.alert('登录提示',"密码不能为空！","warning");
}else{
$("form").submit();
}
})
//重置
$("#btnCan").click(function(){
$("form").get(0).reset();
})
})
script>
head>
<body>
<div id="panel_login" style="margin: auto;width: 500px;margin-top: 100px;">
<div id="login" class="easyui-panel" title="登录" data-options="iconCls:'icon-mlogin',minimizable:true,maximizable:true
,collapsible:true,closable:true" style="width: 500px;height: 200px;">
<form action="02_main.html" method="get">
<table>
<tr>
<td>用户名:td>
<td>
<input type="text" name="uname"/>
td>
tr>
<tr>
<td>密 码:td>
<td>
<input type="password" name="pwd" />
td>
tr>
<tr>
<td colspan="2">
<a id="btnCon" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save'">登录a>
<a id="btnCan" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">重置a>
td>
tr>
table>
form>
div>
div>
body>
html>EasyUI主页面布局
EasyUI主页面布局：
注意：先引入EasyUI相关组件
1 body使用布局样式
2 使用div进行东南西北的布局
3 设置可以手动调节大小
EasyUI主页布局（2）：
1 设置底部网站声明
2 设置头部网站logo
3 设置顶部用户退出提示框
4 设置用户修改密码window窗口
5 校验密码修改
EasyUI主页布局（3）：设置树状菜单和选项卡
EasyUI主页布局 (4) ：设置菜单和选项卡的联动操作
<html>
<head>
<title>主页面title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="themes/icon.css" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8">script>
<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8">script>
<style type="text/css">
#sdiv {
text-align: center;
font-size: 14px;
font-weight: bold;
line-height: 30px;
background-color: gray;
}
/*修改头部标题样式*/
#n_title {
color: white;
font-size: 14px;
line-height: 40px;
}
/*修改标题超链接样式*/
#n_title a {
text-decoration: none;
color: white;
}
#n_title a:hover {
color: orange;
}
/*修改密码样式*/
#div_pwd table {
margin: auto;
margin-top: 10px;
}
#div_pwd table tr {
height: 40px;
text-align: center;
}
style>
<script type="text/javascript">
/*网页js功能*/
$(function() {
//退出功能
$("#n_title_out").click(function() {
//提示用户是否确定退出
$.messager.confirm("确认对话框", "你真的要退出吗？", function(r) {
//退出
if (r) {
window.location.href = "01_login.html";
}
})
})
//修改密码
$("#n_title_pwd").click(function() {
//打开修改密码窗口
$("#div_pwd").window("open");
})
//确认修改密码
$("#btnCon").click(function() {
//校验原有密码
if ($(":password:eq(0)").val() == "") {
$.messager.alert("原有密码", "原有密码不能为空！", "warning");
} else if ($(":password:eq(1)").val() == "") {
//校验新密码
$.messager.alert("新密码", "新密码不能为空！", "warning");
} else if ($(":password:eq(2)").val() == "") {
//校验确认密码
$.messager.alert("确认密码", "确认密码不能为空！", "warning");
} else if ($(":password:eq(1)").val() != $(":password:eq(2)").val()) {
//校验两次密码
$.messager.alert("密码校验", "两次密码不一致！", "error");
} else {
//关闭密码窗口
$("#div_pwd").window("close");
//$.messager.alert("密码修改","密码修改成功！","info");
$.messager.show({
title: '密码修改',
msg: '密码修改成功，新密码为:'+$(":password:eq(2)").val(),
timeout: 3000,
showType: 'slide'
});
}
})
//取消密码修改
$("#btnCan").click(function(){
$("#div_pwd").window("close");
})
//树状菜单和选项卡的联动
//给菜单添加单击事件
$("#treeMenu").tree({
onClick:function(node){
//控制台打印node内容
//console.log(node);
//获取attributes属性,判断是菜单还是菜单描述
var attrs=node.attributes;
if(attrs==null || attrs.url==null){
return;
}
//判断选项卡是否存在
var has=$("#div_tabs").tabs("exists",node.text);
if(has){
//选中存在的选项卡
$("#div_tabs").tabs("select",node.text);
}else{
//创建新的选项卡面板
$("#div_tabs").tabs("add",{
title:node.text,
closable:true,
content:"