系统滚动条实现的NUD控件Unusable版
昨天研究了一下系统滚动条,准备使用它来实现一个NumericUpDown控件,因为它可以带来最正宗的微调按钮外观,并说了一下可以使用viewport里的onScroll事件来获取系统滚动条的上下点击动作。
同时昨天还说了onScroll事件的一个问题是,在点击了滚动条的上下按钮后,onScroll事件会被连续的触发n次(n取[1,4])。我们发现这些连续事件都在一个很小的timespan里触发的,也就在12ms以内。于是我们在onScroll事件中使用setTimeout来启动一次有意义的数值变化,代码如下,分支false用来判断点击的方向。
{
NumericUpDown.ScrollBegin = new Date().getTime();
NumericUpDown.ChangeNumeric.Element = elmt;
window.setTimeout(NumericUpDown.ChangeNumeric, 12);
}
else
{
var time = new Date().getTime();
if ( NumericUpDown.ScrollDirection == 0 )
{
var scrollOffset = NumericUpDown.ScrollTopValue - elmt.scrollTop;
NumericUpDown.ScrollDirection = scrollOffset > 0 ? 1 : -1;
NumericUpDown.ScrollTopValue = elmt.scrollTop;
}
}
控件使用一个DIV,一个SPAN和一个INPUT type='hidden'来实现,DIV的overflow-y设为scroll,SPAN用来显示当前的数值,INPUT type='hidden'用来存放控件当前的数值。
style="cursor: default; border: solid 1px red; overflow-y: scroll; width: 50;
height: expression(this.all.tags('SPAN')[0].offsetHeight);">
<span style="display: block; white-space: nowrap; text-indent: 2;">1span><input
type="hidden" id="Hidden1" value="1" />div>
初始化控件的时候,再动态添加两个SPAN分别到默认SPAN的两端,这是因为滚动条如果处在任何一个顶端(top或bottom)是不会触发onScroll事件的,也就是说要把默认那个SPAN放到DIV的正中间,前后在分别有一个SPAN。
var current = parseInt(elmt.Current);
var step = parseInt(elmt.Step);
var previousSpan = NumericUpDown.CreateSpan();
previousSpan.innerText = current - step;
var nextSpan = NumericUpDown.CreateSpan();
nextSpan.innerText = current + step;
var currentSpan = elmt.all.tags('SPAN')[0];
currentSpan.insertAdjacentElement('beforeBegin', previousSpan);
currentSpan.insertAdjacentElement('afterEnd', nextSpan);
NumericUpDown.ScrollTo.CurrentSpan = currentSpan;
window.setTimeout(NumericUpDown.ScrollTo, 1);
elmt.IsInitialized = true;
控件NumericUpDown代码为:
由于在这个页面上注入代码太麻烦了,就把demo放到这里了。虽然这个NumericUpDown自然的就可以支持键盘Up & Down和PageUp & PageDown,可是最后一个问题却真的没有招了,以至于我最终只能放弃这个尝试了。看看demo,框里的数字有些抖动是吧?这是系统的默认行为,而且点击的越快,抖的也越快,真的没有办法了。
所以完成了也只能叫做Unusable版...
本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。
系统滚动条实现的NUD控件Unusable版相关推荐
- c语言windows 编程下silder控件,VB6 常用控件 滚动条ScorllBar和Slider控件
滚动条(ScorllBar)和Slider控件通常用来附在窗体上以协助观察数据或确定位置,也可用来作为数据输入的工具. 滚动条(ScorllBar)和Slider控件都有水平和垂直两种,Slider控 ...
- 为系统加载右键注册控件选项【VB 注册控件】
做VB的,经常注册和反注册OCX控件和DLL链 但是,每次都要 "开始"--"运行" --"regsvr32 C:\********\******.o ...
- win7已经阻止此发行者在您的计算机上运行软件,win7系统打开特定网站提示“控件无法安装,windows已阻止此软件因为无法验证发行者”如何解决...
在使用win7系统的过程中,难免会遇到各种问题,有win7系统用户要在电脑中打开一些特定网站或者使用某些网站功能的时候,比如打开工商银行网站时,就会弹出提示"控件无法安装,windows已阻 ...
- 仿抖音短视频系统源码,给控件添加阴影效果
仿抖音短视频系统源码中,实现给控件添加阴影效果的相关代码 1.使用elevation和translationZ实现阴影效果 这种方式需要在API 21才可以使用,具体代码实现片段如下: <Tex ...
- android 表格控件 滚动条,tkinter给表格控件(treeview)添加滚动条
# 定义列名集合 self.columns = ["Sno", "Name", "Score1", "Score2"] ...
- 登入系统后加载ActiveX控件已被阻止的解决方法
在登入系统之后,系统会自动加载控件,所以浏览器安全级别太高的话是无法加载的,所以要对浏览器进行设置,下面是在加载控件时经常出现的错误,如下图. ActiveX控件已被阻止 交互不安全的提示 浏览 ...
- Telerik控件2022版,到端测试自动化工具
Telerik控件2022版,到端测试自动化工具 Telerik Test Studio 是用于 Web 和桌面应用程序的端到端测试自动化工具,支持功能性 UI.RESTful API 和负载/性能测 ...
- KFC宅急送点餐系统开发 MFC动态树形控件使用
本文写于该系统开发完成后的第二年,那时候博主大2,有一门名为<程序设计方法学>的课程,老师上课很幽默风趣,也经常给我们带来一些时事新闻.当然,课余也会给我们布置一些作业.其中"K ...
- Win8系统下VS2012添加MSComm控件
1.下载MSCOMM32.OCX MSCOMM.SRG MSCOMM32.DEP三个文件 下载地址:http://blog.chinaunix.net/uid-21658993-id-30 ...
最新文章
- PHP生成PDF完美支持中文,解决TCPDF乱码
- tesseract 4.0 编译安装(CentOS)
- 2.1、spring属性注入-Set方法注入
- 【直播课】6小时教你熟知Anchor free理论基础,掌握项目实战技巧
- 转载:【OpenCV入门教程之五】 分离颜色通道多通道图像混合
- 人工智能过于发达可能将后患无穷
- python截图拼接_Python实现屏幕截图有两种方式 - 小众知识
- 如何打造高质量的SSP广告引擎(内部干货分享)
- Infragistics NetAdvantage UltraGrid的使用
- linux中使用egrep取值ip地址,egrep命令_Linux egrep 命令用法详解:在文件内查找指定的字符串...
- 2018最新Web前端经典面试试题及答案
- Studio系列教程来啦
- div+css强制(不)换行 .
- 移动app抓包工具——fiddler抓包指南
- 目标目录非空,而且似乎未包含以前编译的应用程序。请手动删除它,或选择其他目标目录...
- 日本人布置工作至少说5遍
- c语言课程设计家谱管理系统,数据结构-家谱管理系统
- 修改系统时区 /etc/localtime
- Paper intensive reading (六):Altered Interactions between the GM and Colonic Mucosa Precede Polyposis
- 如何设计一个项目的数据库
热门文章
- stl swap函数_vector :: swap()函数以及C ++ STL中的示例
- linux内核设计与实现---从内核出发
- 远控免杀专题(22)-SpookFlare免杀
- 干涉测量技术的应用_技术分享 | 石化行业测量仪表应用在线答疑
- uva 10710——Chinese Shuffle
- linux之父子进程的输出
- 二叉树题目----6 二叉树的最近公共祖先 AND 二叉树搜索树转换成排序双向链表
- SQL Server【三】连接查询
- linux syslog服务器配置,自动发日志到另一台日志服务器
- volatile、const的用法