今天在写jquery代码的时候，又想把功能做成jquery插件，尼玛，按照前一篇的思路来做，不用插件模式的已经开发出来了，可是一用到插件就歇菜了，这是难不倒我的。本着继续折腾的精神，继续找另外一些好的教程来学习，其实我的jquery插件都是很简单的，不需要庞大的参数的。
于是找到了一篇文章自己动手开发jQuery插件。
照着文中的思路做下来，的确做成了一个小插件。
本文里面只讲基于对象级别的插件开发，基于类别的插件开发不讲，请自己看书或者搜索。
从前一篇文章中我们知道对象级别的插件开发是从这样子开始的。
(function( $ ) { $.fn.myPlugin = function() { // 这里开始写功能需求 }; })( jQuery );
现在我们的基础代码写出来了，功能是实现点击跳到相应的位置，html代码如下：
<ul id="topnav"> <li class="active"><a href="#data-checked">检测数据</a></li> <li><a href="#drugs">用药情况</a></li> <li><a href="#sports">运动情况</a></li> <li><a href="#food">饮食习惯</a></li> <li><a href="#life">生活习惯</a></li> <li><a href="#harm">病史症状</a></li> </ul>
原来的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 }; //switchingMode 为触发模式 offsetTop 为滚动距离元素顶部的高度 var opts = $.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专题有很多干货：http://developer.51cto.com/art/201005/202450.htm
