开发者社区> winniehu> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
解决php ZipArchive生成压缩文件带有目录层级的问题
解决php ZipArchive生成压缩文件带有目录层级的问题
0 0
easyui(一) 初始easyui
分享使我快乐。哈哈~
0 0
5个人如何1年交付了120+项目?分享我在阿里云做交付的工作手记
谨以此文,分享一些我加入阿里云后,我和我所在团队的成长经历。这里既有我个人如何从程序员成长为一个技术经理,也有我的团队如何把事情越做越大的过程和思考,希望能够帮到有需要的人。
0 0
一文梳理Code Review方法论与实践总结
作为卓越工程文化的一部分,Code Review其实一直在进行中,只是各团队根据自身情况张驰有度,松紧可能也不一,这里简单梳理一下CR的方法和团队实践。
0 0
我理解的测试开发与实践总结——新人篇
写这篇文章的目的是为了能够更好的帮助刚入职的新人了解这个岗位和自己的工作,也想谈谈自己工作一年来对这个领域的了解程度,做一个小小总结吧~
0 0
轻松使用阿里达摩院开源在魔搭社区上的CLUE语义匹配模型
本文将介绍达摩院NLP团队在魔搭社区(ModelScope)上开源的语义匹配模型及其使用方法。
0 0
React开发的设计模式及原则
设计模式是最常见的,通用问题的可复用解决方案的归纳总结,通常被认为是解决该类问题的最佳实践,使用设计模式能帮助我们写出更容易维护,更健壮的代码。设计模式有很多,通常它们都会遵循一些共同的设计原则,接下来我们一起回顾下React社区里出现过的一些设计模式,以及它们所遵循的设计原则。
0 0
整理一下VR&AR的现状以及未来
想要和大家聊一下VR和AR在场景中的实现,和我自己的一点看法。
0 0
谈谈《流浪地球2》中如何正确的“重启互联网”
DNS是互联网域名和IP转换,寻址调度的重要的基础设施,是互联网中少有的相对中心化的环节。《流浪地球2》中有一个重启互联网,重启(DNS)根服务器的情节,过程惊心动魄,但是从互联网专业视角看仍有一些小瑕疵。观影后笔者撰写小文,聊聊如何正确的“重启互联网”。
0 0
设计稳定的微服务系统时不得不考虑的场景
我们的生产环境经常会出现一些不稳定的情况,如: 1、大促时瞬间洪峰流量导致系统超出最大负载,load 飙高,系统崩溃导致用户无法下单 2、“黑马”热点商品击穿缓存,DB 被打垮,挤占正常流量 3、调用端被不稳定服务拖垮,线程池被占满,导致整个调用链路卡死 这些不稳定的场景可能会导致严重后果。大家可能想问:如何做到均匀平滑的用户访问?如何预防流量过大或服务不稳定带来的影响?
0 0
+关注
winniehu
菜鸟
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载