HTML5技术

iosselect:一个js picker项目,在H5中实现IOS的select下拉框效果 - mufc-go

字号+ 作者:H5之家 来源:H5之家 2017-01-01 10:02 我要评论( )

具体文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的picker,安卓下各浏览器展示各异,我们需要一个picker组件来统一各端下各种浏览器的展示。 iosselect是在webapp下

    

    具体文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect

 

    移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的picker,安卓下各浏览器展示各异,我们需要一个picker组件来统一各端下各种浏览器的展示。

    iosselect是在webapp下的一个picker组件,可以轻松实现各类选择器效果。比如地区选择 时间选择 日期选择等。

    下面是一个地址选择器demo截图,可以访问:

    

    可以查看demo:

    地址选择器

    时间选择器

    

    iosselect接口丰富,适用于多类场景

    可以定制依赖关系,规定各层级之间是否有关联。

    可以定制选择层级,支持1-5层选择。

    可以定制各项高度,可以规定展示项数,默认展示7项。

    移动端rem应用普遍,无论你是px还是rem,使用iosselect都完全不是问题。

    可以提供静态数据,也可以使用方法获取数据,支持同步方法和异步方法。

    iosselect基于iscroll5开发,除此外无任何依赖,所以无论你是react还是angular还是vue还是zepto jquey都不是问题。

    

new IosSelect(level, data, options) level: 级联等级,支持1,2,3,4,5 必选项 data: [oneLevelArray[, twoLevelArray[, threeLevelArray, [fourLevelArray, [fiveLevelArray]]]]] 除了用数组,也可以用方法 options: container: 组件的父元素,传入css3选择器,比如'.a' 或 '#a'之类的 callback: 选择完毕后的回调函数 必选 title: 选择框title 可选,没有此参数则不显示title itemHeight: 每一项的高度,可选,默认 35 headerHeight: 组件标题栏高度 可选,默认 44 cssUnit: css单位,目前支持px和rem,默认为px addClassName: 组件额外类名 可选,用于自定义样式 relation: [1, 1, 0, 0]: [第一二级是否关联,第二三级是否关联,第三四级是否关联,第四五级是否关联] ,默认不关联,即默认是[0, 0, 0, 0] oneLevelId: 第一级选中id 可选 twoLevelId: 第二级选中id 可选 threeLevelId: 第三级选中id 可选 fourLevelId: 第四级选中id 可选 fiveLevelId: 第五级选中id 可选 showLoading: 如果你的数据是异步加载的,可以使用该参数设置为true,下拉菜单会有加载中的效果 itemShowCount: 组件展示选项数目 可以为3,5,7,9 默认为7

  

    API丰富:

    

    原生JS实现适用于所有框架:

    

    

    具体文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect

 

 

标签: js picker, picker, 地址选择, 时间选择, 日期选择, datepicker, addresspicker, timepicker

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 如何一步一步用DDD设计一个电商网站(九)—— 小心陷入值对象持久化的坑 - Zachary_Fan

    如何一步一步用DDD设计一个电商网站(九)—— 小心陷入值对象持久化

    2016-12-27 13:06

  • 第一个随笔,调试中,用的CSS3 - TheWinds

    第一个随笔,调试中,用的CSS3 - TheWinds

    2016-12-17 12:01

  • 如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成 - Zachary_Fan

    如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成 - Zacha

    2016-12-14 13:01

  • 程序员的又一春,微信小程序带来的一个赚钱机遇 - 腾讯攻城师lee

    程序员的又一春,微信小程序带来的一个赚钱机遇 - 腾讯攻城师lee

    2016-12-14 10:01

网友点评
"