2018-07-12 第六十七天 EsayUI

简介:

EasyUI

一、简介

1.EasuyUI介绍:

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

 

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

 

3EasyUI使用目录介绍:

demo: easui的效果示例;

localeeasyui的语言文件;

plugins:easyUI的案例切割的js文件;

src:源码;

themes:easyUI提供的css样式;

jquery.easyui.min.js:easyUI的插件;

jquery.min.jseasyUI依赖额jquery文件。

EasyUI的使用:

导入EasyUI的支持

将要使用的EasyUI加入到项目中

导入css文件

导入js文件

3 EasyUI是通过class类选择器方式进行样式添加的

HTML标签上使用class属性直接引入EasyUI提供的样式支持

使用data-options指定一些样式效果,例如:小图标

使用此属性对样式的一些特效进行自定义修改

同时可以使用style属性自定义

示例:

form登录

EasyUI登录界面:

优化登录页面:

登录界面居中;

form表单居中显示;

给登录和重置添加功能;

jQuery校验弹窗。

EasyUI主页面布局:

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

1 body使用布局样式;

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

设置可以手动调节大小。

EasyUI主页布局(2):

设置底部网站声明;

设置头部网站logo

设置顶部用户退出提示框;

设置用户修改密码window窗口;

校验密码修改。

EasyUI主页布局(3):设置树状菜单和选项卡:

设置divclass样式为easyui-accordion(分类)

设置ulclass样式为easyui-tree

ul中创建树菜单即可;

在布局的中间部分创建并设置divclass属性为easyui-tabs

div下创建选项卡面板即可;

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

 使用jQuery进行操作即可。

 

二、EasyUI实现登录页面

EasyUI提供的js文件和主题(themes)样式存放到项目的指定位置

Html文档中引入EasyUI的插件

3HTML文档标签上遵循EasyUI的文档规则使用EasyUI完成页面的开发

面板使用(panel)

创建面板:

在创建一个div标签,并class属性值为:"easyui-panel"

面板属性:

title:添加面板标题。

data-options:给面板添加常用的操作。具体参照API

添加按钮。

信息提示。

注意:

EasyUI的使用。

通过标签的class属性添加基本EasyUI功能,包括样式和jQuery操作。

data-options属性对标签的基本功能进行修改操作。

 

<!DOCTYPE html>

<html>

 

<head>

<meta charset="utf-8">

<title></title>

 

<!--引入CSS文件 主题css文件-->

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

<!--引入css的图标样式文件-->

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

 

<!--引入js文件   两个js的顺序是不可以互换的-->

<!--引入 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>

 

<!--引入语言包-->

<script src="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>

<script type="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>

<div style="margin-top: 200pxmargin-left: 450px;">

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

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

<form action="02主页面.html">

<table>

<tr>

<th>账号</th>

<th>

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

</th>

</tr>

<tr>

<th>密码:</th>

<th>

<input type="password" name="" id="" value="" />

 

</th>

</tr>

<tr>

<th colspan="2">

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

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

</th>

</tr>

</table>

</form>

</div>

</div>

</body>

</html>

70

 

三、EasyUI实现后台主页面

<!DOCTYPE html>

<html>

 

<head>

<meta charset="utf-8">

<title></title>

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

#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>

 

<script type="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'密码修改成功',

timeout5000,

showType'show'

});

}

})

 

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

$('#tt').tree({

onClickfunction(node) {

console.log(node);

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

if(flag) {

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

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

else {

//建立新的选项卡

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

titlenode.text,

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

closabletrue

});

}

}

});

})

</script>

 

</head>

 

<body class="easyui-layout">

 

<!--布局:上-->

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

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

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

<div id="div1">

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

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

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

</div>

</div>

<!--布局:下-->

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

<!--布局:左-->

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

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

<div title="导航一">

<ul class="easyui-tree" id="tt">

<li>

<span>购物网站</span>

<ul>

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

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

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

</ul>

 

</li>

<li>

<span>学习网站</span>

<ul>

<li>百度一下</li>

<li>淘宝一下</li>

<li>京东一下</li>

</ul>

</li>

<li>其他网站</li>

</ul>

</div>

 

<div title="导航二">

导航二

</div>

 

<div title="导航三">

导航三

</div>

</div>

 

</div>

<!--布局:右-->

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

<!--布局:中-->

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

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

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

</div>

</div>

 

<!--修改密码的窗口-->

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

<table>

<tr>

<th>旧密码:</th>

<th>

<input type="text" name="" id="" value="" />

</th>

</tr>

<tr>

<th>新密码:</th>

<th>

<input type="password" name="" id="" value="" />

</th>

</tr>

<tr>

<th>确认密码:</th>

<th>

<input type="password" name="" id="" value="" />

</th>

</tr>

<tr>

<th colspan="2">

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

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

</th>

</tr>

</table>

</div>

</body>

</html>

70

 

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

 70

目录
相关文章
|
传感器 自动驾驶 物联网
|
3天前
|
弹性计算 人工智能 架构师
阿里云携手Altair共拓云上工业仿真新机遇
2024年9月12日,「2024 Altair 技术大会杭州站」成功召开,阿里云弹性计算产品运营与生态负责人何川,与Altair中国技术总监赵阳在会上联合发布了最新的“云上CAE一体机”。
阿里云携手Altair共拓云上工业仿真新机遇
|
30天前
|
运维 Cloud Native Devops
一线实战:运维人少,我们从 0 到 1 实践 DevOps 和云原生
上海经证科技有限公司为有效推进软件项目管理和开发工作,选择了阿里云云效作为 DevOps 解决方案。通过云效,实现了从 0 开始,到现在近百个微服务、数百条流水线与应用交付的全面覆盖,有效支撑了敏捷开发流程。
19265 29
|
1月前
|
人工智能 自然语言处理 搜索推荐
阿里云Elasticsearch AI搜索实践
本文介绍了阿里云 Elasticsearch 在AI 搜索方面的技术实践与探索。
18803 20
|
30天前
|
Rust Apache 对象存储
Apache Paimon V0.9最新进展
Apache Paimon V0.9 版本即将发布,此版本带来了多项新特性并解决了关键挑战。Paimon自2022年从Flink社区诞生以来迅速成长,已成为Apache顶级项目,并广泛应用于阿里集团内外的多家企业。
17508 13
Apache Paimon V0.9最新进展
|
1月前
|
存储 人工智能 前端开发
AI 网关零代码解决 AI 幻觉问题
本文主要介绍了 AI Agent 的背景,概念,探讨了 AI Agent 网关插件的使用方法,效果以及实现原理。
18694 16
|
30天前
|
人工智能 自然语言处理 搜索推荐
评测:AI客服接入钉钉与微信的对比分析
【8月更文第22天】随着人工智能技术的发展,越来越多的企业开始尝试将AI客服集成到自己的业务流程中。本文将基于《10分钟构建AI客服并应用到网站、钉钉或微信中》的解决方案,详细评测AI客服在钉钉和微信中的接入流程及实际应用效果,并结合个人体验分享一些心得。
9910 9
|
1月前
|
消息中间件 弹性计算 关系型数据库
函数计算驱动多媒体文件处理解决方案体验评测
从整体解读到部署体验,多方位带你了解如何利用函数计算驱动多媒体文件处理,告别资源瓶颈。
10441 14
|
24天前
|
存储 JSON Serverless
西游再现,函数计算一键部署 Flux 超写实文生图模型部署
参与体验活动生成西游人物图像,既有机会赢取好礼!本次实验在函数计算中内置了flux.1-dev-fp8大模型,通过函数计算+Serverless应用中心一键部署Flux模型,快速生成超写实图像。首次开通用户可领取免费试用额度,部署过程简单高效。完成部署后,您可以通过修改提示词生成各种风格的图像,体验Flux模型的强大绘图能力。
西游再现,函数计算一键部署 Flux 超写实文生图模型部署
|
1天前
|
Java 应用服务中间件 测试技术
Maven学习笔记(一):Maven基础(基于命令行的学习和应用)
Maven 是一款 Java 项目构建工具,主要用于管理 jar 包及其依赖关系。 本文主要了解Maven基础知识及基础应用,旨在为之后的进一步学习奠定基础。 内容上几近全为学习《尚硅谷2022版Maven教程》整理所得。 仅供参考。
128 80
Maven学习笔记(一):Maven基础(基于命令行的学习和应用)