接着如何自己编写一个easyui插件继续分享一下如何从上一节写的“hello”插件继承出一个“hello2”。

参考了combobox的源码中继承combo,当然我这个简单很多了。都是根据自己的理解来写的,没有参考什么权威资料,欢迎各位看官拍砖。

1. 实现效果

点击这里在线查看
增加了一个输入框,sayHello的是输入的名字。效果:

2. 贴代码

(function ($) {
function init(target) {
$(target).addClass('hello2'); return $(target);
} //easyui插件函数
$.fn.hello2 = function (options, param) {
//如果options为string,则是方法调用,如$('#divMyPlugin').hello('sayHello');
if (typeof options == 'string') {
var method = $.fn.hello2.methods[options];
if (method) { //尝试调用hello2的方法,没有找到就去找hello的方法
return method(this, param);
} else {
return this.hello(options, param); //调用继承的hello的方法
}
} //否则是插件初始化函数,如$('#divMyPlugin').hello();
options = options || {};
return this.each(function () {
var state = $.data(this, 'hello');
if (state) {
$.extend(state.options, options);
} else {
//easyui的parser会依次计算options、initedObj
state = $.data(this, 'hello2', {
options: $.extend({}, $.fn.hello2.defaults, $.fn.hello2.parseOptions(this), options),
}); init(this);
} $(this).hello(state.options); //调用继承的hello的构造方法 var $input = $("<input />");
var current = this;
$input.width(state.options.inputWidth).val(state.options.to).change(function () {
var val = $(this).val();
$.data(current, 'hello').options.to = val;
$.data(current, 'hello2').options.to = val;
});
$(this).append($input); $(this).css('color', state.options.myColor);
});
}; //【注意】这里的methods没有采用$.extend
$.fn.hello2.methods = {
options: function (jq) {
var copts = jq.hello('options'); //获取hello继承的options
return $.extend($.data(jq[0], 'hello2').options, {});
}
}; //设置参数转换方法(使用$.extend从继承的hello那里拓展)
$.fn.hello2.parseOptions = function (target) {
var opts = $.extend({}, $.fn.hello.parseOptions(target), $.parser.parseOptions(target, [{ inputWidth: 'number' }]));//这里可以指定参数的类型
return opts;
}; //设置hello插件的一些默认值(使用$.extend从继承的hello那里拓展)
$.fn.hello2.defaults = $.extend({}, $.fn.hello.defaults, {
inputWidth: 100
}); //注册插件hello2
$.parser.plugins.push("hello2");
})(jQuery);

  

如何自己编写一个easyui插件续的更多相关文章

  1. 如何自己编写一个easyui插件

    本文介绍如何通过参考1.4.2版本的progressbar的源码自己编写一个HelloWorld级别的easyui插件,以及如何拓展插件的功能. 有利于我们理解easyui插件的实现,以及了解如何对e ...

  2. 如何编写一个gulp插件

    很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化. 再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方 ...

  3. 从零开始编写一个vue插件

    title: 从零开始编写一个vue插件 toc: true date: 2018-12-17 10:54:29 categories: Web tags: vue mathjax 写毕设的时候需要一 ...

  4. 自己动手编写一个VS插件(五)

    作者:朱金灿 来源:http://blog.csdn.net/clever101 继续编写VisualStudio插件.这次我编写的插件叫DevAssist(意思是开发助手).在看了前面的文章之后你知 ...

  5. 自己动手编写一个Mybatis插件:Mybatis脱敏插件

    1. 前言 在日常开发中,身份证号.手机号.卡号.客户号等个人信息都需要进行数据脱敏.否则容易造成个人隐私泄露,客户资料泄露,给不法分子可乘之机.但是数据脱敏不是把敏感信息隐藏起来,而是看起来像真的一 ...

  6. 自己动手编写一个VS插件(八)

    作者:朱金灿 来源:http://blog.csdn.net/clever101 利用业余时间继续开发一个VS插件.我要开发的插件是一个代码库插件,主要是用于积累我平时要使用的代码.在之前我已经实现了 ...

  7. 自己动手编写一个VS插件(七)

    作者:朱金灿 来源:http://blog.csdn.net/clever101 继续开发VS插件.今天在添加ATL控件时出现一个"未能返回新代码元素"的错误,如下图: 解决办法是 ...

  8. 自己动手编写一个VS插件(六)

    作者:朱金灿 来源:http://blog.csdn.net/clever101 在上篇中我们已经实现了创建和显示一个工具栏出来,它的效果图是这样的: 现在我们实现一些简单功能,具体就是单击按钮弹出一 ...

  9. webpack编写一个plugin插件

    插件向第三方开发者提供了 webpack 引擎中完整的能力.使用阶段式的构建回调,开发者可以引入它们自己的行为到 webpack 构建流程中.创建插件比创建 loader 更加高级,因为你将需要理解一 ...

随机推荐

  1. Shell高级编程视频教程-跟着老男孩一步步学习Shell高级编程实战视频教程

    Shell高级编程视频教程-跟着老男孩一步步学习Shell高级编程实战视频教程 教程简介: 本教程共71节,主要介绍了shell的相关知识教程,如shell编程需要的基础知识储备.shell脚本概念介 ...

  2. PHP Date ( I need to use)

    本文记录项目中用到的 PHP Date 相关,备忘. 日期格式约定为 xx-xx-xx 格式(字符串),例如 2016-03-09. xx-xx-xx -> 时间戳 $date = " ...

  3. 你能熟练使用Dictionary字典和List列表吗?(转)

    命名空间System.Collections.Generic中有两个非常重要,而且常用的泛型集合类,它们分别是Dictionary<TKey,TValue>字典和List<T> ...

  4. 写一个 nodejs npm应用 - webhere

    前言.没图不说话,先上图. What's webhere? 有没有遇到这样的场景:写程序的时候,需要访问一个文件,这个文件 需要是放到一台web服务器上,但是你不是开发的web应用. 所以呢,你不得不 ...

  5. Congruence relation 同余关系

    https://en.wikipedia.org/wiki/Congruence_relation https://zh.wikipedia.org/wiki/%E5%90%8C%E9%A4%98%E ...

  6. 53-whereis 查找文件

    查找文件 whereis [options] file 参数 file 是whereis需要查找的文件,这些文件属于原始代码,二进制文件或是帮助文件 选项 -b               只查找二进 ...

  7. android 圆角图片的实现

    图片展示的时候总觉的直角的图片不好看?好办法来了!-- public class ToRoundCorner extends Activity{ public Bitmap toRoundCorner ...

  8. Bete冲刺第五阶段

    Bete冲刺第五阶段 今日工作: web: 今日做的最大的工作是成功顺利的吧web部署到阿里云服务器上了,代码顺利在公网上跑,解决了与ios的网络连接问题.同时优化了几个接口的查询逻辑,减少了对数据库 ...

  9. angularjs实现时钟效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. 利用ajaxfileupload.js异步上传文件

    1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="e ...