仿ios日期选择做的一个小插件(主分支依赖jquery,会抽时间制作纯原生代码分支)。
线上预览:https://jingjingke.github.io/scroll-select/
├── css
│ ├── _media.scss // 媒体查询(rem匹配)
│ ├── _common.scss // 随便写的通用样式
│ ├── _scrollSelect.scss // 滚动效果主体样式
│ ├── style.css // 生成css
│ └── style.scss // 样式入口
├── data
│ └── city.json // 省市区联动数据
├── js
│ ├── jquery.min.js // jquery依赖
│ └── scroll-select.js // 滚动效果js
├── index.html // 效果预览
├── README.md // readme
目前只能调用的方法:
scrollSelect.go()
方法中传入对象组,具体参数如下:
data //[json]只省市区才需要传入data
level //[number](必需)联动等级(目前有1、2、3级)
type //[str](必需)当前只支持省市区地址(address)和日期(calendar)
elArr //[str](必需)传入表单的选择器名如#div或.div,用于获取默认值以及确定后将值添入
el //[str]这个按需来传非表单选择器,用于将默认值以某种格式添入
(1)调用三级联动省市区选择,如果只需要省市则level改为2即可
$('.form_list1').on('click',function(){
$.getJSON("./data/city.json",function(result){
scrollSelect.go({
data:result,
level:3,
elArr:'.select1',
type:'address'
})
});
})
(2)调用日期格式
$('.form_list3').on('click',function(){
scrollSelect.go({
level:3,
elArr:'.input3',
type:'calendar'
})
})