使用jQuery来做前端实有一段时间了,确实也感觉到jQuery的强大和书写相对简单了,不过一直也没去研究过相关的源码,以后有机会还是值得去看看jQuery方面源吗,这段时间对js接触的较多,使用了各种jQuery相关的插件,比如jquery.ui.datepicker.js,flexigrid.js等,确实给开发工作带来了较大的方便,今天自己也依葫芦画瓢,理解了一下jQuery对于插件方面的知识。
1、jQuery插件编写准备
要使用jQuery进行自定义插件的编写,首先应该的是了解jQuery的插件机制或者说是通过jQuery库本身提供的哪些函数进行插件的编写,主要涉及的两个函数是:jQuery.extend(object)和jQuery.fn.extend(object),其具体作用可以通过查找jQuery的API文档
得到,这里也把API简单转过来:
A、
jQuery.extend(object)
扩展jQuery对象本身,用来在jQuery命名空间上增加新函数。
例如:
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
使用方法:
jQuery.min(2,3); //=> 2
$.max(4,5); //=>5
B、jQuery.fn.extend(object)
扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。具体实例将在下面进行一个简单的示例来进行了解。
2、简单的jQuery插件的编写
A、jQuery插件的基本格式
/*
* digitClocker
* @author: zhoucl
* @date : 08/11/2011
*/
(function($, undefined){
...
//code here
...
})(jQuery);
B、将原来直接javascript编写的一个电子时钟改写为jQuery插件使用,代码如下:
/*
* digitClocker
* @author: zhoucl
* @date : 03/11/2011
*/
(function($, undefined){
$.extend($.fn, {
digitclocker: function(settings){
var params = $.extend({
baseURL: '../js/jquery/custom_plugins/',
imgPath: 'digits/'
}, settings);
for(var i = 1; i < 9; i++) {
if(i % 3 == 0) $(this).append("<img alt='0' src='" + params.baseURL + params.imgPath + "colon.gif'>");
else $(this).append("<img class='clockImage' alt='0' src='" + params.baseURL + params.imgPath + "0.gif'>");
}
new DigitClock(params, $(this));
}
});
setInterval(function(){
DigitClock.reDraw();
}, 1000);
DigitClock = function(params, container) {
this.params = params;
this.container = container;
DigitClock.clocks.push(this);
DigitClock.reDraw();
}
DigitClock.clocks=[];
DigitClock.reDraw = function() {
var d=new Date();
for (var i = 0; i < this.clocks.length; i++) {
this.clocks[i].setTime(d.getHours(),d.getMinutes(),d.getSeconds());
}
}
DigitClock.preZero = function(n, pos) {
return ("0"._digitClockRepeat(pos-1)+n).slice(-pos);
}
DigitClock.prototype = {
setTime : function(h, i ,s) {
this.setImage(
DigitClock.preZero(h,2) + DigitClock.preZero(i,2) + DigitClock.preZero(s,2)
)
},
setImage: function(s) {
s = s.split("");
var baseURL = this.params.baseURL;
var imgPath = this.params.imgPath;
var i = 0;
$(".clockImage", this.container).each(function(){
$(this).attr("src", baseURL + imgPath + s[i++] +".gif");
});
}
}
String.prototype._digitClockRepeat = function(n) {
return new Array(n+1).join(this);
}
})(jQuery);
引用上述js文件,在页面中得调用代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>simple_test.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--调用jQuery的库:jquery-1.5.2.js-->
<script src="../js/jquery/jquery-1.5.2.js" type="text/javascript"></script>
<script src="../js/jquery/custom_plugins/jquery.clzps.digitclock.js" type="text/javascript"></script>
<script>
$(function(){
$('#digitClock').digitclocker({
baseURL: '../js/jquery/custom_plugins/',
imgPath: 'digits/'
});
});
</script>
</head>
<body>
<div id="digitClock"></div>
</body>
</html>
效果图如下:
至此,一个简单的jQuery插件编写完成!~~本节源码也可访问放在google开源
链接
- 大小: 4.9 KB
分享到:
相关推荐
jQuery插件的简单介绍,可以帮你很快的了解jQuery
这里提供最基础的jquery插件编辑方法,为jquery插件学习者提供帮助。
这一版能够支持对效果的更灵活定制,而且借助新增的命名空间事件,也使插件开发变得更容易。 jQuery UI(2007年9月):这个新的插件套件是作为曾经流行但已过时的Interface插件的替代项目而发布的。jQuery UI中包含...
一个很好的jquery插件弹出div。最近做项目一直在用jquery,一个很不过的框架!尤其是插件能简化很多开发工作!学习交流.
jquery 插件开发 扩展 适合初学者查看以及学习。
详细介绍了如何开发jquery插件。包括类级别的插件开发和对象级别的插件开发。。。。
《jQueryEasyUI开发指南》主要讲述EasyUI各种插件的用法以及前端插件开发思想,带领读者走入插件开发的世界。在本书中,读者不但可以学到搜索框(searchbox)、进度条(progressbar)、提示框(tooltip)等功能性...
学习jquery开发实用插件,通俗易懂,容易掌握。有助于大家开发出漂亮实用的插件
jquery-patterns, 用于启动插件开发的各种jQuery插件模式 插件插件插件模式 因此,你已经尝试了模板,或者编写了一些你自己的插件。 他们工作的程度和可以读性,但是你对学习的感兴趣,如果有更好的方式可以以结构。...
Jquery自定义插件经典参考,为个人在项目开发中依据需要定制开发基于html代码形式,完全可见表格插件,不影响原来的编程习惯。与原有的MVC框架无缝结合就可以达现Grid表格的所有效果功能.一行 dataGrid = $("#dg")....
Write Less, Do More, 超详细的jQuery学习笔记,深入了解jQuery的语法,为前段开发带来更多的方便
一,首先,制作jQuery插件需要一个闭包 代码如下: (function ($) { //code in here })(jQuery); 这是来自jQuery官方的插件开发规范要求,使用这种编写方式有什么好处呢? a) 避免全局依赖。 b) 避免第三方破坏。 c) ...
自己开发的一个jQuery插件,可以学习借鉴
在第10章你将深入了解并亲手创建jQuery插件。 1.2 创建测试环境 学会一门新语言最好的方式就是亲自动手。你需要一个测试环境来做一些jQuery的初级练习。还好,创建这样一个测试环境只需简单的两步:先安装 Firefox...
闲来无事,学习了一下jquery插件,并开发了一些简单的jquery插件
这是一个jquery插件,可以实现年月份选择功能,简约美观,短小精悍,方便使用,同时也适合jquery插件开发学习。
本人学习demo的源码:其中有两个页面: 1.使用jQuery和Ajax制作的表单(此页面Ajax使用到的接口是本人自己本地写的) 2.汇率插件。
完善了上次上传中的汇率插件的一些功能,修改部分bug。 1.jQuery和Ajax学习制作表单和弹窗(接口为本地接口)。 2.汇率插件(接口为网络接口)。
jquery插件实现table转excel,亲测可用。短小精悍,适合学习,开发。