2018-07-12 第六十七天 EsayUI

最新推荐文章于 2023-03-26 15:33:25 发布

原创最新推荐文章于 2023-03-26 15:33:25 发布 · 313 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍如何使用EasyUI框架快速构建美观且功能丰富的后台管理系统界面，包括登录页面与主页面的设计，以及实现树状菜单、选项卡等交互元素。

EasyUI

一、简介

1.EasuyUI介绍：

EasyUI：简单的界面设计框架，作用主要是用来设计网站的后台管理系统。帮助程序员快速的构建网站界面。

2、EasyUI官网：http://www.jeasyui.com

3、EasyUI使用目录介绍：

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校验弹窗。

EasyUI主页面布局：

注意：先引入EasyUI相关组件。

1 body使用布局样式；

2 使用div进行东南西北的布局；

3 设置可以手动调节大小。

EasyUI主页布局（2）：

1 设置底部网站声明；

2 设置头部网站logo；

3 设置顶部用户退出提示框；

4 设置用户修改密码window窗口；

5 校验密码修改。

EasyUI主页布局（3）：设置树状菜单和选项卡：

1 设置div的class样式为easyui-accordion(分类)；

2 设置ul的class样式为easyui-tree；

3 在ul中创建树菜单即可；

4 在布局的中间部分创建并设置div的class属性为easyui-tabs；

5 在div下创建选项卡面板即可；

EasyUI主页布局 (4) ：设置菜单和选项卡的联动操作：

使用jQuery进行操作即可。

二、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属性对标签的基本功能进行修改操作。

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: gray;

}

table {

margin-top: 70px;

margin-left: 100px;

}

tr {

height: 40px;

text-align: center;

}

</style>

$(function() {

$("#sub").click(function() {

if($(":text").val() == "") {

$.messager.alert('警告', '账号不能为空', 'warning');

} else if($(":password").val() == "") {

$.messager.alert('警告', '密码不能为空', 'warning');

} else {

//表单的提交

$("form").submit();

}

})

$("#res").click(function() {

//清空使用js的对象

$("form")[0].reset();

})

</script>

</head>

<body>

<div style="width: 400px; height: 300px;" class="easyui-panel" title="登录" data-options="iconCls:'icon-liu',closable:false,

collapsible:false,minimizable:true,maximizable:true">

<table>

<tr>

<th>

</th>

</tr>

<tr>

<th>

</th>

</tr>

<tr>

</th>

</tr>

</table>

</form>

</div>

</body>

</html>

三、EasyUI实现后台主页面

<!DOCTYPE html>

<html>

<head>

<style>

#top {

background-image: url(img/layout-browser-hd-bg.gif);

}

#top img {

margin-top: 20px;

margin-left: 40px;

}

#top>span {

font-size: 25px;

color: #FFFFFF;

margin-left: 10px;

}

#div1 {

float: right;

margin-top: 30px;

margin-right: 30px;

color: #FFFFFF;

font-size: 15px;

}

#div1 a {

color: #FFFFFF;

}

table {

margin: 0px auto;

margin-top: 40px;

}

tr {

height: 40px;

text-align: center;

}

</style>

$(function() {

/*****退出操作************/

$("#zx").click(function() {

$.messager.confirm("提示", "是否确认退出？", function(f) {

if(f) {

//进行页面的跳转

window.location.href = "01登录页面.html";

}

})

/*******修改密码***************/

$("#changepwd").click(function() {

$("#update").window("open");

})

/*****确认提交*********/

$("#sub").click(function() {

if($(":text").val() == "") {

$.messager.alert('警告', '旧密码不能为空', 'error');

} else if($(":password").eq(0).val() == "") {

$.messager.alert('警告', '新密码不能为空', 'error');

} else if($(":password").eq(1).val() == "") {

$.messager.alert('警告', '确认密码不能为空', 'error');

} else if($(":password").eq(0).val() != $(":password").eq(1).val()) {

$.messager.alert('警告', '两次比较不一致', 'error');

} else {

//修改成功

$("#update").window("close");

$.messager.show({

title: '提示',

msg: '密码修改成功',

timeout: 5000,

showType: 'show'

});

}

})

/******树形展示***********/

$('#tt').tree({

onClick: function(node) {

console.log(node);

var flag = $("#tab").tabs('exists', node.text);

if(flag) {

//证明该选项卡已经存在

$("#tab").tabs('select', node.text);

} else {

//建立新的选项卡

$('#tab').tabs('add', {

title: node.text,

content: "<iframe src='" + node.attributes.url + "' width='100%' height='98%'></iframe>",

closable: true

});

}

});

})

</script>

</head>

<span>后台管理系统</span>

<span>欢迎admin登录</span>

<a href="javascript:void(0)" id="zx">注销</a>|

</div>

<li>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>

</div>

导航二

</div>

导航三

</div>

</div>

<table>

<tr>

<th>

</th>

</tr>

<tr>

<th>

</th>

</tr>

<tr>

<th>

</th>

</tr>

<tr>

</th>

</tr>

</table>

</div>

</body>

</html>

注：缺少资源素材文件的可以私聊索取