EasyUI体系整理

EasyUI_Day1

---

一、EasyUI简介

1. 什么是EasyUI: EasyUI 是一款基于jQuery实现的前端框架， 通过使用EasyUI 我们可以在编写少量的CSS代码的前提下， 快速的构建网站的页面。
2. EasyUI主要应用场景： 构建网站后台管理系统的界面。
3. 学习EasyUI的前置技术：

   • HTML构建基本网页的结构

   • CSS级联样式表

   • JavaScript和jQuery给网页添加动作

二、使用EasyUI开发一个按钮

1、在页面引入EasyUI的功能文件

注：动态获取项目名的简化开发

<!-- 将动态获取项目名放入request作用域 -->
<%
	request.setAttribute("path", request.getContextPath());
%>

<!-- 直接在request作用域取出即可使用 -->
<!-- 引入easyUI的功能文件，将themes文件夹引入项目 -->
<link rel="stylesheet" type="text/css" href="${path }/css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${path }/css/themes/icon.css">

<!-- 注意必须先加载jQuery文件 -->
<script type="text/javascript" src="${path }/js/jquery.min.js"></script>
<script type="text/javascript" src="${path }/js/jquery.easyui.min.js"></script>

2、按钮插件的开发

<h1>第一个 easyui插件</h1>

<!-- class为插件的类名， data-options为插件的属性，注意多个属性使用逗号分隔 -->
<a id="aa" href="javascript:void(0)" class="easyui-linkbutton"
   data-options="iconCls:'icon-add',plain:false">这是一个漂亮的按钮</a>
<hr/>

3、使用js编程开发

<!-- 使用js开发 -->
<a id="lbtn"></a>

<script type="text/javascript">
    $(function(){
        // JS编程方式定制插件
        $('#lbtn').linkbutton({   
            //属性
            iconCls:'icon-edit',//编辑小图标
            text:'编辑',//为a标签文本赋值
            plain:false,//是否为简洁效果
            //因为属性为number类型，所以数字后不用加px
            width:150,
            height:150,
            disabled:true,//是否禁用,后面使用单击事件重新启用按钮
        
        $('#aa').linkbutton({
            onClick:function(){
                // 启用按钮
                $('#lbtn').linkbutton('enable');
            }
        });
    });
</script>

4、EasyUI插件的定制和使用规则【重点】

4.1 插件定制方式

① 基于HTML标签定制

<a id="aa" href="javascript:void(0)" class="easyui-linkbutton"
   data-options="iconCls:'icon-add',plain:false">这是一个漂亮的按钮</a>
<hr/>

② 通过JS编程的方式定制

$('#lbtn').linkbutton({
   
    //指定属性
    iconCls:'icon-edit',// 添加小图标 
    text:'编辑', // 按钮的文本
    plain:false, // 是否显示为简洁效果 
    width:150,// 宽
    height:150, // 高
    disabled:false, // 是否禁用
});

4.2 插件的使用规则

① 属性使用规则

- 基于HTML标签方式

<a href=”javascript:void(0)” class=”easyui-linkbutton”  
data-options=”属性名:属性值,属性名:属性值”>按钮插件</a>

-基于js编程方式

$obj.linkbutton({
   
属性名:属性值,
属性名:属性值
});

② 事件使用规则

-基于HTML方式

<a href=”javascript:void(0)” class=”easyui-linkbutton”  
data-options=”事件属性:回调函数名”>按钮插件</a>

-基于js编程方式

$obj.linkbutton({
   
事件属性名: function(){
   } 或者 书写一个回调函数名
});

③ 方法使用规则

-有参方法:

​ $obj.linkbutton(‘方法名’,传参);

-无参方法:

​ $obj.linkbutton(‘方法名’);

PS:如果调用的方法有返回值，正常定义变量(var)接受。

<a id="btn1"></a>
<a id="btn2"></a>


$("#btn1").linkbutton({
   
    text:'男',
    toggle:true,//可实现选中变色效果
    iconCls:'icon-man',//加图标
    group:'sex',//多个按钮的group值一致，可实现单选效果
    selected:true,//默认选中
    iconAlign:'right',//定义图标位置
    size:'large',//设置大小，默认为small
})

$("#btn2").linkbutton({
   
    text:'女',
    toggle:true,
    iconCls:'icon-man',
    group:'sex',
})

三、插件分类讲解

1、Linkbutton按钮插件(a标签)

<a id="btn1"></a>
<a id="btn2"></a>      

$</