原生滑动选择器 html,自已开发完美的触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器 - j.king...
手机端网页版app在使用下拉列表时,传统的下拉列表使用起来体验非常不好,一般做的稍好一点的交互功能界面都不会直接使用下拉列表,所以app的原生下拉列表都是弹窗列表选择,网页型app从使用体验上来当然也应该做成那样,前段时间在开发网页版app时就遇到这种需求,不仅是日期选择器,数据列表、变量列表选择等等下拉列表型需求都需要,网上找来找去只找到一款比较好的mobiscroll,不过下载比较麻烦,感觉比较奇怪的是jquery.mobile、jeasyui.mobile都没有提供这种控件,不知道为什么?虽然我不是专做前端开发,不过几乎全能型的我觉的不难开发吧,在家熬了一夜试了几种方法终于找到一种几乎完美的方法!在后来的使用中不断完善,现在公开提供给广大程序员。先看看效果图:
由于这控件的滚动是使用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);
}
});
使用弹窗完整的使用方法代码如下,效果就是上图的样子:
确 定
$(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();
});
});
也可以这么用:
//字符串数据
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();
});
如果想要一点三维效果,直接加样式即可:
#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+*/
}
演示例子全代码文件:
原生滑动选择器 html,自已开发完美的触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器 - j.king...相关推荐
- 自已开发完美的触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
手机端网页版app在使用下拉列表时,传统的下拉列表使用起来体验非常不好,一般做的稍好一点的交互功能界面都不会直接使用下拉列表,所以app的原生下拉列表都是弹窗列表选择,网页型app从使用体验上来当然也 ...
- app四种开发模式区别,网页链接转app优缺点
网页链接转app优缺点 优点:开发和发布都比较方便,开发成本也低,可以做到app一年及以上不更新,页面随时可以更新. 缺点:需要手机网站反应速度要快,用好的服务器,否则打开会慢 ios免签封装: 免签 ...
- 仿抖音短视频APP源码Android轻松实现日期选择器、生日选择器、自定义起始时间
代码实现 代码实现比较简单 按照步骤 你也可以实现同样的效果 第一步 设置依赖 android 和androidX都可以 //时间选择器 implementation 'com.contrarywin ...
- HTML开发 完美解决移动端H5页面pop弹出蒙版后底层滑动问题
html 弹出蒙版后禁止底层滑动 在对应的最外层(蒙版父视图),添加css position: relative; 蒙版层使用 position: fixed; 然后点击弹出蒙版和关闭蒙版 调用下面的 ...
- Asp.Net Mvc基于Fleck开发的多人网页版即时聊天室
一.项目的核心说明 1.Fleck这个是实现websocket一个比较简单第三方组件,它不需要安装额外的容器.本身也就几个接口可供调用. 2.项目是基于.net framework 4.7.2 ,在v ...
- 用php开发扑克小游戏网页版,开发日记:KBEngine+Unity+php做个扑克小游戏(一)
下面给大家介绍的是使用KBEngine+Unity+php做的一个扑克小游戏,php 部分和unity 部分有经验的开发人员都能看明白 ,但对于KBEngine(简称kbe)可能有些人没接触过,但其实 ...
- java服务端开发支付宝支付接口,网页支付与app支付
s 前言 在开发的过程中,不可避免的都需要使用支付功能,本文档主要给大家分享,自己的一次支付宝开发时的经历.支付宝开发,对于个人开发者而言相对于其他支付来说相对比较友好,因为有沙箱环境支持我们在开发阶 ...
- Flutter开发之——日期选择器
一 概述 本文介绍Flutter中的日期选择组件: DayPicker:日期选择器 MonthPicker:月份选择器 YearPicker:年份选择器 showDatePicker:封装了YearP ...
- android 日期对话框,Android日期选择器对话框DatePickerDialog使用详解
调用Android原生日期选择器对话框就是DatePickerDialog,具体内容如下 在Android4.4系统上效果如图: 在Android5.0以上效果如图: 1.Activity的onCre ...
- js日期控件_11个开源的Github开源日期选择器组件,供你选择
介绍 本文主要介绍几个Vue的时间日期选择器组件,目的在于让开发者们多一些选择,不管是从功能还是从样式,都可以选择一个适合的组件,这些组件没有绝对的好与不好,就看个人如何选择了,以下分别介绍十一个日期 ...
最新文章
- SafeNet宣布推出其最小的圣天诺HASP硬件型软件保护锁
- 遗传算法的c++语言程,C++实现简单遗传算法
- c语言通讯录动态文件操作,学C三个月了,学了文件,用C语言写了个通讯录程序...
- Cilium架构:提供并透明地保护应用程序工作负载之间的网络连接和负载平衡
- exchange无法收发邮件_【知乎最详细】Windows邮件amp;日历UWP+QQ邮箱如何设置
- public protected default private权限修饰符理解
- C语言实例(六)创建各类三角形
- CuteFtp通用注册码
- 多目标跟踪算法 | FairMOT
- 微商怎么做大做强,教你一套做微商全新打法
- java kdj_KDJ 指标简单实现
- excel计算数据的差和的公式和方法、相关系数、绝对误差
- AS3中常用到的公式
- 秦小明 第七讲 资产定价模型,股票定价
- jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)
- Partition函数实现java(含分析)
- 经典算法——爬楼梯(解法归纳)(学习笔记)
- IMWebConf 2016总结
- PHP通过微信网页授权获取用户基本信息
- 微博话题下的数据爬取