在帮客户开发网站的时候,需要实现在手机端滑动控件,实现中国的省市区三级联动选择效果,网上查阅相关资料,发现可以通过LArea控件实现,下面作者将具体的使用方法贴出,希望对需要使用的朋友有所帮助,效果如下图:

1、使用方法
1)html元素
<input type="text" class="picker" placeholder="请选择您的所在区域" > <input type="hidden" value="" class="fuwuid">
2)引入样式文件、城市数据文件、脚本文件即可,并简单的调整下样式
<link rel="stylesheet" href="css/LArea.min.css">
<script src="js/LAreaData1.js"></script>
<script src="js/LAreaData2.js"></script>
<script src="js/LArea.min.js"></script>
<style>
.larea_cancel{color:#878787;}
.larea_finish{color:#fa8919;}
.area_ctrl,.area_btn_box{background: #fff}
</style>
3)使用LArea插件脚本
<script>
var area1 = new LArea();
area1.init({
'trigger': '.picker', //触发选择控件的文本框,同时选择完毕后name属性输出到该位置
'valueTo': '.fuwuid', //选择完毕后id属性输出到该位置
'keys': {
id: 'id',
name: 'name'
}, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
'type': 1, //数据源类型
'data': LAreaData //数据源
});
area1.value=[5,21,10];//控制初始位置,注意:该方法并不会影响到input的value
</script>
2、官方下载链接:
https://github.com/xfhxbb/LArea,可以直接在官网下载最新源码
或者直接点击此处下载: LArea-master下载
