简介

easyui是一种基于jQuery的用户界面插件集合。

easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架。

easyui节省您网页开发的时间和规模。

easyui很简单但功能强大的。

EasyUI中大部分的控件 都可以通过 Html / JS调出!

使用步骤

1.  官网下载框架包
    地址:http://www.jeasyui.com/download/index.php    

2.  将框架包解压后, 整个文件夹复制到项目中,并将文件夹名称修改为easyui

3.  引入必要的JS与CSS文件
    //引入 jQuery 核心库，这里采用的是 2.0
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    //引入 jQuery EasyUI 核心库，这里采用的是 1.3.6
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    //引入 EasyUI 中文提示信息
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
    //引入 EasyUI 核心 UI 文件 CSS
    

//引入 EasyUI 图标文件 4. 编写组件 指定class属性即可

面板-- panel

基础面板

class属性设置为: easyui-panel

title属性描述的是面板的标题


Jquery对象的api.

$obj.panel(par1);

par1: 操作: 

    1.  open 打开
    2.  close 关闭
    3.  'expand',true : 展开
    4.  'collapse',true: 折叠

data-options :
    描述面板功能, 键值对的集合, 键与值之间使用冒号连接, 多个键值对之间使用逗号连接
collapsible:true//折叠工具
minimizable:true//最小化
maximizable:true//最大化
closable:true"//可关闭
tools: 
    表示一个JSON数组, 数组中应存储JSON对象, 对象应包含图标和事件

例如:

    "tools:[{'iconCls':'icon-reload','handler':'myload'}]"

面板嵌套

fit: 默认为false , 设置为true 表示面板大小自适应父容器

案例:

拖动组件:

可变大小Resizable

class属性值:easyui-resizable

data-options:

maxWidth:600 :最大宽度
maxHeight:600: 最大高度

Tooltip 提示框

当鼠标移入时 弹出的窗体, 

在我们原生的HTML中, 也有提示窗,但是仅仅限于超链接 , 并且样式很一般

在easyui中, 不依赖与超链接, 任意的组件 都可以通过class=easyui-tooltip实现提示框 !

提示的内容通过title属性指定

进度条

默认此进度条 总进度为100  value指定是百分比
总是可以控制宽高的

    

消息

messager组件是一个JS操作的组件

使用步骤:

$.messager.show(pra1);

pra1: 传递一个JSON格式的对象,  常用属性如下:

    title: 消息的标题
    msg : 消息的内容
    showType: 消息的类型
        -   show: 普通消息
        -   slide: 滑动消息
        -   fade: 淡入消息
    timeout: 毫秒延迟

$.messager.pregress(pra1);

-   pra1: 传递一个JSON格式的对象, 常用属性如下:
    -   title: 标题
    -   msg  : 内容

-   pra1: 也可以传递一个字符串 ,  表示指令:
    -   常用close  用于关闭

选项卡

选项卡使用的class是: easyui-tabs

在easyui-tabs元素中添加一个div就是一个子选项卡
子选项卡可以通过title属性来指定标题, 
data-options添加关闭按钮
data-options="closable:true"

折叠选项卡

选项卡使用的class是: easyui-accordion

在easyui-tabs元素中添加一个div就是一个子选项卡
子选项卡可以通过title属性来指定标题, 
data-options添加关闭按钮
data-options="closable:true"

布局layout

通过class=easyui-layout实现
布局包含了东西南北中五个位置

分别通过data-options中的region属性指定:

    北: north
    南: south
    西: west
    东: east
    中: center

window窗口

class属性值为 easyui-window

扩展自panel 使用方式基本一致 !
title:  窗口标题, 类型为string

重写了一些data-options属性 :
collapsible: 是否可折叠 , 类型boolean 默认true
minimizable: 是否显示最小化按钮 , 类型boolean 默认true
maximizable: 是否显示最大化按钮 , 类型boolean 默认true
closable: 是否显示关闭按钮 . 类型boolean 默认true
shadow: 默认true , 是否显示窗体阴影
...

dialog 提示窗

class属性值为 easyui-dialog

title: 设置窗口标题

data-options="iconCls:'图标class'" :设置窗口图标


JS方式:

$("div选择器").dialog(pra1);

pra1: JSON类型的数据 键值对如下:

1.  title : 提示窗标题

2.  width : 窗口宽度, 可忽略px , 默认为px

3.  height: 窗口高度. 可忽略px , ...

Menu

Menu右键菜单

必须要HTML配合JS才能完成的一个特殊组件

步骤: 

1.  先通过HTML元素, 创建菜单列表

    -   编写一个div , calss指定为easyui-menu
    -   在这个div中添加子元素, 
            -   直接子元素 就是一级菜单 
            -   子元素子元素就是二级菜单
            -   ....
            -   data-options="'iconCls':'icon-help'" 给子选项添加图标

2.  将菜单的显示 , 绑定到鼠标的右键上 , 并取消原网页的右键效果


    //绑定事件到右键点击上
    $(document).on("contextmenu",function(e){
        e.preventDefault();//取消原网页的右键菜单效果
        $("#xdl_menu").menu('show',{
            'left':e.pageX,
            'top':e.pageY
        });

        //menu函数, 传递两个参数 
        1. show 表示显示, 
        2. 是一个JSON格式的对象, 表示菜单左上角显示的位置
    });     


3.  给菜单中的条目 添加点击事件

    给最外层的菜单div添加: data-options="'onClick':函数名称"

    点击事件函数的编写, 需要设计一个形式参数, 会接受到被点击的元素对象!

 

案例
HTML部分:

右键点击网页的任意部分, 弹出菜单

 

JS部分

    function menuClick(item){
        console.info("用户选择了",item.id);              
    }

    $(document).on("contextmenu",function(e){
        e.preventDefault();
        $("#xdl_menu").menu('show',{
            'left':e.pageX,
            'top':e.pageY
        });
    });

MenuButton

菜单按钮需要指定class属性为:easyui-menubutton


data-options:

    menu: 指定弹出的菜单项的选择器(被指定的元素与子元素使用块级元素div)

注意, 如果需要处理点击事件, 给单个元素添加onclick即可

 

案例:

    下载

    

分页组件

分页组件 是用来生成快捷的分页工具栏的
指定class为 easyui-pagination

data-options属性:

    total:数据的总数量
    pageSize:单页数据的长度
    onSelectPage:当用户翻页时触发的事件:
        此事件存在两个形式参数
            参数1. 用户翻页动作产生的新页码
            参数2. 新页请求的数据长度

 

案例
HTML部分
    

JS部分 function test(pageNumber,pageSize){ console.info("页数",pageNumber,"数据的长度",pageSize); }

日期选择组件

class属性为:easyui-calendar

可以通过data-options指定事件:

1.  选择的日期发生改变时
    onChange:函数名
    编写函数时, 存在两个形式参数:
        参数1. 选择的新日期
        参数2. 之前的旧日期

2.  选择日期时
    onSelect:函数名
    编写函数时, 存在一个形式参数:
        参数1. 选择的日期


案例:

HTML部分:

JS部分: function change_1(newDate,oldDate){ console.info("新日期:",newDate.toLocaleString(),"旧日期:",oldDate.toLocaleString()); } //选择的日期 参数1.选择的日期 function select_1(date){ console.info("选择的日期:",date.toLocaleString()); }