虽然现在有大量的插件可供我们选择使用,但实际开发过程中,使用别人的插件难免会带来问题,比如
所以学习jQuery插件开发很有必要。
自定义插件的类型主要有两种(我猜的)
类级别插件比较简单,通过$.extend()
直接给jQuery添加静态方法,通过$.extend()
来扩展,调用方法形如
$.ajax()
,$.trim()
,$.each()
等。
<script type="text/javascript">
$.extend({
pluginName: function(str) {
str = (str ? str : ‘helloWorld‘);
alert(str);
}
})
$.pluginName();
$.pluginName(‘helkyle‘);
</script>
不出意外地话,窗口会弹出两个alert。类级别插件通常适合用来封装一下方法。更常见的jQuery插件是对象级别的插件。
对象级别插件调用方法为首先通过jquery选择器获取对象并为对象添加方法,然后把方法封装成一个插件,这种插件使用很广泛,使用简单。形如:
$("selector").pluginName({
option1: "option1",
option2: "option2",
...
});
插件大概长这样
$.fn.pluginName = function(options) {
you code...
}
我们的重点放在对象级别的插件开发,后面会补上一个完整的插件案例(如果可以的话)
(function($) {
your code...
})(jQuery);
;(function($) {
your code...
})(jQuery);
;(function($) {
$.fn.pluginName = function(options) {
return this...;
}
})(jQuery);
.className
(可能传过来一个集合),我们需要做多一步。 ;(function($) {
$.fn.pluginName = function(options) {
return this.each(function() {
your code...
});
}
})(jQuery);
;(function($) {
var Plugin = function(options) {
}
Plugin.prototype = {
fun1: function() {
},
fun2: function() {
}
your code ...
}
$.fn.pluginName = function(options) {
return this.each(function() {
return new Plugin(options);
});
}
})(jQuery);
;(function($) {
var Plugin = function(options) {
this.defaults = {
‘color‘: ‘red‘,
‘fontSize‘: ‘12px‘,
‘textDecoration‘: ‘none‘
},
this.options = $.extend({}, this.defaults, options)
}
Plugin.prototype = {
fun1: function() {
},
fun2: function() {
}
your code ...
}
$.fn.pluginName = function(options) {
return this.each(function() {
return new Plugin(options);
});
}
})(jQuery);
暂时先写这么多,因为怕自己会忘记所以写得比较啰嗦~~~
原文地址:http://blog.csdn.net/joueu/article/details/45958811