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 表单的友好用户体现
Jan 07 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
JS canvas绘制五子棋的棋盘
May 28 Javascript
微信小程序云开发之使用云函数
May 17 Javascript
vue实现简单学生信息管理
May 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 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
php像数组一样存取和修改字符串字符
2014/03/21 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
PHP微信支付开发实例
2016/06/22 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
详细介绍Python语言中的按位运算符
2013/11/26 Python
python求斐波那契数列示例分享
2014/02/14 Python
Python中生成器和yield语句的用法详解
2015/04/17 Python
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
单链表反转python实现代码示例
2018/02/08 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
长青弘远的面试题
2012/06/09 面试题
英语专业学子个人的自我评价
2013/10/02 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
授权委托书怎么写
2014/09/25 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
2015年新教师工作总结
2015/04/28 职场文书
离职证明范本
2015/06/12 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
Ajax实现三级联动效果
2021/10/05 Javascript
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL
Hive HQL支持2种查询语句风格
2022/06/25 数据库