2018-07-12 第六十七天 EsayUI-低调大师

2018-07-12 第六十七天 EsayUI

2018-07-11 467

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>

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

微信关注我们

原文链接：https://yq.aliyun.com/articles/610127

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

C++复合类型总结（引用）

引用（reference）是其中C++语言复合类型之一。 C++11中新增了一种引用：所谓的“右值引用（rvalue reference）”，之后再详细介绍。这种引用主要用于内置类。严格来说，我们使用术语“引用（reference）”，指的是“左值引用（lvalue reference）” 引用（reference）实际上就是给对象起了个外号，操作一个变量的引用也就相当于操作变量本身，这一点跟指针很类似，只是相比指针更直观。一、基本操作 1.引用必须要被初始化定义引用时，程序把引用和它的初始值绑定（binding）在一起，而不是将初始值拷贝给引用。一旦初始化完成，引用将和它的初始值对象一直绑定在一起（换言之，无法令引用重新绑定到另一个对象）。 int x = 10, y = 9; int &xx = x; int &refVal2; //报错：引用必须被初始化 int &refVal3 = 10; //报错，引用类型的初始值必须是个对象 xx = y; //无法令引用重新绑定到另一个对象 xx++; std::cout << "x Address...

2018-07-12

620

刚刚做了实验吧的题目，现在整理一下写出解题思路，希望能够帮助到那些需要帮助的人所有的wp都是以一题一篇的形式写出主要是为了能够让读者更好的阅读以及查找，希望你们不要责怪！！共勉！！！你真的会PHP吗？分值：30 来源：实验吧难度：中参与人数：4163人 Get Flag：714人答题人数：888人解题通过率：80% 你真的会PHP吗？会？还是不会？解题链接：http://ctf5.shiyanbar.com/web/PHP/index.php 解题思路：这一题可以get需要知识点，也可以回忆一下关于以前的知识点击链接，进行抓包处理就会得到：进入这个链接就会得到：http://ctf5.shiyanbar.com/web/PHP/6c525af4059b4fe7d8c33a.txt <?php $info = ""; $req = []; $flag="xxxxxxxxxx"; ini_set("display_error", false); error_reporting(0); if(!isset($_POST['number'])){ hea...

2018-07-12

602

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。