自己动手开发jquery插件

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

于是找到了一篇文章。

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

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

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

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

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

<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专题有很多干货：

您可能感兴趣的文章：
HTML5 开发框架 jQuery Mobile
移动端的前端开发利器 jQuery Mobile
jQuery二维条形码插件 My QR Code
jQuery在iPhone/iPad的滚动效果处理 Overscroll
tabSwitch
15款JavaScript和jQuery开发工具、插件
基于Jquery的文字自动截取（提供源代码）
嵌入式JavaScript框架 jQTouch
在网站上应该用的30个jQuery插件整理
10款新鲜出炉的 jQuery 插件(Ajax 插件，有幻灯片、图片画廊、菜单等)