JS触摸屏网页版模仿应用弹出滚动列表选择器/日期选择器

使用下拉列表时，传统的下拉列表体验非常不好。一般来说，下拉列表不会直接用于稍微好一点的交互界面。所以app原来的下拉列表是一个弹出列表选择，从使用体验来看，基于web的app肯定应该是那样做的。前段时间在开发基于web的app时就遇到了这个需求，不仅仅是日期选择器、Data列表、变量列表选择等下拉列表需求都需要。在网上找来找去，只能找到一个好的mobiscroll，但是下载起来比较麻烦。感觉很奇怪jquery.mobile和jeasyui.mobile没有提供这样的控件。我不知道为什么。虽然我不擅长前端开发，但我认为开发起来并不难。在家里呆了一晚上，尝试了好几种方法，终于找到了一个近乎完美的方法！在后来的使用中不断改进，现在对广大程序员开放。

先看效果图：

由于该控件的滚动使用div原生滚动方式，使用时触摸屏可以有惯性滚动效果，鼠标可以操作，但没有实现惯性滚动效果。因为这个控件主要是针对触摸屏的，如果触摸屏完美就好了，我也懒得去弄鼠标版的特效。这个控件已经打包成jquery插件了，没有边框，100%宽，使用起来非常方便。例如，弹出窗口就是上面显示的效果。

代码使用如下：

$('#scrollbox ')。easysscrollbox({ font size : 32，fontFamily: ' '，color: '#000 '，lineHeight: 1.5，spaceRows: 2，value: '4 '，data: data1，textFiled: 'txt '，valueFiled: 'id '，onSelected:函数(索引，值){$('#Text1 ')。val(值)；}});使用弹出窗口的完整使用代码如下，效果如上图：

！-ui-dialog-div id=' dialog ' class=' easy ui-dialog ' style=' padd :20 px 6px；宽度：80%；”data-options='inline:true，modal:true，closed:true，Title: '设置数值' ' div ID=' scrolbox '/div class=' dialog-button ' a href=' JavaScript : void(0)' class=' easui-link button ' style=' width :100 '；height :35 px ' onclick=' $(' # dialog ')。对话框(' close')' confirm/a/div/div脚本类型=' text/JavaScript ' $(function(){//object data var data=[]；for(var I=0；i 100I){ var m={ }；m . id=I；m . txt=' data ' I；data . push(m)；}$('#dialog ')。dialog()；//链接打开对话框$('#dialog-link ')。单击(函数(事件){$('#dialog ')。对话框(“打开”)。对话框(“中心”)；//重新分配$ ('# scrollbox ')。Easy scrollbox ({fontsize : 32，fontfamily : ' '，color :' # 000 '，行高： 1.5，spacerows 3360 2，value :' 4 '，data: data，textFiled: 'txt '，valueFiled: 'id '，onSelected: function (index，value) {$('#Text1 ')。val(value . id)；}});event . preventdefault()；});});/script也可以这样使用：

//字符串数据var data 1=[]；for(var I=0；i 100I){ data 1 . push(I)；}$('#scrollbox ')。easysscrollbox({ font size : 32，fontFamily: ' '，color: '#000 '，lineHeight: 1.5，spaceRows: 2，value: '4 '，data: data1，onSelected:函数(索引，值){$('#Text1 ')。val(值)；}});$('#dialog-link1 ')。单击(函数(事件){$('#dialog ')。对话框(“打开”)。对话框(“中心”)；event . preventdefault()；});如果你想要一点3D效果，只需添加样式：

# cover _ top _ easysscrollbox {背景：-ms-线性-渐变(顶部、#000000、# CCC)；/* IE 10 */背景：-moz-线性-渐变(顶部，#000000，# CCC)；/*火狐*/background :-web套件-渐变（线性，0% 0%,0% 100%,从(#000000)到(# CCC))；/*谷歌*/background :-web套件-渐变（线性，0% 0%,0% 100%,从(#000000)到(# CCC))；/* Safari 4-5，Chrome 1-9 */后台：-WebKit-线性-渐变(top，#000000，# CCC)；/* safari 5.1 Chrome 10 */背景：-o-线性渐变(顶部、#000000、# CCC)；/* Opera 11.10 */} # cover _ bottom _ easycolbox {背景：-ms-线性-渐变(top，#ccc，# 000000)；/* IE 10 */背景：-moz-线性-渐变(顶部，#ccc，# 0000 ff)；/*火狐*/background :-web套件-渐变（线性，0% 0%,0% 100%,从(#ccc)到(# 000000));/*谷歌*/background :-web套件-渐变（线性，0% 0%,0% 100%,从(#ccc)到(# 000000));/* Safari 4-5，Chrome 1-9 */后台：-WebKit-线性-渐变(top，#ccc，# 000000)；/* safari 5.1 Chrome 10 */背景：-o-线性-渐变(顶部，#ccc，# 000000)；/*Opera 11.10 */}以上所述是小编给大家介绍的射流研究…开发触摸屏网页版仿应用弹窗型滚动列表选择器/日期选择器，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对我们网站的支持！