井井客

搜索

自制仿IOS日期选择滚动插件可日期可省市区联动

因为页面需求做一个仿ios的日期三联滚动,在网上搜索了一下,可能功能较多所以代码接近100K,所以自制个小的,JQ和原生分别压缩后都在8KB左右,可支持省市区和日期的联动选择。

自制仿IOS日期选择滚动插件可日期可省市区联动

查看代码详情可以移步至github:https://github.com/jingjingke/scroll-select

当前主(master)分支为JQ实现,js-dev分支则为原生JS实现的代码,未压缩的代码大概在15KB左右,压缩后在8K左右。目前两个分支的效果已经基本完成。

因为代码有400-500行,所以下面只截取部分用于说明用法和注意事项。

//主要使用方法:
scrollSelect.go()

//可传参数
data	//[json]只省市区才需要传入data
level   //[number](必需)联动等级(目前有1、2、3级)
type    //[str](必需)当前只支持省市区地址(address)和日期(calendar)

因为JQ的选择器使用比较方便,所以JQ我提示了两个传选择器的对象,elArr为主要获取与填充值的选择器(表单元素),el则为非表单元素存放拼合或格式过的选择器--如“2017-1-15”可以在代码中设置返回“2017年1月15日”等,而el也可以不传值。

//JQ可传的
elArr   //[str](必需)传入表单的选择器名如#div或.div,用于获取默认值以及确定后将值添入
el      //[str]这个按需来传非表单选择器,用于将默认值以某种格式添入

另外JS的选择器只提供了el传递ID选择器,而表单元素则在JS代码中经过getElementsTagName进行获取。

el      //[str]传递为Id选择器名

使用时需要注意:

(1)如之前如述,传入选择器elArr和el的区别。在JQ与JS中主要差别就在获取默认值以及向DOM中填充值时的差异。前者是直接指向表单元素,而后者则是在ID选择器下再向下查找一层。

可查看scroll-select.js偏向上面的代码:

//JQ
$(param.elArr).each(function(index){
    _obj.value[index] = $(this).val();
});

//JS
_obj.ipt = document.getElementById(param.el).getElementsByTagName('input');
for(var i=0; i < _obj.ipt.length; i++){ _obj.value[i] = _obj.ipt[i].value; } 

(2)关于向DOM填值el,elArr

我原先的是想使用"2017年3月3日"填入input中,但是实际传递给接口的日期,需要的是“2017-3-3”这种日期格式,若想继续使用年月日文字的,则需要两个input。另外省市区也是分别对应有三个input,但我想使用一个input记录省市区合起来的字符串。所以使用两个el、elArr选择器就成了必须。
但是在后面JS原生代码中我就没有特别指出,如果需要使用的话可以在$submit的绑定的点击的事点中来进行修改。

修改的代码也是差不多的,不过可以先看一下填值

//JQ
var str ='';
$(param.elArr).each(function(index){
    str += _obj.value[index];
    $(this).val(_obj.value[index]);
})
//若需要向省市区填值的话可以使用下面这种(表单元素用val,非表单元素用html)
$(param.el).html(str)


//JS
var str ='';
for(var i=0; i < _obj.ipt.length; i++){ str += _obj.value[i]; _obj.ipt[i].value = _obj.value[i]; } //若需填值则需要先获取DOM节点再进行赋值 document.getElementById(param.el).getElementsByTagName('span')[0].innerHTML = str; 

这边为了方便只选了省市区填值,日期的填值则和上面的代码意思差不多。

(3)绑定事件的小瑕疵

在绑定事件的地方,我在写demo的时候并没有一致化。在html的里面我使用都是click,而在JS中使用的是根据移动端事件绑定的touch/mouse事件,这就导致了如果确定取消按钮与表单重叠时,会发生总是弹出的问题,在实际中统一绑定事件就可以了。

查看效果图:https://jingjingke.github.io/scroll-select/
JQ代码:https://github.com/jingjingke/scroll-select/blob/master/js/scroll-select.js
JS代码:https://github.com/jingjingke/scroll-select/blob/js-dev/js/scroll-select.js

代码还有待还善的地方,欢迎下方拍砖,或去github上面提Issues

文章TAG:JQ,JS

作者:井井客原创来源:原创
本文标题:自制仿IOS日期选择滚动插件可日期可省市区联动
本文链接:http://www.jingjingke.com/c/27262.html

上一篇:没有退出接口的页面实现退出功能流程图
下一篇:走进artTemplate模板引擎[demo汇总]

文章分类

相关阅读

随便看看