zoukankan      html  css  js  c++  java
  • ComponentArt控件分析之ComboBox(2)


         
    一.来看下数据数据解析

    首先后台先生成一种数据格式,这种格式跟JSON差不多(不知道为什么不用JSON),查看HTML源代码

    ComboBox2.Data = [[['Text','a'],['Value','b']],[['Text','b'],['Value','c']],[['Text','c'],['Enabled',0],['Value','b']],[['CssClass','comboItemHover'],['Text','d'],['Value','c'],['Id','ComboBoxItem1']],[['Text','a'],['Value','b']],[['Text','b'],['Value','c']],[['Text','c'],['Enabled',0],['Value','b']],[['CssClass','comboItemHover'],['Text','d'],['Value','c'],['Id','ComboBoxItem2']],[['Text','a'],['Value','b']],[['Text','b'],['Value','c']],[['Text','c'],['Enabled',0],['Value','b']],[['CssClass','comboItemHover'],['Text','d'],['Value','c'],['Id','ComboBoxItem3']],[['Text','a'],['Value','b']],[['Text','b'],['Value','c']],[['Text','c'],['Enabled',0],['Value','b']],[['CssClass','comboItemHover'],['Text','d'],['Value','c'],['Id','hello']]];

    2.需要定义一个ComboBoxItem对象(自然要定义数据集合类型了),其中js也要定义,数据结构采用HashTable,查找速度快.其中定义了一个JavaScriptArray用来转换数据


    3.前台处理数据

    数据得到以后就要处理

    前段的ComboBox(Initialize)初始化时会调用Render方法,Render方法会调用RenderDropDown方法,RenderDropDown方法调用RenderItem方法,把每项都呈现出来

    二.展开下拉框

    看这部分花了我一些时间.

    本来的话展开下拉框和关闭下拉框只需要设置一个css样式就可以了的.事情上确实可以这么做.

    ComboBox同时还提供了2个属性CollapseSlide用于设置滑动效果,CollapseDuration用于设置滑动效果的持续时间.

    客户端api提供了Collapse和Expand方法,用于关闭和展开下拉框.按照我的思维就是直接设置下xx.style.display="none"了事.这样就可以用了.为了给控件加上滑动时的效果.这个两个方法基本没做什么.而是调用了相关的方法如ComponentArt_ComboBox_CollapseStep方法.

    这里涉及到递归的使用.
    在Collapse方法中设置了一个当前时间this.CollapseStartTime=(new Date()).getTime();

    然后ComponentArt_ComboBox_CollapseStep方法再获取现在时间与CollapseStartTime相比较,时间差与CollapseDuration属性相比较.当时间差达到CollapseDuration属性值时,即递归结束.

    看代码

    1.
        ComponentArt_ComboBox.prototype.Collapse=function (){
            
    if(this.Resizing){
                
    return ;
                
            }

            
    var _20=document.getElementById(this.Id+"_DropDown");
            
    if(_20&&_20.style.display!="none"){
                _20.style.overflow
    ="hidden";
                
    this.CollapseElement=_20;
                
    //设置当前时间
                this.CollapseStartTime=(new Date()).getTime();
                
    var _21=_qFF(_20);
                
    //递归调用
                ComponentArt_ComboBox_CollapseStep(this,_21);
                
    //_20.style.display="none";
            }

            
    this.Expanded=false;
            
        }
    ;

    2.
        window.ComponentArt_ComboBox_CollapseStep = function(_d, _e) {
            
    if (!_d.CollapseElement) {
                
    return;
            }

            
    var _f = (new Date()).getTime()-_d.CollapseStartTime;
            
    var _10 = ComponentArt_SlidePortionCompleted(_f, _d.CollapseDuration, _d.CollapseSlide);
            
    if (_10 == 1{
            
    //alert(_d.CollapseElement.style.height);
            //_d.CollapseElement.style.height = 280+"px";
            //隐藏
                _d.CollapseElement.style.display = "none";
                _d.CollapseElement 
    = null;
                _d.HideOverlay();
                
    var _11 = _d.get_events().getHandler("collapse");
                
    if (_11) {
                    _11(_d, Sys.EventArgs.Empty);
                }

            }
     else {
                
    var _12 = Math.ceil((1-_10)*_e);
                
    if (_d.ExpandDirection == 1{
                    _d.CollapseElement.style.top 
    = (_d.ExpandBaseLine-_12)+"px";
                }

                
    //高度的滚动在此更改
                _d.CollapseElement.style.height = _12+"px";
                
    //alert(_d.CollapseElement.style.height);
                //递归调用
                setTimeout("ComponentArt_ComboBox_CollapseStep("+_d.Id+","+_e+");", ComponentArt_ComboBox_SlideDelay);
            }

            
    //document.getElementById("aa").innerHTML+="_f---------"+_f+"_10-------"+_10+"-----------"+_d.CollapseElement.style.height+"<br>"
            //alert("_10"+_10+"<br>"+_d.CollapseElement.style.height);
        }
    ;


    3.
    window.cart_slidetype_none=0;
        window.cart_slidetype_exponentialaccelerate
    =1;
        window.cart_slidetype_exponentialdecelerate
    =2;
        window._q87
    =3;
        window.cart_slidetype_quadraticaccelerate
    =4;
        window.cart_slidetype_quadraticdecelerate
    =5;
        
    /**
         * 
         * @param {Object} 时间差
         * @param {Object} 持续时间
         * @param {Object} 效果
         
    */

        window.ComponentArt_SlidePortionCompleted
    =function (_4a,_4b,_4c){
            
    if(_4c==cart_slidetype_none||_4a>=_4b){
                
                
    return 1;
                
            }

            
    var _4d=(_4c==cart_slidetype_exponentialaccelerate)||(_4c==cart_slidetype_quadraticaccelerate);
            
    if(_4d){
                _4a
    =_4b-_4a;
                
            }

            
    //4a(时间差计算)与_4b相比较
            var _4e=_4a/_4b;
            
    var _4f;
            
    switch(_4c){
                
    case _q87:
                _4f
    =_4e;
                
    break;
                
    case cart_slidetype_exponentialdecelerate:
                
    case cart_slidetype_exponentialaccelerate:
                _4f
    =1-Math.pow(1/300,_4e);
                
    break;
                
    case cart_slidetype_quadraticdecelerate:
                
    case cart_slidetype_quadraticaccelerate:
                _4f
    =Math.pow(_4e,2);
                
    break;
                
            }

            
    if(_4d){
                _4f
    =1-_4f;
                
            }

            
    //document.getElementById("aa").innerHTML+=Math.min(Math.max(0,_4f),1)+"<br>";
            return Math.min(Math.max(0,_4f),1);
            
        }
    ;


    看个截图



    好了,结束
  • 相关阅读:
    每日一水 POJ8道水题
    编译和使用 MySQL C++ Connector
    j2ee model1模型完成分页逻辑的实现 详解!
    DB查询分析器访问EXCEL时,要在表名前后加上中括弧或双引号
    指向结构体变量的指针
    EOSS V3.0 企业运营支撑系统(基于RBAC原理的权限管理)
    MybatisGen1.0 Mybatis JavaBean Mapper生成工具
    The table name must be enclosed in double quotation marks or sqare bracket while accessing EXCEL by
    资源-Android:Android
    软件-开发软件:Android Studio
  • 原文地址:https://www.cnblogs.com/Clingingboy/p/808759.html
Copyright © 2011-2022 走看看