AlloyTouch之select选择插件
写在前面
很多情况下,产品希望统一安卓和IOS select交互和样式。但是众所周知,IOS和安卓的select唤起的选择界面并不是样的,甚至IOS不同系统版本以及安卓不同系统版本下的select唤起的界面也不是相同的。而且省市区多选的需求,不管是IOS和安卓都没有提供原生界面的支持。所以唯一的办法就是web去模拟select唤起界面。
如上图所以,中间的区域是支持触摸运动。什么触摸运动?AlloyTouch不就是专门干这个的吗!
但是需要停在某个日期上!什么需要停在某个日期上?AlloyTouch不是可以配置step的吗!
所有问题迎刃而解~
在线演示
http://alloyteam.github.io/AlloyTouch/select/simple/
插件使用
先引用依赖的JS和CSS文件。
<link rel="stylesheet" href="select.css" />
<script src="../../transformjs/transform.js"></script>
<script src="../../alloy_touch.js"></script>
<script src="../../alloy_touch.select.js"></script>
然后:
new AlloyTouch.Select({
options: [
{ value: "all", text: "累计" },
{ value: "2015-9", text: "2015年9月" },
{ value: "2015-8", text: "2015年8月" },
{ value: "2015-7", text: "2015年7月" },
{ value: "2015-6", text: "2015年6月" },
{ value: "2015-5", text: "2015年5月" },
{ value: "2015-4", text: "2015年4月" },
{ value: "2015-3", text: "2015年3月" },
{ value: "2015-2", text: "2015年2月" },
{ value: "2015-1", text: "2015年1月" },
{ value: "2014-12", text: "2014年12月" },
{ value: "2014-11", text: "2014年11月" },
{ value: "2014-10", text: "2014年10月" }
],
selectedIndex: 3,
change: function (item, index) {
},
complete: function (item, index) {
}
})
- options是所有项的集合
- selectedIndex是初始选中项的索引
- change是改变的回调
- complete是点击完成按钮的回调
核心原理
Transform(scroll);
new AlloyTouch({
touch: container,
target: scroll,
initialValue: selectedIndex * -1 * step,
property: "translateY",
min: (len - 1) * -30,
max: 0,
step: step
});
- container是触摸的区域
- scroll就是滚动的对象
- step就是每一个日期的高度
- initialValue是初始的位置,会根据当前的索引selectedIndex乘以step计算出位置
通过上面的配置,scroll最终都会被校正到step的整数倍,小于min会回弹,大于max也会回弹。
总结
可以看到,AlloyTouch很擅长处理触摸运动。当然上面只是一个简单的例子,这仅仅是一个开始!
后续还会给大家带来:
- AlloyTouch无限循环select实战
- AlloyTouch多项级联select实战
- AlloyTouch实现3D效果select实战
Github
https://github.com/AlloyTeam/AlloyTouch
你要触摸的一切都在这里。
AlloyTouch之select选择插件的更多相关文章
- 纯原生js移动端城市选择插件
接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...
- sencha touch 带本地搜索功能的selectfield(选择插件)
带本地搜索功能的选择插件,效果图: 在使用selectfield的过程中,数据过大时,数据加载缓慢,没有模糊查询用户体验也不好, 在selectfield的基础上上稍作修改而成,使用方式同select ...
- #Plugin 中国省市选择插件
中国省市选择插件 ChineseCities 1.原生JS,不依赖jquery,zepto 2.前端学习交流群:814798690 源码查看 点击下载 https://github.com/chao ...
- 【jquery】多日期选择插件easyui date
1.本次介绍一个好用的 多日期选择插件:EasyUI date,适用于:需要一次性选择多个日期,无需手动一个一个进行添加. 2.效果图: 3.下载地址:http://www.jeasyui.com/d ...
- Chosen:Select 选择框的华丽变身
HTML Form 表单里的各种组件,例如文本输入框,textarea,按钮等,都可以通过CSS或其它技术进行美化,让它们看起来很漂亮了,唯独下拉列表选项框(select box),不管你怎么做,它摆 ...
- 移动端城市选择JavaScript插件(基于WG的城市选择插件的修改版本)
周末的时候趁着一次机会,拿WG(博客)开发的城市选择插件改了一个移动端可以直接用的城市选择插件. 原版插件是基于原声JavaScript写的,在此先感谢作者. 我做的只是依照肯德基注册会员的页面的交互 ...
- Notes: select选择框
HTML选择框通过select标签创建,该元素是HTMLSelectElement的实例,拥有以下属性和方法: selectedIndex:选中项的索引 options:选择框的所有选项 add:向选 ...
- jQuery取得select选择的文本与值
jquery获取select选择的文本与值获取select :获取select 选中的 text :$("#ddlregtype").find("option:selec ...
- select 选择的制作
我说的select选择是指 手机端的话,一般考虑元素 + 伪类制作 .checkbox{ border:1px solid #987;width:16px;height:16px; } .checkb ...
随机推荐
- asp.net实现断点续传
C# 断点续传原理与实现 在了解HTTP断点续传的原理之前,让我们先来了解一下HTTP协议,HTTP协议是 一种基于tcp的简单协议,分为请求和回复两种.请求协议是由 客户机(浏览器)向服务器(WEB ...
- MVC+Repository+UOW+EntityFrmeWork的使用
1.首先创建一个空的MVC3应用程序,命名为MyRepository.Web,解决方案命名为MyRepository. 2.添加一个类库项目,命名为MyRepository.DAL,添加一个文件夹命名 ...
- 设置git账号并生成新的ssh(切换电脑用户之后)
1.设置账号 2.设置邮箱 3.检查确认 4. 5.check-----成功~
- UVa 10911 - Forming Quiz Teams
题目大意:给出2*n个点,将这些点配成n对,使得所有点对中两点的距离之和尽量小. 用一个整数的二进制形式表示一个集合的子集,以每个集合为状态进行状态转移.具体参见<算法竞赛入门经典>9.5 ...
- Django中的许可(Permissions)和用户组(Group)
Reference: http://www.cnblogs.com/esperyong/archive/2012/12/20/2826690.html 接着上面的3篇讨论文章,我们阐述了Django中 ...
- Myeclipse SVN 修改用户名和密码
转自:http://blog.csdn.net/chow__zh/article/details/7731497 解决方案: 在Eclipse使用SVN的过程中大多数人往往习惯把访问SVN的用户名密码 ...
- java系列--并发
1.Executor 原博:http://blog.csdn.net/linghu_java/article/details/17123057 2.CountDownLatch()方法 浅析Java中 ...
- 笔记整理--socket_server
epoll精髓 - 彭帅 - 博客园 - Google Chrome (2013/10/11 20:47:52) epoll精髓 在linux的网络编程中,很长的时间都在使用select来做事件触发. ...
- PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
CSV大文件的读取已经在前面讲述过了(PHP按行读取.处理较大CSV文件的代码实例),但是如何快速完整的操作大文件仍然还存在一些问题. 1.如何快速获取CSV大文件的总行数? 办法一:直接获取文件内容 ...
- Object.create() 实现
if (typeof Object.create !== 'function') { Object.create = function (o) { function F() {} F.prototyp ...