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名。