在帮客户开发网站的时候,需要实现在手机端滑动控件,实现中国的省市区三级联动选择效果,网上查阅相关资料,发现可以通过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下载