jQuery EasyUI入门基础组件的三要素-前端培训

EasyUI是一组基于jQuery的UI插件集合，封装了大量CSS和JS，前端开发者只需要了解一些简单的HTML标签，就可以使用EasyUI做出功能丰富并且美观的UI界面。

EasyUI组件都具有属性、方法、事件，即组件的三要素。

1、属性：属性描述了组件的更多信息。

我们通过配置这些属性，可以让EasyUI提供不同的显示效果或功能，比如面板组件有title属性，iconCls属性，collapsed属性。

所有的属性都定义在jQuery.fn.{plugin}.defaults里面。例如，panel面板的属性定义在jQuery.fn.panel.defaults里面。

如果创建组件的时候，我们没有设置组件的属性，那么就使用默认属性。

例如，panel面板的默认属性console.debug($.fn.panel.defaults)；

如果要修改组件的默认属性，则使用$.fn.panel.defaults.closable = true。

特别提醒，属性只能在创建（初始化）组件有效，组件创建完毕后，如果对某个属性进行了修改无效。

2、方法：方法其实就是组件中的某个功能。

我们可以调用组件中的方法，从而达到我们要求。

如果写了EasyUI组件之后传入的第一个参数是字符串,那么就代表执行组件上面某一个方法。

样式$(‘selector’).plugin(‘method’, [parameter])，其中：

selector 是jQuery对象选择器。

plugin 是插件的名称。

method 是相应插件现有的方法。

parameter 是参数对象，可以是一个对象、字符串等。

比如：现在我想隐藏页面中的某个面板，即$(“#mypanel”).panel(“close”)。

如果写了EasyUI组件之后传入的第一个参数不是一个字符串，那么就是创建组件，传入的参数是json字符串；如果没有传入参数还是创建组件。

样式${(}^{\prime }selecto{r}^{\prime }).plugin()（没有传递参数），$(‘selector’).plugin({})（传递json参数）。

特别提醒，如果尝试调用一个非组件的组件方法会直接报错。

3、事件：如果组件发生了什么事情，那么它就会通过事件反应给我们。

比如：我们点击tree组件的某个节点，那么就会触发onClick事件。

所有的事件（回调函数）也都定义在jQuery.fn.{plugin}.defaults里面。

特别提醒，注册事件不能采用dom传统方式注册，需要通过组件注册。