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

  • 相关阅读:
    NHibernate学习笔记manytoone/onetomany/manytomany(转)
    C#.NET使用NHibernate 1.0 XML映射使用中容易出错的地方全程记录(转)
    Interface定义及使用
    c#中的interface abstract 与 virtual(转)
    根据word模板生成word表格报表文档(C#)
    NHibernate中的manytomany关系示范(转)
    工作流平台简介(转自singbird(走夜路的人))
    【Hibernate总结系列】....hbm.xml配置
    CentOS 5.X(更新到6.3)最小化安装过程及网络配置+用yum安装Apache+PHP+MySQL
    CentOS 各版本下载地址和发布时间表(20190401更新)
  • 原文地址:https://www.cnblogs.com/sunhw360/p/4139520.html
Copyright © 2020-2023  润新知