zoukankan      html  css  js  c++  java
  • tab 组件

    /*
     *    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 );
            } );
        } );
    })();

  • 相关阅读:
    《C#高级编程(第6版)》第10章筆記第10章集 合
    《C#高级编程(第6版)》第6章筆記第6章运算符和类型强制转换
    解决flash跨域读取XML的问题
    轉:showModalDialog和showModelessDialog使用心得
    用ASP为blog程序编写Trackback功能 小李刀刀(转载)
    轉:VB6中将数据导出到Excel提速之法
    C#讀書資源
    [轉]在SQL Server中使用种子表生成流水号注意顺序
    如何导入导出MySQL数据库*.sql文件操作
    《C#高级编程(第6版)》第7章筆記第7章委托和事件
  • 原文地址:https://www.cnblogs.com/sunhw360/p/4139520.html
Copyright © 2011-2022 走看看