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+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 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
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
jquery validate使用攻略 第四步
2010/07/01 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
浅谈JS的原型和继承
2019/05/08 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
Python如何测试stdout输出
2020/08/10 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
应届大专毕业生个人自荐信
2013/09/22 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
社区务虚会发言材料
2014/10/20 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书