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 相关文章推荐
轻量级 JS ToolTip提示效果
Jul 20 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
原生js实现日历效果
Mar 02 Javascript
JS实现canvas简单小画板功能
Jun 23 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 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 include加载文件两种方式效率比较
2010/08/08 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
php验证手机号码
2015/11/11 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
session 加入redis的实现代码
2016/07/15 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
form自动提交实例讲解
2017/07/10 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Pycharm更换python解释器的方法
2018/10/29 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
泰国第一在线超市:Tops
2021/02/13 全球购物
厨师岗位职责
2013/11/12 职场文书
计算机毕业大学生推荐信
2013/12/01 职场文书
职业生涯规划书基本格式
2014/01/06 职场文书
调解员先进事迹材料
2014/02/07 职场文书
大学军训感言600字
2014/02/25 职场文书
六五普法规划实施方案
2014/03/21 职场文书
医学求职信
2014/05/28 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
开网店计划分析
2019/07/30 职场文书
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技