EasyUI学习笔记

¶EasyUI 简介

easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合（本教程只讲解基于jQuery的easyui）。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。

EasyUI官网下载地址:http://www.jeasyui.net/download/jquery.html
官方文档:http://www.jeasyui.net/plugins

如何在javaweb项目中导入easyui？以eclipse为例：

¶1. 导入easyui

¶2. 在html或者jsp页面代码中导入相关css和js。

在<head>标签里导入一下代码：

<!-- 导入主题样式 -->
<link rel="stylesheet" type="text/css" href="easyui-1.6.11/themes/default/easyui.css">
<!-- 导入图标样式 -->
<link rel="stylesheet" type="text/css" href="easyui-1.6.11/themes/icon.css">
<!-- 导入jqury -->
<script type="text/javascript" src="easyui-1.6.11/jquery.min.js"></script>
<!-- 导入easyui -->
<script type="text/javascript" src="easyui-1.6.11/jquery.easyui.min.js"></script>
<!-- 导入语言设置 -->
<script type="text/javascript" src="easyui-1.6.11/locale/easyui-lang-zh_CN.js"></script>

¶3. 创建和初始化组件`easyui`

有两种方式可以声明和使用 UI 组件。

¶第一种

创建组件： 给元素标签添加类样式属性 class（用来指定组件类型）

原理:easyui会去页面上寻找每一个元素，看是否含有easyui开头的class属性，如果有则将这个元素安装该class属性将元素渲染为对应的组件。

格式：

1	<div class="easyui-组件名" ></div>

如下：

1	<div class="easyui-window" ></div>

初始化组件： 给元素标签添加数据选项属性data-options（用来初始化组件）

格式：

1	<div class="easyui-window" data-options="key1:value1,key2:value2"> </div>

如下：

1
2
3

<div class="easyui-window" data-options="title:'测试窗口',width:500,height:400,iconCls:'icon-save',minimizable:false,left:500">
		test EasyUI window
</div>

data-options属性可以定义各种组件的样式和内容及事件,可以通过data-options来实例化组件

¶第二种

创建组件： 编写 JS 代码来创建组件

格式：

1	$("#mydiv").方法名();

如下：

<div id="mydiv"></div>

<script type="text/javascript">
	$(function() { //页面加载完(不包括图片加载)
		$("#mydiv").window();
	});
</script>

初始化组件：

格式：

1	$("#mydiv").方法名({key1:value1,key2:value2});

此处方法名一般就为组件名，方法传递的是一个json对象，json对象的属性是以键值对的形式存在，多个属于之间用逗号隔开。

如下：

<div id="mydiv">test EasyUI window</div>

<script type="text/javascript">
	$(function() {
		$("#mydiv").window( //window()方法参数里写json数据类似于标签指定data-options属性
		{
			title : '测试窗口',
			width : 500,
			height : 400,
			iconCls : 'icon-save',  //窗口图标
			minimizable : false,   //能否最小化
			left : 500,
			top : 200,
			modal : true  //模式窗口,true表示在当前窗口没有关闭前不能操作其他窗口
		});
	});
</script>

¶4. 给组件加事件

$("#mydiv").组件方法({
	事件名1:function(){},
	事件名2:function(){}
});

<div id="mydiv">test EasyUI window</div>

<script type="text/javascript">
	$(function() {
		$("#mydiv").window({	
			onOpen : function() {//window继承自Panel，很多事件也来自于Panel。比如onOpen事件
				alert("hello");
			}
		});
	});
</script>

¶5. 调用组件的方法

格式：

1	$("#mydiv").组件方法("函数名","参数值"或者json对象);

如下：

<body>
    <div id="mydiv" class="easyui-window" data-options="width:500,height:400"></div>

    <a class="easyui-linkbutton" data-options="iconCls:'icon-tip'" href="javascript:closeWin()">关闭窗口</a>
    <a class="easyui-linkbutton" data-options="iconCls:'icon-tip'" href="javascript:setTitleWin()">修改窗口标题</a>
    <a class="easyui-linkbutton" data-options="iconCls:'icon-tip'" href="javascript:resizeWin()">改变窗口大小</a>
</body>


<script type="text/javascript">
    //给window组件传入一个close的方法
    function closeWin() {
        $("#mydiv").window("close");
    }

    //给window组件传入一个setTitle的方法,并指定setTitle方法的参数，参数只有一个，可以直接以字符串的形式传入。
    function setTitleWin() {
        $("#mydiv").window("setTitle", "我的窗口");
    }

    //给window组件传入一个resize的方法,并指定resize方法的参数，参数有多个的时候，可以用json对象的形式传入。
    function resizeWin() {
        $("#mydiv").window("resize", {
            width : 500,
            height : 500,
            top : 0
        });
    }
</script>