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、方法:方法其实就是组件中的某个功能。

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

扫描二维码关注公众号,回复: 14834452 查看本文章

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

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

selector 是jQuery对象选择器。

plugin 是插件的名称。

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

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

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

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

样式 ( ′ s e l e c t o r ′ ) . p l u g i n ( ) ( 没 有 传 递 参 数 ) , ('selector').plugin()(没有传递参数), (selector).plugin()(‘selector’).plugin({})(传递json参数)。

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

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

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

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

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

猜你喜欢

转载自blog.csdn.net/jenreal/article/details/122339208