首页 > 建站教程 > Div+Css >  jQuery对象插件封装步骤正文

jQuery对象插件封装步骤

jQuery是js的一个非常优秀的库,它大大简化了js的很多操作,并且解决了js的大部分兼容性问题。甚至很多css兼容性问题,用jQuery写都能解决。jQuery的口号就是write less,do more。今天,我爱模板网带来一个tab选项卡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名。