高级第七天:EasyUI学习

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]效果图

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,185评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,445评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,684评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,564评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,681评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,874评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,025评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,761评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,217评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,351评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,988评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2赞 349