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代码优化 选择符篇
Nov 01 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
浅谈javascript中return语句
Jul 15 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
JavaScript中return用法示例
Nov 29 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
js常见遍历操作小结
Jun 06 Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 Javascript
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支持页面回退的两种方法[转]
2007/02/14 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
Prototype ObjectRange对象学习
2009/07/19 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
JavaScript模块详解
2017/12/18 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
神经网络理论基础及Python实现详解
2017/12/15 Python
对numpy中轴与维度的理解
2018/04/18 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
python中selenium库的基本使用详解
2020/07/31 Python
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
应用化学专业职业生涯规划书
2013/12/31 职场文书
《老山界》教学反思
2014/04/08 职场文书
新教师岗前培训方案
2014/06/05 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
邀请函怎么写
2015/01/30 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js