AlloyTouch之select选择插件
2017-03-03 20:23
393 查看
写在前面
很多情况下,产品希望统一安卓和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月" }, 4000 { 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选择插件
- AlloyTouch之无限循环select插件
- AlloyTouch之无限循环select插件
- AlloyTouch之无限循环select插件
- sencha touch 带本地搜索功能的selectfield(选择插件)
- 2、jQuery插件之cxSelect城市选择(三级级联效果国际版和国内版)
- 【JQuery插件】Select选择框的华丽变身
- AlloyTouch全屏滚动插件搞定顺滑H5页
- JAreaSelect 超级强大的区域选择插件1.3发布了
- sencha touch Button Select(点击按钮进行选择)扩展
- 利用jQuery插件imgAreaSelect实现获得选择域的图像信息
- [jQueryUI] - Chosen:select下拉选择框美化插件及问题【转】
- [jQueryUI] - Chosen:select下拉选择框美化插件及问题
- jQuery插件实现select下拉框左右选择_交换内容(multiselect2side) 的一些网站 (有时间整理)
- [jQueryUI] - Chosen:select下拉选择框美化插件及问题
- sencha touch list 选择插件,可记忆已选项,可分组全选
- [置顶] 利用jquery mobiscroll插件选择日期、select、treeList的具体运用
- FancySelect – 更好用的 jQuery 下拉选择框插件
- Select-下拉列表选择插件(包含下拉选择图片,下拉grid等)
- [jQueryUI] - Chosen:select下拉选择框美化插件及问题