easyui-01

一.jQuery EasyUI简介

封装大量的jQuery插件(简化ajax，jquery，css样式，布局)

二.jQuery EasyUI框架概述

1.1 什么是jQuery EasyUI?

JQuery EasyUI就是一套基础JQuery的富客户端的UI框架(简化ajax，jquery，css样式，布局)。像这些将常用的控件封装成一个UI库的框架统称富客户端框架

1.2 jQuery Easy的作用

既然EasyUI是一个UI框架，所以它的功能就是用于处理页面的展示效果的。通常用于完成后台管理系统的页面排版。

现在市面有哪些常用富客户端框架：EasyUI、LigerUI、ExtJS

1.3 EasyUI的目录说明

1.3.1 下载路径

EasyUI的官网地址为：EasyUI - helps you build your web pages easily

1.3.2 必须的基础支持库

标红的文件夹是PC端使用EasyUI框架，必须导入的基础库文件。

1.3.3 目录说明

demo：例示，非常重要，以后做开发，记不起来代码，可以直接复制例示。

demo-moblie：手机端的例示，因为手机端已经有很多优秀UI框架，所以EasyUI在手机端基本没有人用的（忽略）。

locale：编码支持库

plugins：没有压缩过的插件源码

src：没有压缩过的核心源码

themes：主题样式，有个可以选择

easyloader.js：源码加载器

jquery.easyui.min.js：PC使用类库。

jquery.easyui.moblie.js：手机端使用类库

jquery.min.js：Jquery框架

2.WEB项目搭建EasyUI环境

搭建环境的步骤如下：

 <!-- 引入EasyUI的css依赖 -->
<link rel = "stylesheet" href = "${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.5.2/themes/default/easyui.css">

<!-- 引入EasyUI的图标依赖 -->
<link rel = "stylesheet" href = "${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.5.2/themes/icon.css">

<!-- 引入EasyUI的相关JS依赖 -->
<script type="text/javascript" src = "${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.5.2/jquery.min.js"></script>

<script type="text/javascript" src = "${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>

<script type="text/javascript" src = "${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>

3.EasyUI入门示例

需求：将a链接标签转换成easy样式按钮。

3.1 标准开发步骤

使用EasyUI中的linkbutton按钮插件实现该需求。

标签： <a href="#">按钮</a>
​
样式名： 规范: easyui-样式名
    <a href="#" class="easyui-linkbutton">按钮</a>
js插件名：
$("选中超链接").插件名();
$("a").linkbutton();

3.2 代码模板

• 实现方式一：HTML标签+EasyUI样式

<!-- HTML标签+EasyUI样式 -->
<a href = "#" class = "easyui-linkbutton">东方不败</a>

• 实现方式二：HTML标签+编程插件方法

<!-- HTML标签+ easyui 插件方法 -->
<a style="color: green;" id="btn1" href="#">风清扬</a>
​
<script>
    //使用easyui按钮插件
    $("#btn1").linkbutton();
</script>

3.3 EasyUI的三大基础概念

分别是：属性，事件，方法

• 属性指的是EsayUI框架控件（HTML）的属性（设置插件的样式。图标，宽度，高度）

• 事件指的是 EasyUI 框架控件可以触发的事件（如：点击事件、双击事件等）

• 方法指的是 EasyUI 框架控件，只有调用了默认执行的逻辑代码块。（修改插件属性，状态。）

3.3.1 属性设置

（1）HTML方式设置

<标签 class = "easyui-样式名" data-options = "属性名:值,属性名:值,事件名:事件函数名"></标签>

经典示例

<!-- HTML标签 + esyui-样式 -->
<!-- iconCls 图标 -->
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',size:'large',onClick:testEvent">风清扬</a>

（2）基于javascript方式设置

<标签 id = "tag"></标签>
$("#tag").插件名({
    属性名:属性值,
    属性名:属性值
});
<!--
注意事项：
    1.字符串类型的数值一定要有引号（单引号，或者双引号都可以）
    2.属性之间使用逗号分隔，最后一个属性不可以有逗号
-->

经典实例

<!-- HTML标签+ easyui 插件方法 -->
<a style="color: green;" id="btn1" href="#">风清扬</a>
<script>
    //使用easyui按钮插件
    $("#btn1").linkbutton({
        iconCls:'icon-cancel',
     size:'large'
    });
</script>

3.3.2 事件触发设置

（1）HTML方式设置[不推荐]

<标签 class = "easyui-样式名" data-options = "属性名:值,属性名:值,事件名:事件函数名"></标签>

经典示例

<a href="#" class="easyui-linkbutton" data-options="onClick:testEvent">黄浩</a>
<script>
    function testEvent(){
        alert("我被点了!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
        //调用按钮的 disable方法。
        //$("按钮").linkbutton('disable');
        $("a:first").linkbutton('disable');
    }
</script>

（2）基于javascript方式设置

<标签 id = "tag"></标签>
$("#tag").插件名({
    属性名:属性值,
    属性名:属性值,
    事件名:function(){
​
    }
});

经典示例

<a style="color: green;" id="btn1" href="#">风清扬</a>
<script>
    //使用easyui按钮插件
    $("#btn1").linkbutton({
        onClick:function(){
        alert("风清扬，被点了。");
    }
});
</script>

3.3.3 方法调用设置

调用模板：
$("标签").easyui插件名('方法名',方法传入的参数);
​
例如：
$('#btn1').linkbutton('resize', {
    width: '100%',
    height: 32
});
​