LArea.js:移动端城市类IOS原生三级联动选择插件

2017-09-01 16:29 栏目:技术开发 查看(11408)

湖南幸运赛车爱彩人彩票网 www.schu9.cn 在很多网站建设项目中,都需要填写用户的所属地区的数据,比如最近我们团队在开发一个商城项目就需要做收货地址的功能。而在移动端上,IOS原生的那个选择框看起来非常不错,大家可以看微信的收获地址功能,体验还不错。当然如果项目是在微信端,我们可以利用微信的jssdk拉取用户在微信中保存的收货信息。

好了话不多少,今天就跟大家介绍一款非常好用的不依赖其他任何js库的移动端城市选择插件——LArea.js。这个插件使用起来非常简单,也可以根据自己实际需要进行个性化改造。该项目在github上有几百颗星,还算不错的一个项目。

QQ截图20170901162826

项目地址:https://github.com/xfhxbb/LArea

这是一个纯原生js的移动端城市选择插件,不依赖任何库 ##用法 在html页面中引入input标签,写法如下:

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

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

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

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

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

初始化插件:

var area = new LArea();
area.init({
    'trigger': '#demo1',//触发选择控件的文本框,同时选择完毕后name属性输出到该位置
    'valueTo':'#value1',//选择完毕后id属性输出到该位置
    'keys':{id:'id',name:'name'},//绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
    'type':1,//数据源类型
    'data':LAreaData//数据源
});

自定义数据源结构参考:

//初始化type=1时,参考下列数据源
var LAreaData1 = [{
         "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"
         }]
     }];
     
//初始化type=2时,参考下列数据源
var provs_data = [{
    "text": "省",
    "value": "1"
}, {
    "text": "省",
    "value": "2"
}];
var citys_data = {
    "1": [{
        "text": "市",
        "value": "11"
    }, {
        "text": "市",
        "value": "12"
    }],
    "2": [{
        "text": "市",
        "value": "21"
    }, {
        "text": "市",
        "value": "22"
    }]
};
var dists_data = {
    "11": [{
        "text": "区",
        "value": "111"
    }, {
        "text": "区",
        "value": "112"
    }],
    "21": [{
        "text": "区",
        "value": "211"
    }, {
        "text": "区",
        "value": "212"
    }]
};

关于数据源也可以直接利用这个插件包中已经有的两个数据包,分别是LAreaData1.js和LAreaData2.js,使用自己的数据源也可以参考这两种风格来进行。

与我们的项目经理联系
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处:LArea.js:移动端城市类IOS原生三级联动选择插件 - 微构网络
分享:
  • 中央直属机关工委主要职责 2019-05-22
  • 打造“互联网+”,共享经济改变百姓生活 2019-04-22
  • 破财免灾!C罗愿向西班牙税务部门缴纳1880万欧元 2019-04-19
  • 中国品牌SUV新标杆 人民网试驾WEY VV7VV5 2019-04-19
  • 杨爱国:借助小博会促进尚志社会经济加快发展 2019-04-15
  • 泪目!川农院士逝世5年,夫人每日都去看他的雕像…思念如马,不停蹄! 2019-04-15
  • 海信世界杯首秀出奇招 竟打出俄文广告 2019-03-25
  • 财政部:对原产于美国的500亿美元进口商品加征关税 2019-03-11
  • 我和《人民日报》(我与人民日报·纪念人民日报创刊70周年) 2019-03-11
  • 杭州再增100个海绵城市项目 2018-11-08
  • 新华网申领新闻记者证资格审核公示 2018-11-08
  • 763| 808| 763| 405| 186| 833| 647| 292| 65| 525|