系统滚动条实现的NUD控件Unusable版

昨天研究了一下系统滚动条,准备使用它来实现一个NumericUpDown控件,因为它可以带来最正宗的微调按钮外观emteeth.gif,并说了一下可以使用viewport里的onScroll事件来获取系统滚动条的上下点击动作。

    同时昨天还说了onScroll事件的一个问题是,在点击了滚动条的上下按钮后,onScroll事件会被连续的触发n次(n取[1,4])。我们发现这些连续事件都在一个很小的timespan里触发的,也就在12ms以内。于是我们在onScroll事件中使用setTimeout来启动一次有意义的数值变化,代码如下,分支false用来判断点击的方向。

None.gifif ( NumericUpDown.ScrollBegin == 0 )
None.gif{  
None.gif    NumericUpDown.ScrollBegin = new Date().getTime();
None.gif    NumericUpDown.ChangeNumeric.Element = elmt;
None.gif    window.setTimeout(NumericUpDown.ChangeNumeric, 12);
None.gif}
None.gifelse
None.gif{
None.gif    var time = new Date().getTime();
None.gif    if ( NumericUpDown.ScrollDirection == 0 )
None.gif    {
None.gif         var scrollOffset = NumericUpDown.ScrollTopValue - elmt.scrollTop;
None.gif         NumericUpDown.ScrollDirection = scrollOffset > 0 ? 1 : -1; 
None.gif         NumericUpDown.ScrollTopValue = elmt.scrollTop; 
None.gif    }
None.gif}

    控件使用一个DIV,一个SPAN和一个INPUT type='hidden'来实现,DIV的overflow-y设为scroll,SPAN用来显示当前的数值,INPUT type='hidden'用来存放控件当前的数值。

None.gif    <div tabindex="0" Step="1" Precision="0" onscroll="NumericUpDown.DoScroll(this)"
None.gif         style
="cursor: default; border: solid 1px red; overflow-y: scroll; width: 50;
None.gif         height: expression(this.all.tags('SPAN')[0].offsetHeight);"
>
None.gif         <span style="display: block; white-space: nowrap; text-indent: 2;">1span><input
None.gif             
type="hidden" id="Hidden1" value="1" />div>

    初始化控件的时候,再动态添加两个SPAN分别到默认SPAN的两端,这是因为滚动条如果处在任何一个顶端(top或bottom)是不会触发onScroll事件的,也就是说要把默认那个SPAN放到DIV的正中间,前后在分别有一个SPAN。
None.gif elmt.Current = elmt.Input.value;
None.gif var current = parseInt(elmt.Current);
None.gif var step = parseInt(elmt.Step);
None.gif var previousSpan = NumericUpDown.CreateSpan();
None.gif previousSpan.innerText = current - step;
None.gif var nextSpan = NumericUpDown.CreateSpan();
None.gif nextSpan.innerText = current + step;
None.gif var currentSpan = elmt.all.tags('SPAN')[0];
None.gif currentSpan.insertAdjacentElement('beforeBegin', previousSpan);
None.gif currentSpan.insertAdjacentElement('afterEnd', nextSpan);
None.gif NumericUpDown.ScrollTo.CurrentSpan = currentSpan;
None.gif window.setTimeout(NumericUpDown.ScrollTo, 1);        
None.gif elmt.IsInitialized = true;
    
    控件NumericUpDown代码为: 
ContractedBlock.gif<script language="javascript">dot.gifscript>
    
    由于在这个页面上注入代码太麻烦了,就把demo放到这里了。虽然这个NumericUpDown自然的就可以支持键盘Up & Down和PageUp & PageDown,可是最后一个问题却真的没有招了,以至于我最终只能放弃这个尝试了。看看demo,框里的数字有些抖动是吧?这是系统的默认行为,而且点击的越快,抖的也越快,真的没有办法了emsad.gif

    所以完成了也只能叫做Unusable版...


  本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/391770.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[习题].FindControl()方法 与 PlaceHolder控件 #2(动态加入「子控件」的事件)

这是我的文章备份&#xff0c;有空请到我的网站走走&#xff0c; http://www.dotblogs.com.tw/mis2000lab/ 才能掌握我提供的第一手信息&#xff0c;谢谢您。 http://www.dotblogs.com.tw/mis2000lab/archive/2011/07/26/placeholder_findcontrol_eventhandler.aspx [习题].Fi…

西雅图治安_数据科学家对西雅图住宿业务的分析

西雅图治安介绍 (Introduction) Airbnb provides an online platform for hosts to accommodate guests with short-term lodging. Guests can search for lodging using filters such as lodging type, dates, location, and price, and can search for specific types of hom…

【贪心】买卖股票的最佳时机含手续费

/** 贪心&#xff1a;每次选取更低的价格买入&#xff0c;遇到高于买入的价格就出售(此时不一定是最大收益)。* 使用buy表示买入股票的价格和手续费的和。遍历数组&#xff0c;如果后面的股票价格加上手续费* 小于buy&#xff0c;说明有更低的买入价格更新buy。如…

排序算法Java代码实现(二)—— 冒泡排序

本篇内容&#xff1a; 冒泡排序冒泡排序 算法思想&#xff1a; 冒泡排序的原理是&#xff1a;从左到右&#xff0c;相邻元素进行比较。 每次比较一轮&#xff0c;就会找到序列中最大的一个或最小的一个。这个数就会从序列的最右边冒出来。 代码实现&#xff1a; /*** */ packag…

创意产品 分析_使用联合分析来发展创意

创意产品 分析Advertising finds itself in a tenacious spot these days serving two masters: creativity and data.如今&#xff0c;广告业处于一个顽强的位置&#xff0c;服务于两个大师&#xff1a;创造力和数据。 On the one hand, it values creativity; and it’s not…

vue.js 安装

写 一个小小的安装步骤 踩坑过来的 点击.然后安装cnpm.再接着使用文章说明继续安装 # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project这时候一路空格 选项.当遇到第一个让你敲 Y/N 的时候 选择Y …

pandas之表格样式

在juoyter notebook中直接通过df输出DataFrame时&#xff0c;显示的样式为表格样式&#xff0c;通过sytle可对表格的样式做一些定制&#xff0c;类似excel的条件格式。 df pd.DataFrame(np.random.rand(5,4),columns[A,B,C,D]) s df.style print(s,type(s)) #<pandas.io.f…

多层感知机 深度神经网络_使用深度神经网络和合同感知损失的能源产量预测...

多层感知机 深度神经网络in collaboration with Hsu Chung Chuan, Lin Min Htoo, and Quah Jia Yong.与许忠传&#xff0c;林敏涛和华佳勇合作。 1. Introduction1.简介 Since the early 1990s, several countries, mostly in the European Union and North America, had sta…

蓝牙调试工具如何使用_使用此有价值的工具改进您的蓝牙项目:第2部分!

蓝牙调试工具如何使用This post is originally from www.jaredwolff.com. 这篇文章最初来自www.jaredwolff.com。 This is Part 2 of configuring your own Bluetooth Low Energy Service using a Nordic NRF52 series processor. If you haven’t seen Part 1 go back and ch…

使用Matplotlib Numpy Pandas构想泰坦尼克号高潮

Did you know, a novel predicted the Titanic sinking 14 years previously to the actual disaster???您知道吗&#xff0c;一本小说预言泰坦尼克号在14年前沉没到了真正的灾难中&#xff1f;&#xff1f;&#xff1f; In 1898 (14 years before the Titanic sank), Amer…

pca数学推导_PCA背后的统计和数学概念

pca数学推导As I promised in the previous article, Principal Component Analysis (PCA) with Scikit-learn, today, I’ll discuss the mathematics behind the principal component analysis by manually executing the algorithm using the powerful numpy and pandas lib…

红黑树分析

红黑树的性质&#xff1a; 性质1&#xff1a;每个节点要么是黑色&#xff0c;要么是红色。 性质2&#xff1a;根节点是黑色。性质3&#xff1a;每个叶子节点&#xff08;NIL&#xff09;是黑色。性质4&#xff1a;每个红色节点的两个子节点一定都是黑色。不能有两个红色节点相…

overlay 如何实现跨主机通信?- 每天5分钟玩转 Docker 容器技术(52)

上一节我们在 host1 中运行了容器 bbox1&#xff0c;今天将详细讨论 overlay 网络跨主机通信的原理。 在 host2 中运行容器 bbox2&#xff1a; bbox2 IP 为 10.0.0.3&#xff0c;可以直接 ping bbox1&#xff1a; 可见 overlay 网络中的容器可以直接通信&#xff0c;同时 docke…

Python:实现图片裁剪的两种方式——Pillow和OpenCV

原文&#xff1a;https://blog.csdn.net/hfutdog/article/details/82351549 在这篇文章里我们聊一下Python实现图片裁剪的两种方式&#xff0c;一种利用了Pillow&#xff0c;还有一种利用了OpenCV。两种方式都需要简单的几行代码&#xff0c;这可能也就是现在Python那么流行的原…

鼠标移动到ul图片会摆动_我们可以从摆动时序分析中学到的三件事

鼠标移动到ul图片会摆动An opportunity for a new kind of analysis of Major League Baseball data may be upon us soon. Here’s how we can prepare.不久之后&#xff0c;我们将有机会对美国职棒大联盟数据进行新的分析。 这是我们准备的方法。 It is tempting to think t…

回到网易后开源APM技术选型与实战

篇幅一&#xff1a;APM基础篇\\1、什么是APM?\\APM&#xff0c;全称&#xff1a;Application Performance Management &#xff0c;目前市面的系统基本都是参考Google的Dapper&#xff08;大规模分布式系统的跟踪系统&#xff09;来做的&#xff0c;翻译传送门《google的Dappe…

如何选择优化算法遗传算法_用遗传算法优化垃圾收集策略

如何选择优化算法遗传算法Genetic Algorithms are a family of optimisation techniques that loosely resemble evolutionary processes in nature. It may be a crude analogy, but if you squint your eyes, Darwin’s Natural Selection does roughly resemble an optimisa…

PullToRefreshListView中嵌套ViewPager滑动冲突的解决

PullToRefreshListView中嵌套ViewPager滑动冲突的解决 最近恰好遇到PullToRefreshListView中需要嵌套ViewPager的情况,ViewPager 作为头部添加到ListView中&#xff0c;发先ViewPager在滑动过程中流畅性太差几乎很难左右滑动。在网上也看了很多大神的介绍&#xff0c;看了ViewP…

神经网络 卷积神经网络_如何愚弄神经网络?

神经网络 卷积神经网络Imagine you’re in the year 2050 and you’re on your way to work in a self-driving car (probably). Suddenly, you realize your car is cruising at 100KMPH on a busy road after passing through a cross lane and you don’t know why.想象一下…

数据特征分析-分布分析

分布分析用于研究数据的分布特征&#xff0c;常用分析方法&#xff1a; 1、极差 2、频率分布 3、分组组距及组数 df pd.DataFrame({编码:[001,002,003,004,005,006,007,008,009,010,011,012,013,014,015],\小区:[A村,B村,C村,D村,E村,A村,B村,C村,D村,E村,A村,B村,C村,D村,E村…