<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/rem.js"></script>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/mobiscroll-2.13.2.full.min.css" />
<link rel="stylesheet" type="text/css" href="css/LArea.css" />
<link href="css/style.css" rel="stylesheet"/>
<style type="text/css">
body,html{
background: #f6f6f6;
}
</style>
</head>
<body>
<div class="query-formbox">
<ul>
<li>
<label>年龄</label>
<input id="age" onclick="selectAge()" class="text fr tlr arrow" type="text" name="" readonly="" unselectable="on" onfocus="this.blur()" placeholder="请选择">
</li>
<li>
<label>地址</label>
<input id="selectArea" class="text fr tlr arrow" type="text" name="" readonly="" unselectable="on" onfocus="this.blur()" placeholder="请选择">
</li>
<li>
<label>日期</label>
<input id="dateinput" class="text fr tlr arrow" type="text" name="" readonly="" unselectable="on" onfocus="this.blur()" placeholder="请选择">
</li>
</ul>
</div>
<!-- 设置选择数据 -->
<ul id="searchAge" class="selectbox-list">
<li><span class="single">16-18</span></li>
<li><span>18-25</span></li>
<li><span>25-30</span></li>
<li><span>30-5</span></li>
<li><span>35以上</span></li>
</ul>
</body>
<script type="text/javascript" src="js/mobiscroll-2.13.2.full.min.js"></script>
<script src="js/LArea.js"></script>
<script src="js/LAreaData.js"></script>
<script type="text/javascript">
$(function () {
var age_i = Math.floor($('#searchAge>li').length / 2)
/*选择列表配置*/
$("#searchAge").mobiscroll().treelist({
theme: "ios7", //android-ics light 居中样式
lang: "zh",
defaultValue: [age_i],
inputClass:'mobiscroll-input',
rows:3,//滚动区域内的行数
//cancelText: null,
placeholder: 'click me',
headerText: function (valueText) { return "选择年龄(岁)"; },//显示选择框标题
formatResult: function (array) { //返回自定义格式结果
return $('#searchAge>li').eq(array[0]).children('span').text() +' '+ $('#searchAge>li').eq(array[0]).find('ul li').eq(array[1]).text().trim(' ');
},
// 显示值到输入框
onSelect: function () {
var age = $('#searchAge_dummy').val();
$('#age').val(age)
},
//将确定按钮与取消按钮交换位置
//onShow: showDialog
});
});
/*弹出选择框*/
function selectAge(){
$('#searchAge_dummy').focus();
}
/*时间控件*/
$(function () {
var nowData=new Date();
var opt= {
theme:'ios7', //设置显示主题
mode:'scroller', //设置日期选择方式，这里用滚动
display:'bottom', //设置控件出现方式及样式
preset : 'date', //日期:年 月 日 时 分
//minDate: nowData,
//maxDate:new Date(nowData.getFullYear(),nowData.getMonth(),nowData.getDate()+7,22,00),
dateFormat: 'yy-mm-dd', // 日期格式
// dateOrder: 'yymmdd', //面板中日期排列格式
stepMinute: 1, //设置分钟步长
yearText:'年',
monthText:'月',
dayText:'日',
hourText:'时',
minuteText:'分',
lang:'zh' //设置控件语言};
};
$('#dateinput').mobiscroll(opt);
});
/*绑定地址选择控件*/
var area = new LArea();
area.init({
'trigger': '#selectArea', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
'valueTo': '#value', //选择完毕后id属性输出到该位置
'keys': {
id: 'value',
name: 'text'
}, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
'type': 2, //数据源类型
'data': [provs_data,citys_data,dists_data]
});
</script>
</html>
移动端滑动选择效果(含自定义选择内容/日期选择/地址选择)
版权申诉
198 浏览量
2022-03-16
15:17:48
上传
评论
收藏 107KB ZIP 举报
移动端滑动选择效果.zip （11个子文件） 
移动端滑动选择效果 css 
mobiscroll-2.13.2.full.min.css 66KB LArea.css 4KB style.css 2KB images 
arrow-r.png 1KB mobiscroll-line.png 1KB js jquery.min.js 91KB rem.js 1KB LArea.js 15KB mobiscroll-2.13.2.full.min.js 72KB LAreaData.js 172KB
demo.html 5KB
评论0