EasyUI 搭建后台登陆界面和管理系统主界面
1.EasuyUI介绍：
EasyUI：简单的界面设计框架，做用主要是用来设计网站的后台管理系统。帮助程序员快速的构建网站界面。
特色：
基于jQuery的一个UI插件
二、EasyUI官网：
http://www.jeasyui.com
三、EasyUI使用目录介绍：
jeasyui：
demo: easui的效果示例
locale：easyui的语言文件
plugins:easyUI的案例切割的js文件
src:源码
themes:easyUI提供的css样式
jquery.easyui.min.js:easyUI的插件
jquery.min.js：easyUI依赖额jquery文件 javascript
EasyUI的使用
1 导入EasyUI的支持
2 将要使用的EasyUI加入到项目中
导入css文件
导入js文件
3 EasyUI是经过class类选择器方式进行样式添加的
在HTML标签上使用class属性直接引入EasyUI提供的样式支持
4 使用data-options指定一些样式效果，例如：小图标
使用此属性对样式的一些特效进行自定义修改
5 同时可使用style属性自定义
示例：
form登陆css
EasyUI登陆界面：
1 优化登陆页面
登陆界面居中
form表单居中显示
给登陆和重置添加功能
jQuery校验弹窗html
<html>
<head>
<title>登陆</title>
<meta charset="UTF-8" />
<!-- EasyUI使用: 1 将EasyUI提供的js文件和主题（themes）样式存放到项目的指定位置 2 在Html文档中引入EasyUI的插件 3在HTML文档标签上遵循EasyUI的文档规则使用EasyUI完成页面的开发 面板使用(panel)： 建立面板： 在建立一个div标签，并class属性值为："easyui-panel" 面板属性: title:添加面板标题 data-options：给面板添加经常使用的操做。具体参照API 添加按钮 信息提示 注意： EasyUI的使用 经过标签的class属性添加基本EasyUI功能，包括样式和jQuery操做 data-options属性对标签的基本功能进行修改操做 -->
<!--引入主题样式-->
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css" />
<!--引入图标样式-->
<link rel="stylesheet" type="text/css" href="themes/icon.css" />
<!--引入jQuery文件-->
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!--引入EasyUi的js文件-->
<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
<!--声明css代码域-->
<style type="text/css"> table{ margin: auto; margin-top: 20px; } tr{ height: 40px; text-align: center; } </style>
<!--声明js代码域-->
<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) ：设置菜单和选项卡的联动操做java
<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" />
<!--引入jQuery文件-->
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!--引入EasyUi的js文件-->
<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 主页面: 1 引入EasyUI插件 2 使用body布局方式 3 将布局后的每块区域完成内容填充 -->
<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>
<!--声明js代码域-->
<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:"<iframe src="+attrs.url+" style='width:100%;height:98%' frameborder='0'/>" }) } } }) }) /* Json数据格式 {"键名":"值","键名":"值",...........} { "键名":"值", "键名":"值", ........... } * * * */ </script>
</head>
<body class="easyui-layout">
<!--布局：北-->
<div data-options="region:'north'" style="height: 50%;background-image: url(img/layout-browser-hd-bg.gif);">
<!--添加网站Logo-->
<span id="n_logo" style="margin-left: 20px;">
<img src="img/blocks.gif" width="35px" style="margin-top: 5px;"/>
<font color="white" size="4px">506班级管理系统</font>
</span>
<span id="n_title" style="float: right;">
欢迎 admin登陆
<a id="n_title_pwd" href="javascript:void(0)">修改密码</a>|
<a id="n_title_out" href="javascript:void(0)">退出</a>
</span>
</div>
<!--布局：南-->
<div id="sdiv" data-options="region:'south',border:false" style="height:35%;">
©2008-2018 506班级网站,仿冒必纠
</div>
<!--布局：西-->
<div data-options="region:'west',title:'系统菜单',split:true" style="width: 200px;">
<!--分类效果实现-->
<div class="easyui-accordion" data-options="fit:true,border:false">
<div id="" title="经常使用网站" >
<!--建立菜单-->
<ul id="treeMenu" class="easyui-tree">
<li>
<span>购物网站</span>
<!--二级-->
<ul>
<li data-options="attributes:{url:'http://www.taobao.com'}">淘宝网</li>
<li data-options="attributes:{url:'http://www.jd.com'}">京东网</li>
<li data-options="attributes:{url:'http://www.suning.com'}">苏宁易购</li>
</ul>
</li>
<li>
<span>学习网站</span>
<ul>
<li data-options="attributes:{url:'http://www.bjsxt.com'}">北京尚学堂</li>
<li data-options="attributes:{url:'http://www.baidu.com'}">百度一下</li>
<li data-options="attributes:{url:'http://www.so.com'}">360搜索</li>
</ul>
</li>
<li>
<span>娱乐网站</span>
<ul>
<li>斗鱼</li>
<li>虎牙</li>
<li>熊猫</li>
</ul>
</li>
</ul>
</div>
<div id="" title="我的收藏">
菜单二
</div>
<div id="" title="系统信息">
菜单三
</div>
</div>
</div>
<!--布局：中间-->
<div data-options="region:'center'">
<!--选项卡使用-->
<div id="div_tabs" class="easyui-tabs" data-options="fit:true,border:false">
<!--首页-->
<div id="" title="首页" style="background-image:url(img/body.jpg) ;background-size: cover;">
</div>
</div>
</div>
<!--建立修改密码窗口-->
<div id="div_pwd" class="easyui-window" title="修改密码" style="width: 400px;height: 250px;" data-options="collapsible:false,minimizable:false,maximizable:false,closed:true,modal:true">
<table>
<tr>
<td>原有密码:</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>新密码:</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" />
</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>
</div>
</body>
</html>
小结
EasyUI介绍
EasyUI的使用
EasyUI登陆界面node
小知识：jquery
1、javascript:void(0):使超连接失效，http://www.runoob.com/js/js-void.html
2、json:
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。
JSON 键/值对：
JSON 键值对是用来保存 JS 对象的一种方式，和 JS 对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号 "" 包裹，使用冒号 : 分隔，而后紧接着值：
{"firstName": "Json"}
这很容易理解，等价于这条 JavaScript 语句：
{firstName : "Json"}
JSON 和 JS 对象互转：
要实现从对象转换为 JSON 字符串，使用 JSON.stringify() 方法：
var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'
要实现从 JSON 转换为对象，使用 JSON.parse() 方法：
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}
3、行内元素居中：line-height:
4、使用EasyUI给通常标签加样式 举例 class="easyui-linkbutton" data-options:"iconCls:'icon-save'";
5、 ©生成网站底部C符号
6.background-size: cover;，cover覆盖
7.注意data-options="" 是等号
8、modal:true"窗口置顶，别的窗口没法操做 九、closed:true 设置窗口为隐身状态。
源码下载：
连接：https://pan.baidu.com/s/1L-bZT7kwu5CeWzcnqyBJvg 密码：w391
资料：
themes文件夹
jquery.easyui.min.js
jquery.min.js
jEasyUI1.3.6版API中文版(Richie696).
img:
程序员