js模拟ios联动插件iosselect

 查看演示  website  立即下载

我们以IOS下select的交互和样式为蓝本，开发了这一组件

先看效果：

特点

可以做到0依赖，只需引用一个js和css即可，样式可自己定制，也可使用默认样式

文件说明

1. src-iosselect基于iscroll5开发，在这个文件夹下可以看到iscroll.js,iosselect.js,iosselect.css，如果项目里有单独使用iscroll5,可以使用这个版本

2. merge-合并了iscroll与iosselect,做到组件0依赖，方便开发

3. demo-使用demo,说明如下：

4. one-一级下拉菜单，以银行选择为实例

5. two-二级下拉菜单，相互独立，没有关联，以三国杀组合选将为例

6. three-三级下拉菜单，省市区选择三级联动

7. rem-手机端部分解决方案会使用viewport缩放，这个时候我们需要添加一些样式，页面在缩放的情况下正常显示

使用说明

API

new IosSelect(level, data, options)

level: 选择的层级 1 2 3 最多支持3层

data: [oneLevelArray[, twoLevelArray[, threeLevelArray]]]

options:

     callback: 选择完毕后的回调函数 必选

     title: 选择框title  可选，没有此参数则不显示title

     itemHeight: 每一项的高度，可选，默认 35px

     headerHeight: 组件标题栏高度 可选，默认 44px

     addClassName: 组件额外类名 可选，用于自定义样式

     oneTwoRelation: 第一列和第二列是否通过parentId关联 可选，默认不关联

     twoThreeRelation: 第二列和第三列是否通过parentId关联 可选，默认不关联

     oneLevelId: 第一级选中id 可选

     twoLevelId: 第二级选中id 可选

     threeLevelId: 第三级选中id 可选

参数说明

level: 级联等级，支持1,2,3 必选项

data: 数组，前三项分别对应级联1,2,3项，每一项又是一个数组，如果是一级下拉菜单，data长度为1

每一项数组中包含一系列对象，每个对象必须要有id,作为该条数据在该项数组中的唯一标识，parentId是可选属性，作为关联的标志

options.callback(selectOneObj[[, selectTwoObj], selectThreeObj]) 每个级联选中项，包含对应数据的所有字段及dom对象

以地址选择为例：

data为三个数组：

// 省份列表
var iosProvinces = [{
	'id': '130000',
	'value': '河北省',
	'parentId': '0'
}];
// 城市列表
var iosCitys = [{
	"id": "130100",
	"value": "石家庄市",
	"parentId": "130000"
}];
// 区县列表
var iosCountys = [{
	"id": "130102",
	"value": "长安区",
	"parentId": "130100"
}];实例化：
var iosSelect = new IosSelect(3, [iosProvinces, iosCitys, iosCountys], {
	title: '地址选择',
	itemHeight: 35,
	oneTwoRelation: 1,
	twoThreeRelation: 1,
	oneLevelId: oneLevelId,
	twoLevelId: twoLevelId,
	threeLevelId: threeLevelId,
	callback: function(selectOneObj, selectTwoObj, selectThreeObj) {
		selectOneObj = {
			atindex: 26,
			dom: li.at,
			id: "510000",
			parentid: "0",
			value: "四川省"
		}
	}
});

PREVIOUS:
NEXT:
jQuery仿腾讯图片新闻组图幻灯
jQuery移动端大转盘