纯原生js移动端城市选择插件
2016-02-03 14:43
281 查看
接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery、zepto的,更加可恨的是大多数都是PC版的,三个select标签!!!这在移动端上的体验太low了,我想以我的脾气肯定是要自己做的,正好之前做了日期选择,那就依葫芦画瓢自己再做一个吧,来来来,先上效果图:
将样式文件引入到页面中:
同时引入js文件到页面中:
初始化插件:
lAreaData是我自己组织的一个城市数据源数组,定义在js插件脚本中的底部,数据源的格式为:
结构我想大家一看就能明白,所以大家可以依照自己的需求灵活的自定义需要产生联动的数据源。
这款纯js的移动端城市选择插件本身体积很小,去掉lAreaData变量体积不到5kb,适用于在移动端中实现省市县联动效果,其实这个插件要比上一篇的日期选择插件重要的多,因为日期插件移动端有原生的,而移动端中城市选择插件没有原生的,而且项目中的这类需求出现频率是非常高的。
独乐乐不如众乐乐,如果伙伴们手上没有移动端城市选择插件不如先拿我这个应付一下吧!
项目地址:https://github.com/xfhxbb/LArea
用法
在html页面中引入input标签,写法如下:<input id="demo1" type="text" readonly="" name="input_area" placeholder="城市选择特效"/>
将样式文件引入到页面中:
<link rel="stylesheet" href="css/common/lArea.css">
同时引入js文件到页面中:
<script src="lArea.js"></script>
初始化插件:
var area = new lArea(); area.init({ 'trigger': '#demo1',//控件ID 'data':lAreaData//数组格式数据源,可扩展为自定义数据源 });
lAreaData是我自己组织的一个城市数据源数组,定义在js插件脚本中的底部,数据源的格式为:
var lAreaData = [{ "id": "2", "name": "一级", "child": [{ "id": "21", "name": "二级1", "child": [{ "id": "211", "name": "三级1" }, { "id": "212", "name": "三级2" }, { "id": "213", "name": "三级3" }] }, { "id": "22", "name": "二级2" }, { "id": "23", "name": "二级3" }] }];
结构我想大家一看就能明白,所以大家可以依照自己的需求灵活的自定义需要产生联动的数据源。
这款纯js的移动端城市选择插件本身体积很小,去掉lAreaData变量体积不到5kb,适用于在移动端中实现省市县联动效果,其实这个插件要比上一篇的日期选择插件重要的多,因为日期插件移动端有原生的,而移动端中城市选择插件没有原生的,而且项目中的这类需求出现频率是非常高的。
独乐乐不如众乐乐,如果伙伴们手上没有移动端城市选择插件不如先拿我这个应付一下吧!
项目地址:https://github.com/xfhxbb/LArea
相关文章推荐
- 树莓派3(全志A20)Android固件编译
- Android 阴影学习
- adb命令查看app内存占用信息
- 微信企业号通讯录异步更新(java)
- Android 高仿 iOS 的省、市、区三级联动效果库(含数据,可直接用到项目中)
- HTML5新特性之用SVG绘制微信logo
- Office Web Apps2013安装部署
- 文件基本操作---小程序---显示目标文件内容
- 关于Android 的内存泄露及分析(转)
- android使用中一些问题,备忘
- (28)Cocos2d-x xml解析
- (27)Cocos2d-x 3.0 Json用法
- GeoTools-Swing显示原理
- 阅读《Android 从入门到精通》(22)——网格视图
- Android Jni开发之自动化编译添加jni代码提示
- Last upgrade crashes network manager (no internet connection, no applet)
- 【MIG专项测试组】如何量化Android应用的“卡”?—流畅度原理&定义篇
- (20)Cocos2d-x中的引用计数(Reference Count)和自动释放池(AutoReleasePool)
- android 视频下载
- Android APP新的“优雅”退出方式--EventBus大显身手