EasyUI入门

Lena ·

更新时间:2024-11-14

· 887 次阅读

文章目录EasyUI入门简单介绍目录说明使用EasyUI导入的包声明组件的两个方法easyui组件的三要素常见异常常用的组件 EasyUI入门 简单介绍

Easyui它就是基于jquery封装的一个前端框架，让我们后端程序员，不需要写复杂的js或者css就能把easyui玩转
才开始学习这个框架的伙伴可以进入EasyUI官网直接查看demo模块，看其能实现哪些效果。千万不要一来直接看代码。肯定晕！
$('#cc').combobox({ url: ..., required: true, valueField: 'id', textField: 'text' });

提示：
1 查看组件默认拥有的属性或者事件
语法格式:$.fn.组件名.defaults

2 修改组件默认属性的值
语法格式:$.fn.组件名.defaults.属性=值

easyui组件的三要素

1.属性：描述了组件的更多信息
使用html定义属性的3种方式

① 直接作为标签的自定义属性
	   
	title,closed都是自定义属性;
② 使用html5中规范data属性. data-options
	
③ 以上两种混合使用

使用js定义属性


//使用js创建的时候通过json对象传入
		$("#p1").panel({
			title:"标题",
			closed:false
		});
		p1	
	修改面板标题

2.方法：组件中的某个功能
(调用方法的语法格式: jquery对象.组件名(“函数名”,[参数]))

①.创建组件的语法

$('selector').plugin(); //没有传递参数
$('selector').plugin({}); //传递json参数

②.调用方法的语法

$('selector').plugin('method', [parameter]); 
selector 是jQuery对象选择器。
plugin 是插件的名称。
method 是相应插件现有的方法。
parameter 是参数对象，可以是一个对象、字符串等。

小结：
如果写了easyui组件之后传入的第一个参数是字符串,那么就代表执行组件上面某一个方法,
如果不是一个字符串那么就是创建组件，传入的参数是json字符串；如果没有传入参数还是创建组件.

3.事件
如果组件发生了什么事情，那么它就会通过事件反应给我们。比如：我们点击tree组件的某个节点，那么就会触发onClick事件。


$(function() {
	//组件注册事件的写法与属性一模一样.
	$('#tree').tree({
		//属性和事件
		animate:true,
		onClick: function(node){
			alert(node.text);  // 在用户点击的时候提示
		}
	});
});

常见异常

1.TypeError: $.data(…) is undefined
尝试调用一个非组件的组件方法那么直接报错；
在这里插入图片描述