jquery插件开发教程入门

今天在写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

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原文链接:jquery插件开发教程入门 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/357.html)

发表评论

请登录后发表评论:

“jquery插件开发教程入门”有2个评论

  1. 阿飞博客

    博主分享的东西有价值~~

    登录回复
  2. 小俊

    学习了,被迫加入前端的苦逼程序员。。。

    登录回复