纯原生js移动端城市选择插件
接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery、zepto的,更加可恨的是大多数都是PC版的,三个select标签!!!这在移动端上的体验太low了,我想以我的脾气肯定是要自己做的,正好之前做了日期选择,那就依葫芦画瓢自己再做一个吧,来来来,先上效果图:
用法
在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
纯原生js移动端城市选择插件的更多相关文章
- 纯原生js移动端日期选择插件
最近在项目上需要使用日期选择插件,由于是移动端的项目,对请求资源还是蛮节约的,可是百度上一搜,诶~全是基于jquery.zepto的,本来类库就很大,特别像mobiscroll这种样式文件一大堆又丑又 ...
- zepto.js移动端城市选择插件
http://sc.chinaz.com/jiaoben/170327301850.htm
- 纯原生js移动端图片压缩上传插件
前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...
- 移动端lCalendar纯原生js日期时间选择器
网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...
- 移动端城市选择JavaScript插件(基于WG的城市选择插件的修改版本)
周末的时候趁着一次机会,拿WG(博客)开发的城市选择插件改了一个移动端可以直接用的城市选择插件. 原版插件是基于原声JavaScript写的,在此先感谢作者. 我做的只是依照肯德基注册会员的页面的交互 ...
- 基于jquery的城市选择插件
城市选择插件的难度不是很大,主要是对dom节点的操作.而我写的这个插件相对功能比较简答,没有加入省市联动. 上代码好了,参照代码的注释应该比较好理解. /* *基于jquery的城市选择插件 *aut ...
- 原生js移动端列表无缝间歇向上滚动
在项目开发中尤其是在项目的活动页面的开发中,经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中,并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的.通常的做法是通过将列表父元 ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 原生 JS实现一个简单分页插件
最近做的一个 PC端的需求,这个需求中有一个小点,页面底部有一块列表区域,这个列表的数据量比较大,需要进行分页控制,切换页码的时候,发送一个 ajax请求,在页面无刷新的情况下,实现列表数据的刷新,所 ...
随机推荐
- Xposed知识
最近闹得沸沸扬扬的MIUI抄袭Xposed不署名事件,为此在这里普及一下相关的Xposed的知识. 相关资源 source code: https://github.com/rovo89 online ...
- IOS debug网络PonyDebugger 实践篇
引言: PonyDebugger是一个很给力的iOS调试工具,它的监视器安装在Chrome浏览器下做为插件使用,通过监视器和PonyDebugger的iOS SDK相辅相成,可以很好的监视App的运 ...
- [转]Log4Net中配置文件的解释
FROM:http://www.cnblogs.com/kissazi2/p/3392605.html 一个完整的配置文件的例子如下所示 <log4net> <!-- 错误日志类-- ...
- 关于Log4j的初始化
1Log4j是什么 Log4j是Apache比較优秀的开源项目.在各个平台和项目中有较为广泛的应用.是为JAVA平台开发的日志管理平台.同一时候,Log4j也是JAVA开发项目中使用比較普遍的日 ...
- sap 三代出口(BADI)的查找方法
sap 三代出口(BADI)的查找方法 对于根据事务代码查找对应的BADI,网上介绍的方法很多,但总结下来无非就两种方法,在此把它记录下来,方便以后自己查阅了.(1)通过SE24,输入CL_EXITH ...
- WebStorm 6.0下运行pomelo项目
最近想使用WebStorm来写pomelo,初次使用WebStorm,网上找了老半天根本没有介绍WebStorm如何创建或者打开运行pomelo的教程,网易pomelo官网介绍的使用 WebStorm ...
- qt 总结
Qt中的每个类,都有一个对应的同名头文件,其中包含其类定义.例如要使用QApplication类,则需要在程序中添加" #include <QApplication>" ...
- objc_msgSend消息传递学习笔记 – 对象方法消息传递流程
在Effective Objective-C 2.0 – 52 Specific Ways to Improve Your iOS and OS X Programs一书中,tip 11主要讲述了Ob ...
- iOS之设置状态栏颜色
状态栏的字体为黑色:UIStatusBarStyleDefault 状态栏的字体为白色:UIStatusBarStyleLightContent 一.在info.plist中,将View contro ...
- Fragment+Activity传递数据
自己经常使用的知识点,每次到要用的时候都还要再查一次才能懂得使用,终于体会到总结的必要性了. Activity传递数据给Fragment Bundle bundle_fragment=new Bund ...