哪里有做企业网站的,清丰网站建设价格,广西建设厅网站专家申请表,做网站要交钱吗昨天研究了一下系统滚动条#xff0c;准备使用它来实现一个NumericUpDown控件#xff0c;因为它可以带来最正宗的微调按钮外观#xff0c;并说了一下可以使用viewport里的onScroll事件来获取系统滚动条的上下点击动作。 同时昨天还说了onScroll事件的一个问题是#xf… 昨天研究了一下系统滚动条准备使用它来实现一个NumericUpDown控件因为它可以带来最正宗的微调按钮外观并说了一下可以使用viewport里的onScroll事件来获取系统滚动条的上下点击动作。 同时昨天还说了onScroll事件的一个问题是在点击了滚动条的上下按钮后onScroll事件会被连续的触发n次(n取[1,4])。我们发现这些连续事件都在一个很小的timespan里触发的也就在12ms以内。于是我们在onScroll事件中使用setTimeout来启动一次有意义的数值变化代码如下分支false用来判断点击的方向。 if ( NumericUpDown.ScrollBegin 0 ){ 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 typehidden来实现DIV的overflow-y设为scrollSPAN用来显示当前的数值INPUT typehidden用来存放控件当前的数值。 div tabindex0 Step1 Precision0 onscrollNumericUpDown.DoScroll(this) stylecursor: default; border: solid 1px red; overflow-y: scroll; width: 50; height: expression(this.all.tags(SPAN)[0].offsetHeight); span styledisplay: block; white-space: nowrap; text-indent: 2;1spaninput typehidden idHidden1 value1 /div 初始化控件的时候再动态添加两个SPAN分别到默认SPAN的两端这是因为滚动条如果处在任何一个顶端(top或bottom)是不会触发onScroll事件的也就是说要把默认那个SPAN放到DIV的正中间前后在分别有一个SPAN。 elmt.Current elmt.Input.value; 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代码为 script languagejavascriptscript 由于在这个页面上注入代码太麻烦了就把demo放到这里了。虽然这个NumericUpDown自然的就可以支持键盘Up Down和PageUp PageDown可是最后一个问题却真的没有招了以至于我最终只能放弃这个尝试了。看看demo框里的数字有些抖动是吧这是系统的默认行为而且点击的越快抖的也越快真的没有办法了。 所以完成了也只能叫做Unusable版... 本文转自博客园鸟食轩的博客原文链接http://www.cnblogs.com/birdshome/如需转载请自行联系原博主。
