简单的jQuery插件开发

浏览数：14 / 时间：2015年06月09日

这两天第一次接触jQuery插件开发，没有想象的复杂，鉴于在做的图片轮播插件和图片弹出小插件还在完善就先写个简单的思路记录下。
jQuery插件的开发包括两种：

一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。

另一种是对象级别的插件开发，即给jQuery对象添加方法。

类级别的很好理解，就不多写了。

写一写用户可设定参数的对象级别插件开发

放个标准的模版

(function($){$.fn.pluginName = function(options){}})(jQuery);

通过$.fn.pluginName设定插件的名字
options接收用户设定的参数

下面做个可以更改尺寸颜色的panel插件

(function($) { 
$.fn.Panel = function(options) { 
var defaults={
color:"red",
fontSize:"12px",
background:"#333",
width:200,
height:100
}
var opts=$.extend(defaults,options);
var $this=$(this);
$this.css({
    color:opts.color,
    background:opts.background,
    fontSize:opts.fontSize,
    width:opts.width,
    height:opts.height
    });
}; 
})(jQuery);

defaults就是插件默认样式。

var opts=$.extend(defaults,options)这里$.extend()方法会合并defaults,options设定的方法，如果options没有设定则用defaults的默认参数

下面写一下操作语句就完成啦，一个叫Panel的插件就诞生了！

<body>
<div id="test">HaHa</div>

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/myplugin.js"></script>
<script>

var test=$("#test");
test.Panel({
    color:"#FFF",
    fontSize:"20px",
    background:"#222",
    width:300,
    height:200});

</script>
</body>