天天看点

自己动手丰衣足食之移动端城市选择插件

下载地址:http://download.csdn.net/detail/cometwo/9436021

接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery、zepto的,更加可恨的是大多数都是pc版的,三个select标签!!!这在移动端上的体验太low了,我想以我的脾气肯定是要自己做的,正好之前做了日期选择,那就依葫芦画瓢自己再做一个吧,来来来,先上效果图:

自己动手丰衣足食之移动端城市选择插件

在html页面中引入input标签,写法如下:

将样式文件引入到页面中:

同时引入js文件到页面中:

初始化插件:

lareadata是我自己组织的一个城市数据源数组,定义在js插件脚本中的底部,数据源的格式为:

自己动手丰衣足食之移动端城市选择插件
自己动手丰衣足食之移动端城市选择插件

结构我想大家一看就能明白,所以大家可以依照自己的需求灵活的自定义需要产生联动的数据源。

这款纯js的移动端城市选择插件本身体积很小,去掉lareadata变量体积不到5kb,适用于在移动端中实现省市县联动效果,其实这个插件要比上一篇的日期选择插件重要的多,因为日期插件移动端有原生的,而移动端中城市选择插件没有原生的,而且项目中的这类需求出现频率是非常高的。

独乐乐不如众乐乐,如果伙伴们手上没有移动端城市选择插件不如先拿我这个应付一下吧!

项目地址:https://github.com/xfhxbb/larea

json:

继续阅读