MUI-picker（选择器），一级、二级联动、三级联动

mui框架扩展了pipcker组件,可用于弹出选择器,在各平台上都有统一表现.poppicker和dtpicker是对picker的具体实现

1、文件引用

poppicker组件依赖mui.picker.js/.css   mui.poppicker.js/.css

请务必在mui.js/css后中引用,也可统一引用 压缩版本:mui.picker.min.js

2、mui涉及到的方法如下：

new PopPicker(layer,buttons)	layer	Int	显示列数
	buttons	Type: Array	显示按钮 如：new mui.PopPicker({buttons:['cancle','ok']})
setData([data])	data	Type: Array	填充数据 如：picker.setData([{value:'zz',text:'智子'}])
setSelectedIndex(index[,duration,callback]）	index	Type: Number	指定列表选中项 如:picker.pickers[0].setSelectedIndex(4)
	duration	Type: Number	过渡效果持续时间( ms ) 如:picker.pickers[0].setSelectedIndex(4,200)
	callback	Type: Function	设置成功回调 如:picker.pickers[0].setSelectedIndex(4,200,function(){})
setSelectedIndex(value[,duration,callback]）	value	Type: String	指定列表选中项 如:picker.pickers[0].setSelectedValue('fourth')
	duration	Type: Number	渡效果持续时间( ms ) 如:picker.pickers[0].setSelectedValue('fourth',200)
	callback	Type: Function	设置成功回调 如:picker.pickers[0].setSelectedValue('fourth', 200, function(){})
getSelectedItems()		返回值[data] Type: Array	获取选中的项（数组） 如:picker.getSelectedItems()
show(getSelectedItems)		返回值:[data] Type: Array	获取选中的项（数组） 如:picker.show(function(getSelectedItems){     console.log(getSelectedItems) }) *return false; 可以阻止选择框的关闭
hide()			隐藏picker 如:picker.hide()
dispose()			释放组件资源(释放后将将不能再操作组件) 如:picker.dispose() * 通常情况下，不需要释放组件资源，初始化之后，可以一直使用。 * 当内容较多，如不释放组件资源，在某些设备上可能会卡顿。 * 所以每次用完便立即调用 dispose() 进行释放,下次用时再创建新实例。

对上述方法进行讲解：

1）通过new mui.PopPicker()初始化popPicker组件

var picker = new mui.PopPicker({
				layer: 1,
				buttons: ['cancle', 'ok']
});

2）通过setData() 给picker对象添加数据

picker.setData([{
				value: "first",
				text: "第一项"
			}, {
				value: "second",
				text: "第一项"
			},
            ......
]);

3）通过setSelectedIndex()和setSelectedValue()两个方法,设定指定层级的选中项

picker.pickers[0].setSelectedIndex(1);

4）通过show(getSelectedItems)显示picker

picker.show(function(selectItems) {
					//要实现的内容
});

5）实例：展示一级示例、二级联动、三级联动效果，如下：

 

 源码：

	
		
		
		
		
		
		
		
		
		
		
		
		
	

	
		

			
			
标题
		
		


			
一级示例
			一级选择示例 ...
			
二级示例
			二级选择联动 ...
			
三级示例
			三级选择联动 ...