素材牛VIP会员

移动端响应式城市选择控件

 所属分类:网页特效-表单特效,输入/选择框/联动,触屏/拖拽/下拉

 浏览:4479次  评论:0次  更新时间:2016-09-09
牛币素材VIP可免积分下载
移动端响应式城市选择控件兼容IE11
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:纯原生JS实现的移动端城市选择插件,效果非常好

详细介绍

使用方法:

引入CSS样式文件

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

引入JS插件文件

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

插件初始化、配置(两种类型)

var area1 = new LArea();
area1.init({
    'trigger': '#demo1', //触发选择控件的文本框,同时选择完毕后name属性输出到该位置
    'valueTo': '#value1', //选择完毕后id属性输出到该位置
    'keys': {
        id: 'id',
        name: 'name'
    }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
    'type': 1, //数据源类型
    'data': LAreaData //数据源
});
area1.value=[1,13,3];//控制初始位置,注意:该方法并不会影响到input的value
var area2 = new LArea();
area2.init({
    'trigger': '#demo2',
    'valueTo': '#value2',
    'keys': {
        id: 'value',
        name: 'text'
    },
    'type': 2,
    'data': [provs_data, citys_data, dists_data]
});

HTML结构(对应配置里面的两种方式)

<div class="content-block">
    <input id="demo1" type="text" readonly="" placeholder="城市选择特效"  value="广东省,深圳市,南山区"/>
    <input id="value1" type="hidden" value="20,234,504"/>
</div>
<div class="content-block">
    <input id="demo2" type="text" readonly="" placeholder="城市选择特效" />
    <input id="value2" type="hidden" />
</div>

相关素材 - 表单特效,输入/选择框/联动,触屏/拖拽/下拉

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)