js层级选择框样式_mobile-picker

简介

该项目为文章《一步步打造一个支持异步加载数据的移动端选择器》的实现源码，目的是提供一种实现移动端支持异步加载数据的选择的思路。

这是一个为移动端web应用提供的仿iOS选择器的工具，使用简单，配置灵活，可以适用于多种场景。主要有以下的特点：

(1)支持多层级选择器

(2)提供多个操作接口，应对不同的需求

(3)支持样式自定义配置以及其他多个参数的配置

(4)支持异步加载数据,并动态改变picker

(5)兼容AMD和CMD规范

使用方法

引入样式文件和js文件，如：

传入参数，实例化一个picker

实例方法为 new Picker(options) ,一个最简单的例子如下：

var fruit = ['苹果','香蕉','火龙果','芒果','百香果'];

new Picker({

target: 'fruit',

data: fruit

});

其中，target为触发picker显示的目标元素，值为元素的id或者dom元素，data为需要实例化供选择的数据集合。

以上代码执行结果如下图所示：

参数说明

参数名称

参数类型

默认值

是否必须

参数说明

target

HTMLElement

String

无

是

data

Array: [String

Object]

[]

是

textKey

String

'value'

否

用于显示列表的键名，当data数组元素为字符串时不起作用，当为对象时将取对象对应的键的值进行显示

value

String

Array

[]

否

valueKey

String

'value'

否

默认值的键名，当传入value时，如果data中项目类型为对象，将会按照该键比对，实例化时默认选中对应的值

childKey

String

'child'

否

子级集合的键名，当data中某一项含有该键名的数组，将生成下一级选择，如data= [{text: '广州市','child':[{text:'荔湾区'},{text:'天河区'}]}]

autoFill

Boolean

true

否

是否自动填充结果，当target为input和textarea元素时，以value填充，其他文本元素以innerText填充

className

String

无

否

picker最外层容器附加的class名称，可用于重写样式

lock

Boolean

false

否

是否锁定picker，当picker锁定时确认选择将不会执行，这在异步请求等待数据时可以用上，防止数据不完整

confirm

Function(value,result)

无

否

确定选择后的回调函数，接收两个参数，value为选择器文本拼接后的结果，默认用于填充元素，result为选择的原始数据出去子级列表后的集合,如[{text:'广州市'}，{text: '天河区'}]

cancel

Function

无

否

取消选择后的回调函数

select

Function(scrollIndex,result,index,haschild)

无

否

执行某个层级的选择时回调函数，接收参数分别为：当前所在的层级(从0计数)，当前已选择的结果，当前层级数据集合选中的索引值，是否有子级数据集合，详细见后面例子

initCallback

Function(value, result)

无

否

选择器初始化后的回调函数，接收两个参数，value为选择器文本拼接后的结果，默认用于填充元素，result为选择的原始数据出去子级列表后的集合,如[{text:'广州市'}，{text: '天河区'}]

方法列表

实例化后，通过Picker实例可以访问和修改该实例的属性和调用实例的方法。

主要有以下方法： 假设 var picker = new Picker({...})

(1)show : 触发显示picker，实例化时参数中target绑定的touchstart事件就是调用了该方法从而显示picker，可以在需要的时候通过 picker.show()进行显示

(2) hide : 与show相反，触发picker隐藏，实例中的cancel按钮就调用了该方法，可以通过picker.hide()进行隐藏

(3) setLock(Boolean): 锁定或者解锁picker，其中传入true为锁定，锁定后点击确认按钮不做任何回调,这在异步请求数据有