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 相关文章推荐
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
javascript 计算两个整数的百分比值
Dec 26 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 Javascript
Echarts.js无法引入问题解决方案
Oct 30 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中对2个数组相加的函数
2011/06/24 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
15 个 JavaScript Web UI 库
2010/05/19 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
React优化子组件render的使用
2019/05/12 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
Vue中qs插件的使用详解
2020/02/07 Javascript
python实现端口转发器的方法
2015/03/13 Python
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
python 图像平移和旋转的实例
2019/01/10 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
python实现词法分析器
2019/01/31 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
pygame实现飞机大战
2020/03/11 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
python3实现飞机大战
2020/11/29 Python
Linux操作面试题
2015/02/11 面试题
经营目标管理责任书
2014/07/25 职场文书
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python