如何自己编写一个easyui插件续
接着如何自己编写一个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插件续的更多相关文章
- 如何自己编写一个easyui插件
本文介绍如何通过参考1.4.2版本的progressbar的源码自己编写一个HelloWorld级别的easyui插件,以及如何拓展插件的功能. 有利于我们理解easyui插件的实现,以及了解如何对e ...
- 如何编写一个gulp插件
很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化. 再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方 ...
- 从零开始编写一个vue插件
title: 从零开始编写一个vue插件 toc: true date: 2018-12-17 10:54:29 categories: Web tags: vue mathjax 写毕设的时候需要一 ...
- 自己动手编写一个VS插件(五)
作者:朱金灿 来源:http://blog.csdn.net/clever101 继续编写VisualStudio插件.这次我编写的插件叫DevAssist(意思是开发助手).在看了前面的文章之后你知 ...
- 自己动手编写一个Mybatis插件:Mybatis脱敏插件
1. 前言 在日常开发中,身份证号.手机号.卡号.客户号等个人信息都需要进行数据脱敏.否则容易造成个人隐私泄露,客户资料泄露,给不法分子可乘之机.但是数据脱敏不是把敏感信息隐藏起来,而是看起来像真的一 ...
- 自己动手编写一个VS插件(八)
作者:朱金灿 来源:http://blog.csdn.net/clever101 利用业余时间继续开发一个VS插件.我要开发的插件是一个代码库插件,主要是用于积累我平时要使用的代码.在之前我已经实现了 ...
- 自己动手编写一个VS插件(七)
作者:朱金灿 来源:http://blog.csdn.net/clever101 继续开发VS插件.今天在添加ATL控件时出现一个"未能返回新代码元素"的错误,如下图: 解决办法是 ...
- 自己动手编写一个VS插件(六)
作者:朱金灿 来源:http://blog.csdn.net/clever101 在上篇中我们已经实现了创建和显示一个工具栏出来,它的效果图是这样的: 现在我们实现一些简单功能,具体就是单击按钮弹出一 ...
- webpack编写一个plugin插件
插件向第三方开发者提供了 webpack 引擎中完整的能力.使用阶段式的构建回调,开发者可以引入它们自己的行为到 webpack 构建流程中.创建插件比创建 loader 更加高级,因为你将需要理解一 ...
随机推荐
- JavaScript的一些知识碎片(2)-反射-全局变量-回调
JavaScript中的反射:编程语言中的反射原理都一样,就是通过操作metadata(描述语言的语言)来完成一些不具备反射功能的语言很难实现的功能.在静态语言中,反射是一个高大上的东西,比如在运行时 ...
- 用canvas画简单的“我的世界”人物头像
前言:花了4天半终于看完了<Head First HTML5>,这本书的学习给我最大的感受就是,自己知识的浅薄,还有非常多非常棒的技术在等着我呢.[熊本表情]扶朕起来,朕还能学! H5新增 ...
- Hadoop2.6.0伪分布环境搭建
用到的软件: 一.安装jdk: 1.要安装的jdk,我把它拷在了共享文件夹里面. (用优盘拷也可以) 2.我把jdk拷在了用户文件夹下面. (其他地方也可以,不过路径要相应改变) 3.执行复制安装 ...
- Ubuntu下安装支付宝安全控件
在淘宝购物时,安装支付宝安全控件.下载了一个文件.tar.gz(非常小的一个文件). tar -zxvf 解压之,只有一个aliedit.sh文件,运行这个文件就安装成功了,重启firefox就可以用 ...
- LVS ip-tun服务器脚本
ifconfig tunl0 192.168.10.10 netmask 255.255.255.255 up route add -host 192.168.10.10 dev tunl0 ipvs ...
- Django- 分页
1. 防止 翻页直接输入值错误导致翻页出现问题 应该捕获输入的值,如果有异常 跳转会第一页 try: page = int(传递过来的值) if(page <0): page=1 except ...
- 强联通 HDU 2767 3836
n个点m条边 最少需要几条边变成强连通图 设有a个结点的入读为0, b个结点的出度为0, 则 max{a, b}就是答案. 注意特殊情况: 当原图已经强连通时, 答案是0而不是1. 加一条边少一个入度 ...
- 51nod 1109 bfs
给定一个自然数N,找出一个M,使得M > 0且M是N的倍数,并且M的10进制表示只包含0或1.求最小的M. 例如:N = 4,M = 100. Input 输入1个数N.(1 <= N ...
- Spring不支持依赖注入static静态变量
在springframework里,我们不能@Autowired一个静态变量,使之成为一个spring bean,例如下面这样: 可以试一下,yourClass在这种状态下不能够被依赖注入,会抛出运行 ...
- Js-动态控制table的tr、td增加及删除的具体实现
<table id='wifi_clients_table' style="color:#0099CC;font-size:12px;" class="table ...