接着如何自己编写一个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. Matlab滤波器设计(转)

    滤波器设计是一个创建满足指定滤波要求的滤波器参数的过程.滤波器的实现包括滤波器结构的选择和滤波器参数的计算.只有完成了滤波器的设计和实现,才能最终完成数据的滤波. 滤波器设计的目标是实现数据序列的频率 ...

  2. c++基础 使用智能指针

    三个智能指针模板(auto_ptr.unique_ptr和shard_ptr)都定义了类似指针的对象(c++11已将auto_ptr摒弃),可以将new获得(直接或间接) 的地址赋给这种对象.当智能指 ...

  3. CUDA1.1-函数类型限定符与变量类型限定符

    这部分来自于<CUDA_C_Programming_Guide.pdf>,看完<GPU高性能变成CUDA实战>的第四章,觉得这本书还是很好的,是一种循序渐进式的书,值得看,而不 ...

  4. Toxy新手指南

    Neuzilla出品 官方网站:http://toxy.codeplex.com QQ群:297128022 官方微信公众号: Toxy 是干嘛用的?它是.NET平台上的文件抽取框架,主要解决各种格式 ...

  5. 前端Mvvm QC 设计解析

    QC 官网http://time-go.github.io/qc/ QC的具体用法.介绍和源码,大家可以去官网下载 从本节开始,我会和大家一起分享在这个框架设计中用到的技巧,希望这些技巧能个大家带来灵 ...

  6. HTML5+JS 《五子飞》游戏实现(四)夹一个和挑一对

    在第一章我们已经说了怎么才能“夹一个”以及怎样才能挑一对,但那毕竟只是书面上的,对码农来讲,我们还是用代码讲解起来会更容易了解. 为了更容易对照分析,我们先把路线再次贴出来: // 可走的路线 thi ...

  7. DB2和Oracle区别

    转 http://blog.chinaunix.net/uid-7374279-id-2057574.html 写在前面:今天客户来访(日本人),问我DB2和Oracle区别.因为不是DBA(勉强的理 ...

  8. 基于FPGA的通信系统实验

    伪随机信号发生器 1.伪随机信号发生器原理 伪随机信号发生器又叫PN序列发生器或者是m序列发生器.m序列是一种线性反馈寄存器序列,m序列的产生可以利用r级寄存器产生长度为2^r-1的m序列,该实验中采 ...

  9. memcache 安装

    1 下载两个文件 wget http://www.danga.com/memcached/dist/memcached-1.2.0.tar.gz wget http://www.monkey.org/ ...

  10. rabbitmq技术

    Rabbitmq 初识rabbitmq RabbitMQ是流行的开源消息队列系统,用erlang语言开发.RabbitMQ是AMQP(高级消息队列协议)的标准实现.如果不熟悉AMQP,直接看Rabbi ...