今天在写jquery代码的时候，又想把功能做成jquery插件，尼玛，按照前一篇的思路来做，不用插件模式的已经开发出来了，可是一用到插件就歇菜了，这是难不倒我的。本着继续折腾的精神，继续找另外一些好的教程来学习，其实我的jquery插件都是很简单的，不需要庞大的参数的。

于是找到了一篇文章自己动手开发jQuery插件。

照着文中的思路做下来，的确做成了一个小插件。

本文里面只讲基于对象级别的插件开发，基于类别的插件开发不讲，请自己看书或者搜索。

从前一篇文章中我们知道对象级别的插件开发是从这样子开始的。

(function( $ ) { $.fn.myPlugin = function() { // 这里开始写功能需求 }; })( jQuery );

现在我们的基础代码写出来了，功能是实现点击跳到相应的位置，html代码如下：

=======

原来的jquery代码如下：

$(function(){ $("#topnav li").live({ "hover":function(){ $(this).toggleClass("hover"); }, "click":function(){ $(this).addClass("active").siblings().removeClass("active"); var divItem = $(this).find("a").attr("href"); var divHeight = $(divItem).offset().top; $("body,html").stop(true,false).animate({scrollTop:divHeight - 40},500); return false; } }); });

根据上面的jquery插件书写方法，可以修改为两种方式，一种是鼠标点击，一种是鼠标经过，插件方法如下：

;(function ($) { $.fn.navScroll = function (options) { var defualts = { switchingMode: "click", offsetTop: 0 }; = $.extend({}, defualts, options); var obj = $(this); $("li",obj).hover(function(){$(this).toggleClass("hover");}); $("li:first", obj).addClass("active"); $("li", obj).bind(opts.switchingMode, function () { $(this).addClass("active").siblings().removeClass("active"); var divid = $("a", $(this)).attr("href") var divHeight = $(divid).offset().top; $("body, html").stop(true,false).animate({scrollTop:divHeight - opts.offsetTop},500); return false; }); }; })(jQuery); $(function () { $("#topnav").navScroll({switchingMode:"hover",offsetTop:40}); });

简单的功能。转化为jquery插件可以用两种方式，一种是点击，一种是鼠标滑过。

这个插件里面已经有了扩展了。

另外还可以使用链式的方式返回。只要在function(){后面加

return this.each(function () { //原代码 } 调用的时候可以用 $("#topnav").tabs({switchingMode:"hover"}).css("border","1px solid #ff0000");

查看演示

51cto的jquery专题有很多干货：