2018-07-12 第六十七天 EsayUI

  1. 云栖社区>
  2. 博客>
  3. 正文

2018-07-12 第六十七天 EsayUI

winniehu 2018-07-12 22:22:29 浏览760
展开阅读全文

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

网友评论

登录后评论
0/500
评论
winniehu
+ 关注