2018-07-12 第六十七天 EsayUI

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

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<linkrel="stylesheet"type="text/css"href="themes/default/easyui.css"/>

<linkrel="stylesheet"type="text/css"href="themes/icon.css"/>

<scriptsrc="js/jquery.min.js"type="text/javascript"charset="utf-8"></script>

<scriptsrc="js/jquery.easyui.min.js"type="text/javascript"charset="utf-8"></script>

<scriptsrc="js/easyui-lang-zh_CN.js"type="text/javascript"charset="utf-8"></script>

<style>

body{

background-color:gray;

}

table{

margin-top:70px;

margin-left:100px;

}

tr{

height:40px;

text-align:center;

}

</style>

<scripttype="text/javascript">

$(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>

<divstyle="margin-top:200px;margin-left:450px;">

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

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

<formaction="02主页面.html">

<table>

<tr>

<th>

<inputtype="text"name=""id=""value=""class="easyui-validatebox"data-options="required:true"/>

</th>

</tr>

<tr>

<th>

<inputtype="password"name=""id=""value=""/>

</th>

</tr>

<tr>

<thcolspan="2">

<ahref="#"class="easyui-linkbutton"data-options="iconCls:'icon-ok'"id="sub">提交</a>

<ahref="#"class="easyui-linkbutton"data-options="iconCls:'icon-reload'"id="res">清空</a>

</th>

</tr>

</table>

</form>

</div>

</body>

</html>

三、EasyUI实现后台主页面

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<linkrel="stylesheet"type="text/css"href="themes/default/easyui.css"/>

<linkrel="stylesheet"type="text/css"href="themes/icon.css"/>

<scriptsrc="js/jquery.min.js"type="text/javascript"charset="utf-8"></script>

<scriptsrc="js/jquery.easyui.min.js"type="text/javascript"charset="utf-8"></script>

<style>

#top{

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

}

#topimg{

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;

}

#div1a{

color:#FFFFFF;

}

table{

margin:0pxauto;

margin-top:40px;

}

tr{

height:40px;

text-align:center;

}

</style>

<scripttype="text/javascript">

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

varflag=$("#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>

<bodyclass="easyui-layout">

<divdata-options="region:'north'"style="height:70px;"id="top">

<imgsrc="img/blocks.gif"/>

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

<divid="div1">

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

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

<ahref="#"id="changepwd">修改密码</a>

</div>

<divdata-options="region:'south'"title="bottom"style="height:80px;"></div>

<divdata-options="region:'west'"title="导航信息"style="width:200px;">

<divclass="easyui-accordion"data-options="fit:true,animate:true">

<divtitle="导航一">

<ulclass="easyui-tree"id="tt">

<li>

<ul>

<lidata-options="attributes:{url:'http://www.baidu.com'}">百度一下</li>

<lidata-options="attributes:{url:'http://www.taobao.com'}">淘宝一下</li>

<lidata-options="attributes:{url:'http://www.jd.com'}">京东一下</li>

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>

</div>

<divtitle="导航二">

导航二

</div>

<divtitle="导航三">

导航三

</div>

<divdata-options="region:'east'"title="其他"style="width:150px;"></div>

<divdata-options="region:'center'"title="cen">

<divclass="easyui-tabs"data-options="fit:true"id="tab">

<divtitle="tab1">123</div>

</div>

<divid="update"class="easyui-window"style="width:400px;height:300px;"title="修改密码"data-options="iconCls:'icon-save',modal:true,closed:true">

<table>

<tr>

<th>

<inputtype="text"name=""id=""value=""/>

</th>

</tr>

<tr>

<th>

<inputtype="password"name=""id=""value=""/>

</th>

</tr>

<tr>

<th>

<inputtype="password"name=""id=""value=""/>

</th>

</tr>

<tr>

<thcolspan="2">

<ahref="#"class="easyui-linkbutton"data-options="iconCls:'icon-ok'"id="sub">提交</a>

<ahref="#"class="easyui-linkbutton"data-options="iconCls:'icon-reload'"id="res">清空</a>

</th>

</tr>

</table>

</div>

</body>

</html>

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

2018-07-12 第六十七天 EsayUI相关推荐

网吧服务器全部进不了系统,2018.07.12某网吧因为服务器系统盘健康度导致全体卡死重启的故障分析处理过程...
原标题:2018.07.12某网吧因为服务器系统盘健康度导致全体卡死重启的故障分析处理过程导读: 天晚上20:54接到某网吧电话,说整个网吧大部分电脑自动重启了,而且进不去系统了.立即用电脑远程登录 ...
2018.07.12【2018提高组】模拟B组【NOIP2015模拟10.27】魔法阵
#Description 帕秋莉·诺蕾姬,有着"不动的大图书馆" 的称号,擅长使用各种各样的属性魔法. --<东方求闻史记> 一如既往地,帕秋莉在图书馆中研究着魔法.今 ...
嵌入式 Linux 开发工具篇问题整理//C语言测试（杨辉三角、递归调用实现阶乘、计算器、统计字符串出现次数）//2018.07.12.//
嵌入式 Linux 开发工具篇问题整理 1. 嵌入式开发与传统开发的区别?(同类问题:单片机开发与嵌入式开发的区别) 是否有无操作系统: 2. 移植操作系统的好处有哪些 ...
2018.07.12【2018提高组】模拟B组【NOIP2015模拟10.27】魔道研究
#Description "我希望能使用更多的魔法.不对,是预定能使用啦.最终我要被大家称呼为大魔法使.为此我决定不惜一切努力." --<The Grimoire of Ma ...
【跃迁之路】【522天】程序员高效学习方法论探索系列（实验阶段279-2018.07.12）...
@(跃迁之路)专栏 [跃迁之路]奖励金计划正式开始从2018.7.1起,[跃迁之路]奖励金计划正式起航,从今以后,每月1日,我会将自己个人上月收入的1%计入[跃迁之路]奖励金池,积累到足够金额后,将 ...
2018年12月精选文章目录一览
↑ 点击上方[计算机视觉联盟]关注我们文章太多,想要浏览历史消息很痛苦,今天小编整理了2018年12月的精选文章,让盟友们不再困扰一个一个翻阅(再也翻不到头,总感觉后边还有干货,O(∩_∩)O哈哈~ ...
【正点原子Linux连载】第六十七章 Linux USB驱动实验 -摘自【正点原子】I.MX6U嵌入式Linux驱动开发指南V1.0
1)实验平台:正点原子阿尔法Linux开发板 2)平台购买地址:https://item.taobao.com/item.htm?id=603672744434 2)全套实验源码+手册+视频下载地址: ...
2018年12月8日国际项目经理PMP培训考试报名中
一.郑州杰创PMP培训考试介绍国家外国专家局培训中心2007年起每年授权郑州杰创公司从事PMP培训考试等有关的项目管理资格认证的培训.考生报名资格审核.考试.PMP等证书发放等工作. 二.郑州杰创P ...
打怪升级之小白的大数据之旅(六十七)＜Hive旅程第八站:Hive的函数＞
打怪升级之小白的大数据之旅(六十七) Hive旅程第八站:Hive的函数上次回顾上一章,我们学习了如何对数据进行拆分–分区表与分桶表,使用分区表与分桶表,可以加快我们的查询效率..本章节是Hive ...

2018-07-12 第六十七天 EsayUI

2018-07-12 第六十七天 EsayUI相关推荐

最新文章

热门文章