Java笔记：EasyUI

1. 搭建easyui环境

1. 加入EasyUI的项目文件夹；
2. 导入EasyUI的CSS和JavaScript文件到页面中。

<!-- easyui的样式主题文件 -->
<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<!-- easyui的系统图标-->   
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
<!-- easyui依赖的jquery库-->   
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<!-- easyui的插件库-->      
<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>

2. 创建组件

方式一：HTML创建 <标签 class=”easyui-组件名” 组件配置</标签>

<div id="p1" class="easyui-panel"
	style="width: 400px; height: 400px; padding: 10px; font-size: 10px;" title="第一个组件"
	iconCls="icon-ok" collapsible="teue">
	<h1>HTML方式创建组件</h1>
</div>

方式二：JS代码创建 $(“#id”).panel({json参数});

$("#div").panel({
	//设置面板属性
	title : "你的面板",
	iconCls : "icon-ok"
});

3. 常用组件

1. panel—面板
2. linkbutton—按钮
3. menu—菜单
4. tree—树型菜单
5. tabs—选项卡面板
6. messager—消息窗口
7. form—表单
8. 可以查询API文档

4. 组件的三要素

属性

描述了组件的信息，可以通过配置属性，让EasyUI提供不同的显示效果和功能。
可以通过$.fn.组件名.defaults获取该组件的默认属性。
注意事项：
1.在创建时设置属性，创建完之后修改属性可能不能达到预期的效果；
2.属性默认值一般不会去修改，在创建时去指定就行
​3.属性设置方式：
①在标签上设置
②在标签的data-options属性中设置
③结合①和②使用
④JS方式创建组件时设置

方法

调用方法的方式：
$("#id").组件名(‘方法名’,‘参数(没有就只写方法名)’)；
注意：
如果传入的第一个参数(方法名)是字符串,那么就代表执行组件上面某一个方法,
如果不是一个字符串那么就是创建组件，传入的参数是json字符串；
如果没有传入参数还是创建组件。

事件

添加事件：

$("#id").组件名({
	事件名:function(){}
		onClick:function(node){	
			alert(node.text);
		}
})

​