JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器


Posted in Javascript onOctober 30, 2016

手机端网页版app在使用下拉列表时,传统的下拉列表使用起来体验非常不好,一般做的稍好一点的交互功能界面都不会直接使用下拉列表,所以app的原生下拉列表都是弹窗列表选择,网页型app从使用体验上来当然也应该做成那样,前段时间在开发网页版app时就遇到这种需求,不仅是日期选择器,数据列表、变量列表选择等等下拉列表型需求都需要,网上找来找去只找到一款比较好的mobiscroll,不过下载比较麻烦,感觉比较奇怪的是jquery.mobile、jeasyui.mobile都没有提供这种控件,不知道为什么?虽然我不是专做前端开发,不过几乎全能型的我觉的不难开发吧,在家熬了一夜试了几种方法终于找到一种几乎完美的方法!在后来的使用中不断完善,现在公开提供给广大程序员。

先看看效果图:

JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器

由于这控件的滚动是使用div原生滚动方法,触摸屏使用时可以有惯性滚动效果,也实现了鼠标可以操作,不过没有实现惯性滚动效果。由于此控件主要是面向触摸屏的,所以嘛触摸屏完美就好了,我也懒的弄鼠标版的特效了。此控件已封装成jquery插件,没有边框,100%宽,使用很方便,比如套入弹窗后就是上图效果。

代码使用方法如下:

$("#scrollbox").EasyScrollBox({
fontSize: 32,
fontFamily: '',
color: '#000',
lineHeight: 1.5,
spaceRows: 2,
value: '4',
data: data1,
textFiled: 'txt',
valueFiled: 'id',
onSelected: function (index, value) {
$("#Text1").val(value);
}
});

使用弹窗完整的使用方法代码如下,效果就是上图的样子:

<!-- ui-dialog -->
<div id="dialog" class="easyui-dialog" style="padding:20px 6px;width:80%;" data-options="inline:true,modal:true,closed:true,title:'设置数值'">
<div id="scrollbox"></div>
<div class="dialog-button">
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%;height:35px" onclick="$('#dialog').dialog('close')">确 定</a>
</div>
</div>
<script type="text/javascript">
$(function () {
//对象型数据
var data = [];
for (var i = 0; i < 100; i++) {
var m = {};
m.id = i;
m.txt = "数据" + i;
data.push(m);
}
$("#dialog").dialog();
// Link to open the dialog
$("#dialog-link").click(function (event) {
$("#dialog").dialog("open").dialog('center');
//重新赋值
$("#scrollbox").EasyScrollBox({
fontSize: 32,
fontFamily: '',
color: '#000',
lineHeight: 1.5,
spaceRows: 2,
value: '4',
data: data,
textFiled: 'txt',
valueFiled: 'id',
onSelected: function (index, value) {
$("#Text1").val(value.id);
}
});
event.preventDefault();
});
});
</script>

也可以这么用:

//字符串数据
var data1 = [];
for (var i = 0; i < 100; i++) {
data1.push(i);
}
$("#scrollbox").EasyScrollBox({
fontSize: 32,
fontFamily: '',
color: '#000',
lineHeight: 1.5,
spaceRows: 2,
value: '4',
data: data1,
onSelected: function (index, value) {
$("#Text1").val(value);
}
});
$("#dialog-link1").click(function (event) {
$("#dialog").dialog("open").dialog('center');
event.preventDefault();
});

 如果想要一点三维效果,直接加样式即可:

JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器

#cover_top_EasyScrollBox{
background: -ms-linear-gradient(top, #000000, #ccc); /* IE 10 */
background:-moz-linear-gradient(top,#000000,#ccc);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#000000), to(#ccc));/*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#ccc)); /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #000000, #ccc); /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #000000, #ccc); /*Opera 11.10+*/
}
#cover_bottom_EasyScrollBox{
background: -ms-linear-gradient(top, #ccc, #000000); /* IE 10 */
background:-moz-linear-gradient(top,#ccc,#0000ff);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#ccc), to(#000000));/*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#000000)); /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #ccc, #000000); /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #ccc, #000000); /*Opera 11.10+*/
}

以上所述是小编给大家介绍的js开发触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
JavaScript this使用方法图解
Feb 04 Javascript
解决Vue项目中tff报错的问题
Oct 21 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
js模式化窗口问题![window.dialogArguments]
Oct 30 #Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 #Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 #Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 #Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 #Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 #Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 #Javascript
You might like
PHP正确配置mysql(apache环境)
2011/08/28 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
php实现购物车功能(下)
2016/01/05 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
javascript打印输出json实例
2013/11/11 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
JS代码实现电脑配置检测功能
2018/03/21 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
python中logging包的使用总结
2018/02/28 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
Python while循环使用else语句代码实例
2020/02/07 Python
python简单的三元一次方程求解实例
2020/04/02 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
英国电器零售商:PRC Direct
2018/06/21 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
中医专业职业生涯规划书范文
2014/01/04 职场文书
开工仪式主持词
2014/03/20 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
离职感谢信怎么写
2015/01/22 职场文书
小学六一主持词开场白
2015/05/28 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python
vue+echarts实现多条折线图
2022/03/21 Vue.js