https://github.com/zhoushengmufc/iosselect/
iosselect是个什么东西?
移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的picker,安卓下各浏览器展示各异,我们需要一个选择器组件来统一各端下各种浏览器的展示。
特点
0依赖,只需引用一个js和css即可
样式可自己定制,也可使用默认样式
一个页面同时实例化多个组件
jquery zepto angular vue react均适用
支持最多6级级联
支持设置高度和高度单位
适用于android和iOS设备(PC端支持IE9+,不过PC端上滑动体验不太实用)
iosselect 项目地址:
文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect
iosselect能做什么?
移动端开发中,经常遇到选择器功能,常见的时间选择,日期选择,地区选择,单列选择。iosselect完美实现一个组件实现各种选择器的功能。
可做:
一级级联,例如银行选择
二级级联,例如三国杀将领组合选
三级级联,例如省市区选择
日期选择器 三级联动,通过方法获取数据,并且有加载中效果
日期时间选择器,共五级,通过方法获取数据
iosselect的优势
点击下载文件到项目目录中,在HTML文件中插入以下代码,并按需调整路径。
options
type: object
其余选项,含以下几个属性:
options.container
default: ‘’
type: string
实例化后的对象包裹元素,可选项
options.callback
default: undefined
type: function
选择完毕后的回调函数,必选项 options.callback(selectOneObj, selectTwoObj, selectThreeObj, selectFourObj, selectFiveObj, selectSixObj) selectNumberObj为每级对应选中项,包含对应数据的所有字段及dom对象
options.fallback
default: undefined
type: function
选择取消后的回调函数,可选项
options.maskCallback
default: undefined
type: function
点击背景层关闭组件时触发的方法,可选项
options.title
default: ‘’
type: string
显示标题,可选项
options.sureText
default: ‘确定’
type: string
设置确定按钮文字,可选项
options.closeText
default: ‘取消’
type: string
设置取消按钮文字,可选项
options.itemHeight
default: 35
type: number
每一项的高度,可选项
options.itemShowCount
default: 7
type: number
组件展示的项数,可选项,可选3,5,7,9,不过不是3,5,7,9则展示7项
options.headerHeight
default: 44
type: number
组件标题栏高度,可选项
options.cssUnit
default: ‘px’
type: string
元素css尺寸单位,可选项,可选px或者rem
options.addClassName
default: ‘’
type: string
组件额外类名,用于自定义样式,可选项
options.relation
default: [0, 0, 0, 0, 0]
type: …Array
[oneTwoRelation, twoThreeRelation, threeFourRelation, fourFiveRelation, fiveSixRelation] 可选项。如果数据是数组(非方法),各级选项之间通过parentId关联时,需要设置;如果是通过方法获取数据,不需要该参数。
options.relation.oneTwoRelation
default: 0
type: number
第一列和第二列是否通过parentId关联,可选项
options.relation.twoThreeRelation
default: 0
type: number
第二列和第三列是否通过parentId关联,可选项
options.relation.threeFourRelation
default: 0
type: number
第三列和第四列是否通过parentId关联,可选项
options.relation.fourFiveRelation
default: 0
type: number
第四列和第五列是否通过parentId关联,可选项
options.relation.fiveSixRelation
default: 0
type: number
第五列和第六列是否通过parentId关联,可选项
options.oneLevelId
type: string
实例展示时,第一级数据默认选中值,可选项,默认为第一级数据第一项id
options.twoLevelId
type: string
实例展示时,第二级数据默认选中值,可选项,默认为第二级数据第一项id
options.threeLevelId
type: string
实例展示时,第三级数据默认选中值,可选项,默认为第三级数据第一项id
options.fourLevelId
type: string
实例展示时,第四级数据默认选中值,可选项,默认为第四级数据第一项id
options.fiveLevelId
type: string
实例展示时,第五级数据默认选中值,可选项,默认为第五级数据第一项id
options.sixLevelId
type: string
实例展示时,第6级数据默认选中值,可选项,默认为第6级数据第一项id
options.showLoading
default: false
type: boolean
实例展示时,在数据加载之前下拉菜单是否显示加载中的效果,建议ajax获取数据时设置为true
options.showAnimate
default: false
type: boolean
是否显示入场动画和退场动画,如需自定义动画效果,请覆写.fadeInUp .layer和.fadeOutDown .layer的css3动画。PS:动画时间为0.5秒。