[js插件開發教程]實現一個比較完整的開源級選項卡插件

在這篇文章中，我實現了一個基本的選項卡功能：請猛擊后面的鏈接>>   [js插件開發教程]原生js仿jquery架構擴展開發選項卡插件.

還缺少兩個常用的切換（自動切換與透明度漸變），當然有朋友會說，還有左右，上下等等，這些動畫會放在焦點圖（幻燈片）插件系列.

(自動切換，停止控制，透明度漸變 ) 效果預覽：

自動切換的實現：

這個思路很簡單，開啟定時器，讓選項卡的索引+1，加到4的時候（選項卡的長度）從0開始

傳統做法：

index = 0

index++

if ( index == 4 ) {

index = 0

}

小技巧（估計很多人都沒有用過）：

var i = ( index + 1 ) %  4

index為當前選中的選項卡 索引

當index = 0，他下一張就是1,  通過上面的取余操作，i = 1

當index = 3，他下一張就是0, 通過上面的取余操作，i = 0

這種方法不需要判斷邊界，只需要一句代碼。在實際開發中，把那個4替換成選項卡的長度

好了，關鍵的思路和技巧有了，我們開始拼接框架了:

        var defaults = {
            contentClass : 'tab-content',
            navClass : 'tab-nav',
            activeClass : 'active',
            triggerElements : '*',
            activeIndex : 0,
            evType : 'click',
            effect : 'none',
            auto : false,
            delay : 3000,
            duration : 1000
        };

defaults參數，增加幾個配置：

effect: none(沒有特效) / fade( 透明度切換 )

auto: false(不會自動切換) / true ( 開啟自動切換 )

delay : 多少時間 切換一個選項卡

duration: 透明度開啟，這個才會用到，表示，多長時間內 完成透明度的切換

if ( options.effect == 'fade' ) {
            tabContent.style.position = 'relative';
            for( var i = 0; i < tabContentEle.length; i++ ) {
                tabContentEle[i].style.position = 'absolute';
            }
            tabContentEle[opt.activeIndex].style.zIndex = _contentLen + 1;
            opt.delay += opt.duration;
        }

當開啟透明度變化的時候，把選項卡元素設置成定位方式，當前選中的選項卡，層級為最高!!! ( 如果不是最高層級，那么默認是最后一個選項卡在最上面，所以 “內容4” 就會在最上層，顯然不是我們想要的結果）層級+定位 這一招也很常用，經常用來做顯示隱藏，和透明度變化.

根據opt配置，判斷是否開啟了auto自動切換功能

 //是否自動播放
        if ( opt.auto ) {
            for( var i = 0 ; i < tabNavEle.length; i++ ){
                tabNavEle[i].index = i;
                tabNavEle[i].onmouseover = function(){
                    _api.stop();
                    _api.setIndex( this.index );
                };
                tabNavEle[i].onmouseout = function(){
                    _api.start();
                    _api.setIndex( this.index );
                };
            }
            _api.start();
        }

如果開啟了，做兩件事情：

1，調用start()函數，讓索引+1

2，選項卡導航部分，添加事件控制 自動播放的暫停和開始

start與stop方法？

_api.stop = function(){
            timer && clearInterval( timer );
        };

        _api.start = function(){
            _api.stop();
            timer = setInterval( function(){
                _api.next();
            }, opt.delay );
        };

調用next方法，你應該猜得到next方法做的事情就是索引+1 吧

 _api.next = function(){
            var i = ( _index + 1 ) % _contentLen;
            _api.setIndex( i );
        };

索引+1之后，再切換選項卡

最后在setIndex方法：增加透明度變化

if ( _index != index ) {
                        tabContentEle[_index].style.zIndex = _contentLen + 1;
                        for (var i = 0; i < tabContentEle.length; i++) {
                            if (i != _index) {
                                tabContentEle[i].style.zIndex = ( index + _contentLen - ( i + 1 ) ) % _contentLen + 1;
                                tabContentEle[i].style.opacity = 1;
                            }
                        }
                        animate(tabContentEle[_index], {'opacity': 0}, function () {
                            tabContentEle[_index].style.zIndex = ( index + _contentLen - ( _index + 1 ) ) % _contentLen + 1;
                            _index = index;
                        });
                    }

完整的js代碼有220行：

/**
 * Created by ghostwu(吳華).
 */
(function(){
    var G = function( selectors, context ){
        return new G.fn.init( selectors, context );
    }
    G.fn = G.prototype = {
        length : 0,
        constructor : G,
        size : function(){
            return this.length;
        },
        init : function( selector, context ){
            this.length = 0;
            context = context || document;
            if ( selector.indexOf( '#' ) == 0 ){
                this[0] = document.getElementById( selector.substring( 1 ) );
                this.length = 1;
            }else {
                var aNode = context.querySelectorAll( selector );
                for( var i = 0, len = aNode.length; i < len; i++ ) {
                    this[i] = aNode[i];
                }
                this.length = len;
            }
            this.selector = selector;
            this.context = context;
            return this;
        }
    }

    G.fn.init.prototype = G.fn;
    G.extend = G.fn.extend = function () {
        var i = 1,
            len = arguments.length,
            dst = arguments[0],
            j;
        if (dst.length === undefined) {
            dst.length = 0;
        }
        if (i == len) {
            dst = this;
            i--;
        }
        for (; i < len; i++) {
            for (j in arguments[i]) {
                dst[j] = arguments[i][j];
                dst.length++;
            }
        }
        return dst;
    };

    function css(obj, attr, value) {
        if (arguments.length == 3) {
            obj.style[attr] = value;
        } else {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }
    }

    function animate(obj, attr, fn) {
        clearInterval(obj.timer);
        var cur = 0;
        var target = 0;
        var speed = 0;
        var start = new Date().getTime();//起始時間
        obj.timer = setInterval(function () {
            var bFlag = true;
            for (var key in attr) {
                if (key == 'opacity') {
                    cur = css(obj, 'opacity') * 100;
                } else {
                    cur = parseInt(css(obj, key));
                }
                target = attr[key];
                speed = ( target - cur ) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if (cur != target) {
                    bFlag = false;
                    if (key == 'opacity') {
                        obj.style.opacity = ( cur + speed ) / 100;
                        obj.style.filter = "alpha(opacity:" + ( cur + speed ) + ")";
                    } else {
                        obj.style[key] = cur + speed + "px";
                    }
                }
            }
            if (bFlag) {
                var end = new Date().getTime();//結束時間
                console.log( '總計:',  ( end - start ) );
                clearInterval(obj.timer);
                fn && fn.call(obj);
            }
        }, 30 );
    }

    G.fn.tabs = function( options ){
        options = options || {};
        var defaults = {
            contentClass : 'tab-content',
            navClass : 'tab-nav',
            activeClass : 'active',
            triggerElements : '*',
            activeIndex : 0,
            evType : 'click',
            effect : 'none',
            auto : false,
            delay : 3000,
            duration : 1000
        };

        var opt = G.extend( {}, defaults, options );

        var tabContent = this[0].querySelector( "." + opt.contentClass );
        var tabContentEle = tabContent.children;
        var tabNavEle = this[0].querySelectorAll( "." + opt.navClass + '>' + opt.triggerElements );

        var _contentLen = tabContentEle.length; //選項卡個數
        var _index = opt.activeIndex;
        var timer = null;

        if ( options.effect == 'fade' ) {
            tabContent.style.position = 'relative';
            for( var i = 0; i < tabContentEle.length; i++ ) {
                tabContentEle[i].style.position = 'absolute';
            }
            tabContentEle[opt.activeIndex].style.zIndex = _contentLen + 1;
            opt.delay += opt.duration;
        }

        var _api = {};

        _api.next = function(){
            var i = ( _index + 1 ) % _contentLen;
            _api.setIndex( i );
        };

        _api.stop = function(){
            timer && clearInterval( timer );
        };

        _api.start = function(){
            _api.stop();
            timer = setInterval( function(){
                _api.next();
            }, opt.delay );
        };

        _api.setIndex = function( index ){
            //當前標簽加上active樣式，其余標簽刪除active樣式
            for ( var i = 0; i < _contentLen; i++ ) {
                if ( tabNavEle[i].classList.contains( 'active' ) ) {
                    tabNavEle[i].classList.remove('active');
                }
            }
            tabNavEle[index].classList.add( 'active' );
            switch ( opt.effect ){
                case 'fade':
                    if ( _index != index ) {
                        tabContentEle[_index].style.zIndex = _contentLen + 1;
                        for (var i = 0; i < tabContentEle.length; i++) {
                            if (i != _index) {
                                tabContentEle[i].style.zIndex = ( index + _contentLen - ( i + 1 ) ) % _contentLen + 1;
                                tabContentEle[i].style.opacity = 1;
                            }
                        }
                        animate(tabContentEle[_index], {'opacity': 0}, function () {
                            tabContentEle[_index].style.zIndex = ( index + _contentLen - ( _index + 1 ) ) % _contentLen + 1;
                            _index = index;
                        });
                    }
                    break;
                default:
                    for ( var i = 0; i < _contentLen; i++ ) {
                        tabContentEle[i].style.display = 'none';
                    }
                    tabContentEle[index].style.display = 'block';
                    _index = index;
            }
        }

        _api.setIndex( _index ); //默認的選項卡

        //所有的標簽綁定事件
        for( var i = 0, len = tabNavEle.length; i < len; i++ ) {
            tabNavEle[i].index = i;
            tabNavEle[i].addEventListener( opt.evType, function(){
                var i = this.index;
                _api.setIndex( i );
            }, false );
        }

        //是否自動播放
        if ( opt.auto ) {
            for( var i = 0 ; i < tabNavEle.length; i++ ){
                tabNavEle[i].index = i;
                tabNavEle[i].onmouseover = function(){
                    _api.stop();
                    _api.setIndex( this.index );
                };
                tabNavEle[i].onmouseout = function(){
                    _api.start();
                    _api.setIndex( this.index );
                };
            }
            _api.start();
        }

        return this;
    }

    var $ = function( selectors, context ){
        return G( selectors, context );
    }
    window.$ = $;
})();