LArea 纯js移动端城市选择控件

发表于   |   分类于   |     |   阅读次数

LArea 移动端城市选择控件

纯原生js的移动端城市选择插件，不依赖任何库

Github源码

介绍

纯 js 不依赖其他 js 库或插件

UI 仿 IOS 效果

用法

在html页面中引入input标签，写法如下：

1
<input id="demo1" type="text" readonly="" name="input_area" placeholder="城市选择特效"/>

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

1
<link rel="stylesheet" href="css/LArea.css">

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

1
<script src="js/LArea.js"></script>

初始化插件：

1
2
3
4
5
var area = new LArea();
area.init({
    'trigger': '#demo1',//控件ID
    'data':LAreaData//数组格式数据源，可扩展为自定义数据源
});

自定义数据源结构参考：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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"
    }]
}];