EasyUI学习
主要内容
1.前端开发框架的介绍
2.EasyUI的介绍和常用组件
3.EasyUI的组件使用
4.tree菜单和选项卡联动实现
5.linkbutton组件
6.messager消息框组件
一.前端开发框架的介绍
[1]前端开发中的问题
问题:
目前我们在实现一个前端页面效果时,HTML和CSS和JS等前端代码都是我们自己根据需求一点一滴的进行编写.但是随着我们编写的前端代码的数量越来越多,我们发现,前端的页面是由很多不同的HTML元素组成的,比如:表格,菜单,标题,表单等.不同的页面只是样式不同或者部分的显示不同.但是总体来说,一个网页包含的前端组件是大同小异的.而我们声明前端页面的最主要的目的是来讲后台的数据友好的显示给用户使用.但是目前开发前端页面的效率比较低,极大的影响了开发效率,怎么办?
[2]前端开发问题解决
我们发现在完成一个前端页面的时候,不同的页面会使用到相同的HTML组件,只是显示的数据不同,比如表格,页面布局等.那么我们是不是可以考虑将常用的HTML页面组件进行封装,这样我们咋起床就爱你一个前端页面时,直接将不同的组件组装后快速的创建出来.那么怎么封装呢?一个HTML组件应该包括:HTML,CSS,JS操作,比如表格,包括:表格的HTML标签,css样式,删除行,增加行等.css和
js代码可以封装成文件,在页面中引入后就可以使用.但是HTML代码无法封装,怎么办?我们可以由以前在页面中直接声明HTML代码来完成页面资源的创建,变成通过js来完成页面HTML的创建.这样就可以将HTML组建封装成js文件和css文件.我们只需要在自己的页面中引入相关文件,即可使用该组件显示数据给用户.
本质
就是将常用的HTML/CSS/JS/JQ组件进行封装,由我们自己写变为调用,快速提升前台页面的开发效率
[3]常用的前端框架:
a.EasyUI
b.JQuery
c.Vue
[4]前端框架的特点和使用流程
1.前端框架的特点
(1)提升前端页面的开发效率
(2)使用简单,容易上手
2.前端框架的使用流程
(1)在项目中导入前端资源(js,css等)
(2)在自己的页面中引入前端资源(js,css等)
(3)根据API文档说明在自己的页面中完成页面开发
二.EasyUI的介绍和常用组件
[1]EasyUI的介绍
介绍
EasyUI是一个前端开发的框架,其将常用的页面开发使用的组件进行了封装,前端开发人员只需将EasyUI的资源导入项目后使用即可,快速提升开发效率
使用
(1)导入EasyUI的资源
(2)查阅API文档使用EasyUI的组件完成页面开发
注意
使用EasyUI,其实就是在使用别人已经封装好的代码来完成自己的页面开发.所以必须按照EasyUI的文档说明来使用.所以我们学习了EasyUI,其实就是在学习如何按照EasyUI的文档来使用其组件并且其常用组件有哪些
[2]EasyUI的资源介绍
(1)将从官网上下载的EasyUI的资源压缩包解压
(2)demo文件夹:EasyUI官网提供的每个组件的使用实例效果代码
(3)locale文件夹:组件中显示的数据语言的js文件
(4)plugins文件夹:是EasyUI提供的组件对应的js文件
(5)src文件夹:源码文件夹
(6)themes文件夹:EasyUI官方提供的整套的样式
(7)jquery.min.js文件:依赖的jquery文件,建议使用官方提供的jquery文件
(8)jquery.easyui.min.js:封装了所有的js文件
2.2EasyUI的常用组件
(1)基础组件:常用的比较小的功能组件,不是每个网页中都会用到
(2)布局组件,很重要,么讴歌网页都会使用,完成网页的布局的
(3)菜单与按钮组件:很重要,每个网页都会使用,在网页中完成菜单和按钮的效果
(4)表单组件:很重要,搜集用户数据,封装了常用的数据校验,并支持自定义校验
(5)窗口组件:在当前页面中显示子窗口效果,对页面中的功能进行完善
(6)数据网格和树组件:很重要.在网页中显示表格以及树状数据
三.EasyUI的组件使用
[1]easyui的组件使用流程
(1)在jsp中引入EasyUI的资源
(2)在jsp页面中使用HTML方式或者js方式创建组件
(3)使用组件的属性和事务来初始化设置组件的效果
(4)使用组件的方法实现组件和用户交互的效果
[2]easyui-panel面板
作用
在网页中显示一个面板效果,可以在面板中显示网页中的数据
使用
(1)在jsp页面中引入EasyUI的资源
(2)在页面创建一个div标签,并设置其class属性,属性值为'easyui-panel'
(3)在div标签上使用属性data-options设置面板的初始化效果,设置组件的属性和事件,以键值对的形式设置,不同的键值对使用逗号隔开
(4)可以使用jquery来调用组件提供的方法,根据用户在网页中的行为动作对组件做出对应的操作
实例代码
<%
String path = request.getContextPath();
String basePath=request.getScheme()+";//"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
<base href="<%=basePath%>"/>
<title>Title</title>
<%--引入easyUI的资源--%>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<link rel="stylesheet" type="text/css" href="themes/demo.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<%--声明js代码域--%>
<script type="text/javascript">
function test(){
$("#my").panel('setTtitle','设置标题');
}
</script>
</head>
<body>
<input type="button" value="测试组件方法的使用" onclick="test()">
<%--1.通过标签创建panel组件--%>
<div style="width:350px;height:350px;border:solid 1px;">
<div id="my" class="easyui-panel" data-options="title:'我是面板'.iconCls:'icon-edit',left:200,top:300,fit:true,content:'我是面板主体',collapsible:true.maximizable:true,onMaximize:function(){
alert('aa')
}" style="width:300px;height:300px;">
</div>
</div>
</body>
</html>
[3]easyui-textbox组件
作用
声明一个普通的input文本标签
使用
通过js代码的方式完成textbox组件初始化效果
元素标签,组件名({属性:值,属性:值,...,事件名:函数...})
代码示例
$(function(){
$("#uname").textbox({
width:300,
height:55,
label:'用户名',
labelPosition:'top',
prompt:'请输入用户名',
onChange:function(newValue,oldValue){//失去焦点的时候触发
console.log(newValue+":"+oldValue);
}
})
})
[4]easyui-passwordbox组件
作用
在页面中显示一个密码框
使用
HTML标签方式或者js方式,参照API文档
代码示例
<input class="easyui-passwordbox" prompt="请输入密码" iconWidth="28" data-options="label:'密码',labelPosttion:'top',width:300,height:55">
效果示例
[5]easyui-combobox下来框组件
作用
在页面中显示一个下拉框效果,提供了丰富的属性和事件可以让我们根据需求来设置自己想要的组件效果
使用
使用HTML标签方式或者js方式完成创建和初始化设置,参照API
实例代码
<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
<option value="aa">aitem1</option>
<option>bitem2</option>
<option>citem3</option>
<option>ditem4</option>
<option>eitem5</option>
</select>
示例图
[6]easyui-datebox日期框
作用
在页面中显示一个可以选择日期的文本框
使用
使用HTML标签创建和初始化或者使用js方式创建和初始化
实例代码
(1)使用js在初始化创建datebox时完成日期格式自定义显示
/**初始化设置datebox**/
$(function(){
$("#dd").datebox({
formatter:function(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+"-"+m+"-"+d;
},
parse:function(s){
var t = Date.parse(s);
if(!isNaN(t)){
return new Date(t);
}else{
return new Date();
}
}
})
})
(2)使用HTML标签创建和初始化datebox
<%--datebox日期框--%>
<input id="dd" type="text" class="easyui-datebox" data-options="editable:false.currentText:'今天',closeText:'关闭'">
效果图
[7]easyui-layout布局组件
作用
使用该组件可以快速完成网页的布局效果
使用
使用HTML完成页面组件,具体参照API
方式
(1)在div中进行布局
(2)在整个页面中
(3)嵌套布局
(4)布局区域:冬,西,南,北,中五个区域,每个区域都是可选的
实例代码
<body class="easyui-layout">
<div data-options="region:'north',split:false" style="height:100px;"></div>
<div data-options="region:'south',split:false" style="height:100px;"></div>
<div data-options="region:'east',split:false" style="width:100px"></div>
<div data-options="region:'west',split:false" style="width:100px"></div>
<div data-options="region:'center',split:false" style="padding:5px;background:#eee;"></div>
</body>
效果图
[8]easyui-Accoundion折叠面板
作用
在网页中显示一个可以折叠的面板效果
使用
使用html标签完成创建和初始化设置
代码实例
<%--accoundion组件完成 折叠效果--%>
<div id="aa" class="easyui-accound" data-options="fit:true,border:false,animate:true,selected:1" style="width:300px;height:200px;">
<%--折叠区域--%>
<div title="Title" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF">Accordion for JQuery</h3>
<p>Accordion is a part of easyui framework for JQuery.It lets you define your accordion component on web page more easily.</p>
</div>
<!--折叠区域-->
<div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px">
content2
</div>
<%---折叠区域-%>
<div title="Title3">
content3
</div>
</div>
效果图
[9]easyui-tree树组件
作用
在页面中显示树状数据,主要用来显示有层级关系的数据
使用
使用HTML标签创建和初始化,使用js方式创建和初始化
实例代码
/**设置树组件**/
$(function(){
$("#myTree").tree({
onClick:function(node){
console.log(node);
}
})
})
<%--声明树状的ul容器--%>
<ul id="myTree" class="easyui-tree">
<%--声明以及菜单--%>
<li>
<span>超市购物网站</span>
<%--声明二级菜单详细信息--%>
<ul>
<li>天猫超市</li>
<li>京东超市</li>
<li>永辉超市</li>
</ul>
</li>
<%--声明以及菜单的信息--%>
<li>
<span>电器购物网站</span>
<%--声明二级菜单信息--%>
<ul>
<li>京东</li>
<li>苏宁</li>
<li>国美</li>
</ul>
</li>
<%--普通一级菜单--%>
<li><span>淘宝网</span></li>
</ul>
效果示例图
[10]easyui-tabs选项卡组件
作用
以标签页的形式在一块区域显示多个内容
使用
使用HTML标签直接创建和初始化或者使用js方式创建和初始化
代码示例
<%--创建选项卡容器--%>
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;" data-options="fil:true,border:true,plain:false,tabPosition:'top'">
<%--选项卡面板--%>
<div title="Tab1" style="padding:20px;"></div>
<%--选项卡面板--%>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">tab2</div>
<%--选项卡面板--%>
<div title="Tab2" data-options="inconCls:'icon-reload',closable:true" style="padding:20px;display:none;">tab2</div>
</div>
效果图示例
四.tree菜单和选项卡的联动实现
[1]功能需求
点击树状菜单的时候,可以在页面的中心区域中新增一个选项卡,显示当前菜单的资源.如果当前菜单对应的选项卡已经存在,则不会重新创建,而是选择已经存在的选项卡显示给用户.具有子菜单的以及菜单是无需创建选项卡的
[2]功能实现
(1)给树状菜单的节点增加单击事件
(2)在树节点的单击事件中校验当前点击的是资源跳转菜单还是以及菜单
(3)在树节点的单机事件中增加新增选项卡的逻辑
(4)判断菜单节点的选项卡是否存在如果已经存在,则选中,而不是创建
[3]实例代码
$(function(){
$("#myTree").tree({
onClick:function(node){
//判断当前点击的节点是否具有子节点
var cs = node.children;
if(!cs){
//判断菜单节点的选项卡是否存在
var flag = $("#tt").tabs('exists',node.text);
if(flag){
//选中菜单节点对应的选项卡
$("#tt").tabs('select',node.text);
}else{
//新增选项卡
$("#tt").tabs('add',{
title:node.text,
colsable:true
})
}
}
}
})
})
[4]效果图
五.Linkbutton组件
[1]组件的介绍
以前我们是自己在网页上声明按钮,完成网页和用户的交互操作.而我们的超链接除了作为资源跳转的使用以外,也可以作为一个按钮的效果存在.只不过,我们自己使用超链接作为单机按钮,样式比较丑,而EasyUI将其封装了,我们调用即可
[2]组件的作用
在页面中显示一个按钮效果,本质是一个超链接
[3]组件的使用
<%--linkbutton组件效果--%>
<a id="btn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'">测试linkbutton</a>
[4]组件效果图
六.messager消息框组件
[1]组件的介绍
目前我们喜欢在js代码中使用alert语句来在页面弹出一个窗口.来提示用户.但是我们发现,不同的浏览器alert的效果是不同的.我们希望在不同的浏览器中显示相同的效果怎么样?原因是alert本质是在调用浏览器自带的弹框效果,我们提供一个自己的即可.EasyUI的messager消息框组件已经实现
[2]组件的使用
$.messager.alert,相当于alter
$.messager.confirm,相当于confirm
$.messager.prompt,相当于prompt
[3]代码示例
/**messager消息框组件**/
$(function(){
//给linkbutton增加单击事件
$("#btn").click(function(){
//$.messager.alert("警告","你的电脑将在10秒后关机","warming");
$.messager.confirm('确认框','你确定要删除吗?',function(r){
if(r){
alert("aaa"+r);
}
});
})
})
[4]效果图
网友评论