easyUI的常用API[通俗易懂]

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

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

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

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

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

easyui很简单但功能强大的。

此代码由Java架构师必看网-架构君整理
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
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
    //引入 EasyUI 图标文件
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />


4.  编写组件 指定class属性即可

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'}]"

此代码由Java架构师必看网-架构君整理
fit: 默认为false , 设置为true 表示面板大小自适应父容器

案例:

<div id="div4" class="easyui-panel" style="padding:20px;width:400px;height:200px;" title="面板嵌套的效果" 
>
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="'region':'west',split:true" style="width:100px">
            左边的部分
        </div>
        <div data-options="'region':'center'">
            右边的部分
        </div>
    </div>
</div>

<div class="easyui-draggable"  >
   可拖动的窗体
</div>

class属性值:easyui-resizable

data-options:

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

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

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

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

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

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

    <div class="easyui-progressbar" data-options="value:80" style="width:500px;">

    </div>  

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"

<div class="easyui-tabs" style="width: 800px; height: 400px">
    <!-- 
        一个div就是一个子选项
        data-options添加关闭按钮
        data-options="closable:true"
     -->
    <div title="选项卡的标题1" data-options="closable:true">
        <h3>第一个文章</h3>
    </div>
    <div title="选项卡的标题1" ">
        <h3>第一个文章</h3>
    </div>
</div>

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

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

<div class="easyui-accordion" style="width:800px;height:400px;">
    <div title="选项卡的标题1" data-options="closable:true" style="padding: 10px;">
        <h3>easyui-兄弟连教程</h3>
    </div>
    <div title="选项卡的标题2" style="padding: 10px;">
        <h3>easyui-兄弟连教程</h3>
    </div>
</div>

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

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

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



<div class="easyui-layout" style="width:800px;height:300px">
        <div data-options="region:'north',split:true" style="height:70px">1</div>
        <div data-options="region:'south',split:true" style="height:70px">2</div>
        <div data-options="region:'east',split:true" style="width:70px">3</div>
        <div data-options="region:'west',split:true" style="width:70px">4</div>
        <div data-options="region:'center',split:true" >5</div>
 </div>

class属性值为 easyui-window

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

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

class属性值为 easyui-dialog

title: 设置窗口标题

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


JS方式:

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

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

1.  title : 提示窗标题

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

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

必须要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部分:
<h1>
    右键点击网页的任意部分, 弹出菜单
</h1>
<div id="xdl_menu" class="easyui-menu" style="width:120px" data-options="'onClick':menuClick">
    <div id="m1">吃饭</div>
    <div id="m2">睡觉</div>
    <div id="m3">打涛涛</div>
    <div id="m4">学技术
        <div  id="m5" style="width:140px">
                <div  id="m5_1">学Java</div>
                <div>学PHP</div>
                <div>学H5</div>
                <div>学UI</div>
        </div>
    </div>
    <div data-options="'iconCls':'icon-help'">帮助</div>
</div>

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
        });
    });

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


data-options:

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

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

案例:

    <a href="void(0)" class="easyui-menubutton" data-options="'menu':'#menu_div'">下载</a>

    <div id="menu_div">
        <div data-options="iconCls:'icon-remove'">
            笔记
        </div>
        <div data-options="iconCls:'icon-print'">
            课件
        </div>
        <div data-options="iconCls:'icon-edit'">
            代码
        </div>
    </div>

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

data-options属性:

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

案例
HTML部分
    <div class="easyui-pagination" style="border:1px solid #bbb;background-color: #e2e2e2;"
data-options="total:200,pageSize:10,onSelectPage:test"
>
</div>


JS部分

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

    }

class属性为:easyui-calendar

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

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

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


案例:

HTML部分:
<div class="easyui-calendar" style="width:300px;height:200px" 
data-options="onChange:change_1,onSelect:select_1"
></div>

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