插件加载
http://blog.dj5.cn/uploads/20230327/a6e7cc1fa70d1e0428439b7e129f6b84.rar
示例：http://yanshi.sucainiu.com/demo/mobileSelect-js.html
示例代码：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>移动端可滑动选择插件-mobileSelect</title>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="wap-font-scale" content="no">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1,user-scalable=no">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="css/public.css">
<link rel="stylesheet" type="text/css" href="css/mobileSelect.css">
<script src="js/mobileSelect.js" type="text/javascript"></script>
<style type="text/css">.nav h1{text-align:center;line-height:60px;}.reading h2{width:100%;margin:60px 0;text-align:center;line-height:2;font-size:20px;color:#59595b;}.reading h2 a{text-decoration:none;color:#59595b;font-size:20px;}.reading h2 a:hover{color:#2183f1;}</style>
</head>
<body>
<div class="contain">
<div class="fixWidth">
<div class="nav">
<h1>移动端可滑动选择插件-mobileSelect.js</h1>
</div>
<div class="demo">
<div id="trigger1">单项选择</div>
<div id="trigger2">双项选择</div>
<div id="trigger3">多项选择</div>
<div id="trigger4">地区选择-级联</div>
<div id="trigger5">车型选择-级联</div>
</div>
</div>
</div>
<script type="text/javascript">var weekdayArr =['周日','周一','周二','周三','周四','周五','周六'];var timeArr =['08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00'];var numArr =['1','2','3','4','5'];var UplinkData =[{id:'1',value:'兰博基尼' },{id:'2',value:'劳斯莱斯',childs:[{id:'1',value:'曜影'
},{id:'2',value:'幻影',childs:[{id:'1',value:'标准版'
},{id:'2',value:'加长版'
},{id:'3',value:'巅峰之旅'
},{id:'4',value:'流光熠世'
},{id:'5',value:'都会典藏版'
}
]
},{id:'3',value:'古思特',childs:[{id:'1',value:'加长版'
},{id:'2',value:'永恒之爱'
},{id:'3',value:'英骥'
},{id:'4',value:'阿尔卑斯典藏版'
}
]
},{id:'4',value:'魅影',childs:[{id:'1',value:'标准版'
},{id:'2',value:'Black Badge'
}
]
}
]
},{id:'3',value:'宾利',childs:[{id:'1',value:'慕尚',childs:[{id:'1',value:'标准版'
},{id:'2',value:'极致版'
}
]
},{id:'2',value:'欧陆',childs:[{id:'1',value:'尊贵版'
},{id:'2',value:'敞篷标准版'
},{id:'3',value:'敞篷尊贵版'
}
]
}
]
},{id:'4',value:'法拉利',childs:[{id:'1',value:'LaFerrari'
},{id:'2',value:'法拉利488'
},{id:'3',value:'GTC4Lusso'
}
]
},{id:'5',value:'玛莎拉蒂',childs:[{id:'1',value:'总裁'
},{id:'2',value:'玛莎拉蒂GT'
},{id:'3',value:'Levante'
}
]
}
];var mobileSelect1 =new MobileSelect({trigger:'#trigger1',title:'单项选择',wheels:[{data:weekdayArr }
],position:[2],transitionEnd:function (indexArr,data) {},callback:function (indexArr,data) {console.log(data);}
});var mobileSelect2 =new MobileSelect({trigger:'#trigger2',title:'双项选择',wheels:[{data:weekdayArr },{data:timeArr }
],position:[1,2],transitionEnd:function (indexArr,data) {},callback:function (indexArr,data) {console.log(data);}
});var mobileSelect3 =new MobileSelect({trigger:'#trigger3',title:'多项选择',wheels:[{data:numArr },{data:numArr },{data:numArr },{data:numArr },{data:numArr }
],position:[0,1,0,1,0],transitionEnd:function (indexArr,data) {},callback:function (indexArr,data) {console.log(data);}
});var mobileSelect4 =new MobileSelect({trigger:'#trigger4',title:'地区选择',wheels:[{data:[{id:'1',value:'附近',childs:[{id:'1',value:'1000米' },{id:'2',value:'2000米' },{id:'3',value:'3000米' },{id:'4',value:'5000米' },{id:'5',value:'10000米' }
]
},{id:'2',value:'上城区' },{id:'3',value:'下城区' },{id:'4',value:'江干区' },{id:'5',value:'拱墅区' },{id:'6',value:'西湖区' }
]
}
],transitionEnd:function (indexArr,data) {},callback:function (indexArr,data) {console.log(data);}
});var mobileSelect5 =new MobileSelect({trigger:'#trigger5',title:'车型选择',wheels:[{data:UplinkData }
],position:[2,0],transitionEnd:function (indexArr,data) {},callback:function (indexArr,data) {console.log(data);}
});</script>
</body>
</html>
<a href="http://www.bootstrapmb.com" style="display:none">bootstrapmb</a>
发表评论 取消回复