一.来看下数据数据解析

首先后台先生成一种数据格式,这种格式跟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用来转换数据


    private string BuildStorage()
    {
      JavaScriptArray arNodeList = new JavaScriptArray();

      foreach (ComboBoxItem oItem in this.Items)
      {
        ProcessItem(oItem, arNodeList);
      }
        string strList=arNodeList.ToString();
        return strList;
    }
    private void ProcessItem(ComboBoxItem oItem, ArrayList arNodeList)
    {
        

      ArrayList itemProperties = new ArrayList();
      foreach (string propertyName in oItem.Properties.Keys)
      {
        switch (propertyName.ToLower())
        {
          // bools
          case "enabled": itemProperties.Add(new object[] { "Enabled", oItem.Enabled }); break;

          // normal string handling
          default:
            itemProperties.Add(new object[] { propertyName, oItem.Properties[propertyName] });
            break;
        }
      }
      arNodeList.Add(itemProperties);
    }

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

看个截图

好了,结束

转载于:https://www.cnblogs.com/Clingingboy/archive/2007/07/07/808759.html

ComponentArt控件分析之ComboBox(2)相关推荐

  1. 在DataGridView控件中加入ComboBox下拉列表框的实现

    原文 http://www.cnblogs.com/luqingfei/archive/2007/03/28/691372.html 虽然在Visual Studio中 DataGridView控件的 ...

  2. Delphi皮肤控件分析与QQ的皮肤变色功能

    关于界面美化方面,一直是一个脑壳疼的问题!以前一直偷懒,使用的三方控件!但是在使用了一段时间之后,都或多或少的有些问题!不是我说三方控件如 何如何的不好!只是三方控件多是庞大的一个肢体,要兼顾的用户群 ...

  3. 【Android归纳】基于XListView的下拉刷新、上拉加载更多的控件分析

    目录 前言 功能介绍 总体设计 组成 类关系图 详细设计 XlistViewHeader原理分析 XListViewFooter原理分析 XListView原理分析 代码带注释下载 目录 前言 如果你 ...

  4. vb.net 教程 3-4 窗体编程 公共控件2 radiobutton ComboBox

    版权声明:本文为博主原创文章,转载请在显著位置标明本文出处以及作者网名,未经作者允许不得用于商业目的. 5.radiobutton 单选框.与checkbox不同的是,这个控件同时只能选择其中一个.不 ...

  5. 教你用ActiveReports报表控件分析京东双十一数据的价值

    随着双十一购物盛会落下帷幕,各大电商平台纷纷公布出自己今年的成绩.与其它同行不同的是,京东除了公布1598亿的线上下单金额,还公布了线上线下融合的战果. 面对京东线上.线下海量数据源,我们该如何进行整 ...

  6. VC++中combo box(组合框)控件使用说明/MFC COMBOBOX的使用

    转自:不知道... Combo Box (组合框)控件很简单,可以节省空间.从用户角度来看,这个控件是由一个文本输入控件和一个下拉菜单组成的.用户可以从一个预先定义的列表里选择一个选项,同时也可以直接 ...

  7. ASP.NET的五大数据控件分析

    ASP.NET 数据控件:GridView,DataList,Repeater ,DetailsView,FormView. ASP.NET 数据控件综述: 1.前3个用于呈现多条记录,后面2个用于呈 ...

  8. easyui之combo控件分析

    /** * combo - jQuery EasyUI * * Licensed under the GPL: * http://www.gnu.org/licenses/gpl.txt * * Co ...

  9. easyui之datagrid控件分析

    /** * datagrid - jQuery EasyUI * * Licensed under the GPL: * http://www.gnu.org/licenses/gpl.txt * * ...

最新文章

  1. python 如果没有该key值置为空_在python字典中用“None”替换空值
  2. Halcon - 定位 - 卡尺
  3. as将安卓应用打包_Android Studio打包生成apk的方法(超级简单哦)
  4. OpenShift 4 Hands-on Lab (12) 使用配置参数和环境变量
  5. EDIUS 9 PRO(视频编辑软件)
  6. java 制作签名版电子合同
  7. PyQt5 关于消息盒子QMessageBox 不显示消息盒子且出现内存不足的问题
  8. 提升网页加载速度 | google网站速度测试
  9. 凭什么软件测试入门就有一万+工资,为什么?我不相信。
  10. iTop-4412 裸机教程(一)- 从启动方式开始
  11. 面试角度分析:微信里面让你删掉一个功能,你选哪个?
  12. 燕十八 Mysql 笔记 68 课
  13. mysql 存储类型文本最大长度longtext
  14. 十八、绘制游戏背景图片
  15. 圣诞要到了~教你用Python制作一个表白神器——照片墙,祝你成功
  16. 图片太大不要慌,简单的调整图片大小
  17. mybatis lazyload
  18. java 获取 word 窗体域_办公小技巧:巧用窗体域 控制Word文档修改区
  19. 删了 GPL 协议转闭源?法院判决:GPL 协议终身有效
  20. 深度操作系统 15.2——怀揣梦想,笃定前行

热门文章

  1. [BZOJ1036][ZJOI2008]树的统计Count(树链剖分)
  2. java代码逆向工程生成uml
  3. CCF NOI1072 爬楼梯
  4. 我看ITIL在中国(六):如何建设有中国特色的IT运维管理平台【三】
  5. 51aspx技术文章汇总搜集
  6. Web前端JavaScript笔记(4)节点
  7. java 时间转为毫秒数_疫情期间面试总结一(java基础方面)
  8. python原理_强化学习:原理与Python实现
  9. 表格中序号怎计算机课程视频,【答疑】在Excel表格里输入了文字后怎么下拉顺序号啊?如何在表格里添加序号? - 视频教程线上学...
  10. 大数据后从此再无隐私_0-2输球后,恒大再迎2大坏消息,2项数据很尴尬,补时还后场倒脚...