jQuery对象插件封装步骤

jQuery是js的一个非常优秀的库，它大大简化了js的很多操作，并且解决了js的大部分兼容性问题。甚至很多css兼容性问题，用jQuery写都能解决。

这里是对象插件的封装。当然，封装插件很多，这里是最简单的一种：

1、打两个括号 ()()
2、在第二个括号里面加入"jQuery"

()(jQuery)

 

3、在第一个括号里面写一个匿名函数，传参是一个$

(function($){})(jQuery)

4、在function($){}写：$.fn.插件名，如$.fn.tabs，这里的fn表示本插件是需要一个dom对象的插件
5、在刚才的$.fn.tabs后面“=”一个传参的(有参)匿名函数

$.fn.tabs = function(options){
}

6、在刚才的匿名函数里面定义一个对象，对象的属性就是插件需要传递的参数，默认值就是插件参数的默认值：

$.fn.tabs = function(options){
    var defaults = {
        currentStyle : "current",
        contentList  : "content_list"
    }
}

7、将传递的参数，继承刚才定义的对象defaults

$.fn.tabs = function(options){
    var defaults = {
        currentStyle : "current",
        contentList  : "content_list"
    }
    options = $.extend(defaults,options);
}

 

8、将你写的代码，封装起来，得到下面的代码：

(function($){
    $.fn.tabs = function(options){
        var defaults = {
            currentStyle : "current",
            contentList  : "content_list"
        }
        options = $.extend(defaults,options);
        $(this).mouseover(function(){
            $(this).addClass(options.currentStyle).siblings().removeClass(options.currentStyle);
            var _index = $(this).index();
            $("."+options.contentList).eq(_index).show().siblings().hide();
        })
    }
})(jQuery)    

 

9.调用插件

$("#nav_des li").tabs({
    currentStyle : "current456",
    contentList  : "con"
});

 

这里是一个tab选项卡插件，传递两个参数，一个是tab的当前class样式，一个是tab选项卡的类容容器class名。