Tab组件

/*
    Tab组件
        tab-nav-list 选中样式 current || on
        tab-cont-list 显示样式 block
    example:
    HTML结构
    <div class="js-tab tab-def">
        <ul class="tab-nav">
            <li class="js-nav-list current"><a href="javascript:;">tab1</a></li>
            <li class="js-nav-list"><a href="javascript:;">tab2</a></li>
            <li class="js-nav-list"><a href="javascript:;">tab3</a></li>
        </ul>
        <div class="tab-content">
            <div class="js-cont-list block">1111111111111111111111</div>
            <div class="js-cont-list">2222222222222222222222</div>
            <div class="js-cont-list">3333333333333333333333</div>
        </div>
    </div>
    调用方法
    $( function(){
        $( '.js-tab' ).Tab({
            tabNavList : '.js-tab .js-nav-list',
            tabContList : '.js-tab .js-cont-list',
            tabCurrentCls : 'current',
            tabShowCls : 'block',
            tabActionType : 'click'
        });
    } );
*/
;(function(){
    $.fn.Tab = function( options ){
        var self = $( this );
        var settings = {
            tabNavList : '',
            tabContList : '',
            tabCurrentCls : 'current',
            tabShowCls : 'block',
            tabActionType : 'mouseover',
            tabIsScroll : false,
            tabIsAjax : false
        }, timer = 0, delay = 200;
        self.opctions = $.extend( settings, options || {} ) || {};
        self.tabs = $( options.tabNavList );
        self.conts = $( options.tabContList );

        if( !self.tabs.length || !self.conts.length || ( self.tabs.length != self.conts.length ) ){ return; }
        var __hander = function( e, index ){
            e.preventDefault();
            e.stopPropagation();
            $.each( self.tabs, function( idx, item ){
                $( item ).removeClass( options.tabCurrentCls );
            } );
            $.each( self.conts, function( idx, item ){
                $( item ).removeClass(options.tabShowCls );
            } );
            $( self.tabs[index] ).addClass( options.tabCurrentCls );
            $( self.conts[index] ).addClass( options.tabShowCls );
        };
        function __clearTimeout__(){
            clearTimeout( timer );
        }
        function __bindEvent__(){
            $.each( self.tabs, function( index, item ){
                $( item ).on( self.opctions.tabActionType, function( eve ){
                    __hander( eve, index );
                } );
            } );
        }
        __bindEvent__();
    };
})();