素材牛VIP会员

jQuery移动端联动下拉日期选择插件mobile.js

 所属分类:网页特效-输入/选择框/联动,时间日期

 浏览:2565次  评论:4次  更新时间:2019-04-20
牛币素材VIP可免积分下载
jQuery移动端联动下拉日期选择插件mobile.js兼容IE10
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:基于mobile.js移动端联动下拉日期选择支持、单列、多列、联动、非联动

详细介绍

1.普通数组格式-非联动

<div id="trigger1"></div> <!--页面中别漏了这个trigger-->
<script>
    var mobileSelect1 = new MobileSelect({
        trigger: '#trigger1',
        title: '日期选择',
        wheels: [
            {data:_data}
        ],
        transitionEnd:function(indexArr, data){
            console.log(data);
        },
        callback:function(indexArr, data){
            console.log(data);
            $("#trigger1").val(data[0].value+'-'+data[1].value+'-'+data[2].value)
        }
    });
</script>

2.json格式-非联动

<div id="trigger2"></div>
<script>
    var mobileSelect1 = new MobileSelect({
        trigger: '#trigger2',
        title: '地区选择',
        wheels: [
            {data:[
                    {id:'1',value:'附近'},
                    {id:'2',value:'上城区'},
                    {id:'3',value:'下城区'},
                    {id:'4',value:'江干区'},
                    {id:'5',value:'拱墅区'},
                    {id:'6',value:'西湖区'}
                ]}
        ],
        transitionEnd:function(indexArr, data){
            console.log(data);
        },
        callback:function(indexArr, data){
            console.log(data);
            $("#trigger2").val(data[0].value)
        }
    });
</script>

3.json格式-联动

<div id="trigger3"></div>

文件目录结构

  • css
    • ┝ mobileSelect.css
  • ┝ index.html
  • js
    • ┝ auto-size.js
    • ┝ jquery-1.11.2.min.js
    • ┝ mobileSelect.js

相关素材 - 输入/选择框/联动,时间日期

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

qq***76  
2019年04月24日

图不错哈哈,感谢分享11111123

回复
矿***水  
2019年06月14日

不错不错,感谢分享

回复
ka***88  
2019年06月26日

不错不错,感谢分享

回复
零***落  
2019年07月18日

不错不错,感谢分享

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

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