请选择 进入手机版 | 继续访问电脑版

学JAVA网

 找回密码
 立即注册

怎么编写一个easyui插件 easyui插件详解

[复制链接]
发表于 2018-4-23 15:24:00 |显示全部楼层
本文介绍如何通过参考1.4.2版本的progressbar的源码自己编写一个HelloWorld级别的easyui插件,以及如何拓展插件的功能。
有利于我们理解easyui插件的实现,以及了解如何对easyui插件进行拓展,或者当发现bug时在不修改源码的情况下对bug进行修复。

1. 首先让我们来看看progressbar的源码(已经删除了一些对本文不重要的)。
比较了一下有源码的那几个插件,发现这个只有3KB,最小,所以拿这个学习最好了;而且这个progressbar没有涉及继承其他控件,易于理解。

QQ截图20180423152338.png


2:
我们倒着看,
①$.fn.progressbar.defaults定义了一些参数的默认值,而且是直接定义在$.fn.progressbar.defaults上的,是全局的。
②$.fn.progressbar.parseOptions是一个对data-options="......"中的属性进行解析的方法,其实$.parser.parseOptions已经帮助我们做了主要工作,我们只需要设置一下参数是什么类型的数据就行,如这里的value设置为number类型。
③$.fn.progressbar.methods定义了这个插件的行为(一些方法),可以看出也是全局的。
④$.fn.progressbar这个是重点了,typeof options == 'string'时就是调用插件的某个方法,如$('#xxx').progressbar('setValue', 10);否则就相当于调用无参方法$('#xxx').progressbar(),有点像是个构造函数。
1.png
2.png


3. 给hello插件拓展功能
我们前面已经说了$.fn.hello.methods是全局的,所以所谓拓展就是直接给$.fn.hello.methods加方法。
如果需要改写原有实现,可以直接将原来的方法覆盖掉就可以了,如:$.fn.hello.methods.sayHello = function(jq){ ...... };
jquery.hello.extension.js
sy.png


4. 使用hello插件
http://liqipeng.github.io/MyDemo ... -easyui-plugin.html
您需要登录后才可以回帖 登录 | 立即注册

Archiver|手机版|学JAVA网

GMT+8, 2018-8-17 08:12 , Processed in 0.185499 second(s), 23 queries .

Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

Copyright © 2015-2018 xuejava网 / 鲁ICP备17054568号-1
回顶部