tab 组件

标签：io   ar   sp   on   div   2014   art   bs   cti   

/*
 *    tab.js
 *  by sunhw 2014-11-14 重写
 *  <div class="page-wrap tool-tab" data-tabs=".play-tab .tabs" data-contents=".play-cont .vd-list" data-actiontype="click" data-scrollbar="1"></div>
 *  可选参数 data-actiontype="click"  data-scrollbar="1"
 */
;
(function() {
    function Table( option ) {
        this.option = option || {};
        this.maps = {
            currCls : ‘current‘,
            showCls : ‘block‘,
            attrTab : ‘data-tabs‘,
            attrCon : ‘data-contents‘,
            attrAct : ‘data-actiontype‘,
            attrScr : ‘data-scrollbar‘
        };
        this.tabs = T.query( T.dom.getAttr( this.option, this.maps.attrTab ), this.option );
        this.conts = T.query( T.dom.getAttr( this.option, this.maps.attrCon ), this.option );
        this.timer = null;
        this.sleep = 200;
        this.init();
    }

    Table.prototype.handler = function() {
        var me = this;
        var actionType = T.dom.getAttr( me.option, me.maps.attrAct );
        var clearTime = function() {
            clearTimeout( me.timer );
        };
        T.each( me.tabs, function( item, index ) {
            if ( actionType ) {
                T.on( item, actionType, function( e ) {
                    clearTime();
                    me.timer = F.setTimeout( me.bind, me.sleep, me, index );
                } );
            } else {
                T.on( item, ‘mouseover‘, function( e ) {
                    clearTime();
                    me.timer = F.setTimeout( me.bind, me.sleep, me, index );
                } );
                T.on( item, ‘moueseout‘, clearTime );
            }
        } );
    }
    Table.prototype.bind = function( index ) {
        var me = this;
        clearTimeout( me.timer );
        T.each( me.tabs, function( ele ) {
            T.dom.removeClass( ele, me.maps.currCls );
        } );
        T.each( me.conts, function( ele ) {
            T.dom.removeClass( ele, me.maps.showCls );
        } );
        T.dom.addClass( me.tabs[ index ], me.maps.currCls );
        T.dom.addClass( me.conts[ index ], me.maps.showCls );
        me.send( index );
    }
    Table.prototype.send = function( index ) {
        var me = this;
        var isScrollBar = T.dom.getAttr( me.option, me.maps.attrScr );
        if ( isScrollBar == 1 ) {
            T.observer.send( F.EventCenter.CHANGE_TAB, { indexNum : index } );
        } else {
            return;
        }
    }
    Table.prototype.init = function() {
        var me = this;
        if ( me.tabs.length == me.conts.length ) {
            me.handler();
        } else {
            return;
        }
    }
    T.dom.ready( function() {
        var tabs = T.query( ‘div.tool-tab‘ );
        T.each( tabs, function( item ) {
            var table = new Table( item );
        } );
    } );
})();

tab 组件

标签：io   ar   sp   on   div   2014   art   bs   cti   

原文地址：http://www.cnblogs.com/sunhw360/p/4139520.html