Skip to content

仿ios日期选择与省市区联动选择[master分支为JQ实现,js-dev分支为原生JS实现]

Notifications You must be signed in to change notification settings

jingjingke/scroll-select

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

scroll-select

仿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'
    })
})

效果图

scroll效果

About

仿ios日期选择与省市区联动选择[master分支为JQ实现,js-dev分支为原生JS实现]

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published