做优质教育·育智慧人才
咨询热线:028-83328890
菁瑞优智it培训 当前位置: 首页> 新闻资讯> 正文

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

来源:菁瑞优智 作者:小菁 时间:2022-01-04

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字符串;如果没有传入参数还是创建组件。

样式$('selector').plugin()(没有传递参数),$('selector').plugin({})(传递json参数)。

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

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

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

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

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

免费预约,试听课程
即将开班,名额有限,火热预约中

免费提升

课程升级,老学员免费学习

免费指导

老学员遇到技术难题,提供技术支持

免费探讨

不定期开展线上、线下公开课

免费吃喝

学员交流会(免费吃喝玩儿乐交友)